🎨 Add context-menu UI component

src/ui/context-menu/context-menu-checkbox-item.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+  import Check from 'svelte-radix/Check.svelte';
+  import { cn } from '@/utils/cn';
+
+  type $$Props = ContextMenuPrimitive.CheckboxItemProps;
+  type $$Events = ContextMenuPrimitive.CheckboxItemEvents;
+
+  let className: $$Props['class'] = undefined;
+  export { className as class };
+  export let checked: $$Props['checked'] = undefined;
+</script>
+
+<ContextMenuPrimitive.CheckboxItem
+  bind:checked
+  class={cn(
+    'data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+    className
+  )}
+  {...$$restProps}
+  on:click
+  on:keydown
+  on:focusin
+  on:focusout
+  on:pointerdown
+  on:pointerleave
+  on:pointermove
+>
+  <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <ContextMenuPrimitive.CheckboxIndicator>
+      <Check class="h-4 w-4" />
+    </ContextMenuPrimitive.CheckboxIndicator>
+  </span>
+  <slot />
+</ContextMenuPrimitive.CheckboxItem>

src/ui/context-menu/context-menu-content.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+  import { cn } from '@/utils/cn';
+  import { flyAndScale } from '@/utils/flyAndScale';
+
+  type $$Props = ContextMenuPrimitive.ContentProps;
+
+  let className: $$Props['class'] = undefined;
+  export let transition: $$Props['transition'] = flyAndScale;
+  export let transitionConfig: $$Props['transitionConfig'] = undefined;
+  export { className as class };
+</script>
+
+<ContextMenuPrimitive.Content
+  {transition}
+  {transitionConfig}
+  class={cn(
+    'bg-white dark:bg-neutral-900 text-popover-foreground z-50 min-w-[8rem] rounded-md border border-neutral-200 dark:border-neutral-800 p-1 shadow-md focus:outline-none',
+    className
+  )}
+  {...$$restProps}
+  on:keydown
+>
+  <slot />
+</ContextMenuPrimitive.Content>

src/ui/context-menu/context-menu-item.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+  import { cn } from '@/utils/cn';
+
+  type $$Props = ContextMenuPrimitive.ItemProps & {
+    inset?: boolean;
+  };
+  type $$Events = ContextMenuPrimitive.ItemEvents;
+
+  let className: $$Props['class'] = undefined;
+  export let inset: $$Props['inset'] = undefined;
+  export { className as class };
+</script>
+
+<ContextMenuPrimitive.Item
+  class={cn(
+    'data-[highlighted]:bg-neutral-100 dark:data-[highlighted]:bg-neutral-800 data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 space-x-2',
+    inset && 'pl-8',
+    className
+  )}
+  {...$$restProps}
+  on:click
+  on:keydown
+  on:focusin
+  on:focusout
+  on:pointerdown
+  on:pointerleave
+  on:pointermove
+>
+  <slot />
+</ContextMenuPrimitive.Item>

src/ui/context-menu/context-menu-label.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+  import { cn } from '@/utils/cn';
+
+  type $$Props = ContextMenuPrimitive.LabelProps & {
+    inset?: boolean;
+  };
+
+  let className: $$Props['class'] = undefined;
+  export let inset: $$Props['inset'] = undefined;
+  export { className as class };
+</script>
+
+<ContextMenuPrimitive.Label
+  class={cn('text-foreground px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', className)}
+  {...$$restProps}
+>
+  <slot />
+</ContextMenuPrimitive.Label>

src/ui/context-menu/index.ts

@@ -0,0 +1,31 @@
+import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+
+import Item from './context-menu-item.svelte';
+import Label from './context-menu-label.svelte';
+import Content from './context-menu-content.svelte';
+import CheckboxItem from './context-menu-checkbox-item.svelte';
+
+const Sub = ContextMenuPrimitive.Sub;
+const Root = ContextMenuPrimitive.Root;
+const Trigger = ContextMenuPrimitive.Trigger;
+const Group = ContextMenuPrimitive.Group;
+
+export {
+  Sub,
+  Root,
+  Item,
+  Label,
+  Group,
+  Trigger,
+  Content,
+  CheckboxItem,
+  //
+  Root as ContextMenu,
+  Sub as ContextMenuSub,
+  Item as ContextMenuItem,
+  Label as ContextMenuLabel,
+  Group as ContextMenuGroup,
+  Content as ContextMenuContent,
+  Trigger as ContextMenuTrigger,
+  CheckboxItem as ContextMenuCheckboxItem
+};