kumo-svelte 0.1.0-beta.0

package/src/lib/components/command-palette/CommandPaletteFooter.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '$lib/utils/cn';
+
+  interface Props {
+    children?: Snippet;
+    class?: string;
+    [key: string]: unknown;
+  }
+
+  let { children, class: className, ...rest }: Props = $props();
+</script>
+
+<div class={cn('border-t border-kumo-line px-3 py-2 text-xs text-kumo-subtle', className)} {...rest}>
+  {@render children?.()}
+</div>

package/src/lib/components/command-palette/CommandPaletteGroup.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { Command as CommandPrimitive } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+  import { cn } from '$lib/utils/cn';
+
+  interface Props {
+    children?: Snippet;
+    class?: string;
+    value?: string;
+    forceMount?: boolean;
+    [key: string]: unknown;
+  }
+
+  let { children, class: className, value, forceMount, ...rest }: Props = $props();
+</script>
+
+<CommandPrimitive.Group {value} {forceMount} class={cn('py-1', className)} {...rest}>
+  {@render children?.()}
+</CommandPrimitive.Group>

package/src/lib/components/command-palette/CommandPaletteGroupLabel.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { Command as CommandPrimitive } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+  import { cn } from '$lib/utils/cn';
+
+  interface Props {
+    children?: Snippet;
+    class?: string;
+    [key: string]: unknown;
+  }
+
+  let { children, class: className, ...rest }: Props = $props();
+</script>
+
+<CommandPrimitive.GroupHeading class={cn('px-2 py-1.5 text-xs font-medium text-kumo-subtle', className)} {...rest}>
+  {@render children?.()}
+</CommandPrimitive.GroupHeading>

package/src/lib/components/command-palette/CommandPaletteHighlightedText.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  interface Highlight {
+    start: number;
+    end: number;
+  }
+
+  type HighlightTuple = [number, number];
+
+  interface Segment {
+    text: string;
+    highlighted: boolean;
+  }
+
+  interface Props {
+    text: string;
+    highlights?: HighlightTuple[];
+    class?: string;
+    markClass?: string;
+  }
+
+  let { text, highlights = [], markClass = 'rounded bg-kumo-tint text-kumo-default' }: Props = $props();
+
+  const segments = $derived.by<Segment[]>(() => {
+    if (highlights.length === 0) return [{ text, highlighted: false }];
+
+    const sorted: Highlight[] = highlights
+      .map(([start, end]) => ({ start: Math.max(0, start), end: Math.min(text.length, end) }))
+      .filter(({ start, end }) => end > start)
+      .sort((a, b) => a.start - b.start);
+
+    const nextSegments: Segment[] = [];
+    let cursor = 0;
+
+    for (const highlight of sorted) {
+      if (highlight.start > cursor) {
+        nextSegments.push({ text: text.slice(cursor, highlight.start), highlighted: false });
+      }
+      nextSegments.push({ text: text.slice(highlight.start, highlight.end), highlighted: true });
+      cursor = highlight.end;
+    }
+
+    if (cursor < text.length) {
+      nextSegments.push({ text: text.slice(cursor), highlighted: false });
+    }
+
+    return nextSegments;
+  });
+</script>
+
+{#each segments as segment}
+  {#if segment.highlighted}<mark class={markClass}>{segment.text}</mark>{:else}{segment.text}{/if}
+{/each}

package/src/lib/components/command-palette/CommandPaletteInput.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { Command as CommandPrimitive } from 'bits-ui';
+  import { cn } from '$lib/utils/cn';
+
+  interface Props {
+    class?: string;
+    value?: string;
+    placeholder?: string;
+    [key: string]: unknown;
+  }
+
+  let { class: className, value = $bindable(''), placeholder = 'Type a command...', ...rest }: Props = $props();
+</script>
+
+<CommandPrimitive.Input
+  bind:value
+  {placeholder}
+  class={cn(
+    'h-11 w-full border-b border-kumo-line bg-transparent px-3 text-base text-kumo-default outline-none placeholder:text-kumo-muted',
+    className
+  )}
+  {...rest}
+/>

package/src/lib/components/command-palette/CommandPaletteItem.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import { Command as CommandPrimitive } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+  import { cn } from '$lib/utils/cn';
+
+  interface Props {
+    children?: Snippet;
+    class?: string;
+    value?: string;
+    keywords?: string[];
+    disabled?: boolean;
+    forceMount?: boolean;
+    onSelect?: () => void;
+    [key: string]: unknown;
+  }
+
+  let { children, class: className, value, keywords, disabled, forceMount, onSelect, ...rest }: Props = $props();
+</script>
+
+<CommandPrimitive.Item
+  {value}
+  {keywords}
+  {disabled}
+  {forceMount}
+  {onSelect}
+  class={cn(
+    'flex min-h-8 cursor-default select-none items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm text-kumo-default outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[selected]:bg-kumo-tint',
+    className
+  )}
+  {...rest}
+>
+  {@render children?.()}
+</CommandPrimitive.Item>

package/src/lib/components/command-palette/CommandPaletteItems.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { Command as CommandPrimitive } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let { children, ...rest }: Props = $props();
+</script>
+
+<CommandPrimitive.GroupItems {...rest}>
+  {@render children?.()}
+</CommandPrimitive.GroupItems>

package/src/lib/components/command-palette/CommandPaletteList.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { Command as CommandPrimitive } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+  import { cn } from '$lib/utils/cn';
+
+  interface Props {
+    children?: Snippet;
+    class?: string;
+    [key: string]: unknown;
+  }
+
+  let { children, class: className, ...rest }: Props = $props();
+</script>
+
+<CommandPrimitive.List class={cn('max-h-72 overflow-auto p-1', className)} {...rest}>
+  {@render children?.()}
+</CommandPrimitive.List>

package/src/lib/components/command-palette/CommandPaletteLoading.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import { Command as CommandPrimitive } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+  import { cn } from '$lib/utils/cn';
+
+  interface Props {
+    children?: Snippet;
+    class?: string;
+    progress?: number;
+    [key: string]: unknown;
+  }
+
+  let { children, class: className, progress, ...rest }: Props = $props();
+</script>
+
+<CommandPrimitive.Loading {progress} class={cn('px-2 py-6 text-center text-sm text-kumo-subtle', className)} {...rest}>
+  {@render children?.()}
+</CommandPrimitive.Loading>

package/src/lib/components/command-palette/CommandPalettePanel.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '$lib/utils/cn';
+
+  interface Props {
+    children?: Snippet;
+    class?: string;
+    [key: string]: unknown;
+  }
+
+  let { children, class: className, ...rest }: Props = $props();
+</script>
+
+<div class={cn('overflow-hidden rounded-xl bg-kumo-base shadow-lg ring ring-kumo-hairline', className)} {...rest}>
+  {@render children?.()}
+</div>

package/src/lib/components/command-palette/CommandPaletteResultItem.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { ArrowRight, ArrowSquareOut as ExternalLink } from 'phosphor-svelte';
+  import CommandPaletteItem from './CommandPaletteItem.svelte';
+  import CommandPaletteHighlightedText from './CommandPaletteHighlightedText.svelte';
+  import { cn } from '$lib/utils/cn';
+
+  interface Props<T = unknown> {
+    value: T;
+    title: string;
+    breadcrumbs?: string[];
+    titleHighlights?: [number, number][];
+    breadcrumbHighlights?: [number, number][][];
+    description?: string;
+    icon?: Snippet;
+    onclick?: (event?: MouseEvent) => void;
+    onSelect?: (value: T) => void;
+    showArrow?: boolean;
+    external?: boolean;
+    nonInteractive?: boolean;
+    class?: string;
+    [key: string]: unknown;
+  }
+
+  let {
+    value,
+    title,
+    breadcrumbs = [],
+    titleHighlights = [],
+    breadcrumbHighlights = [],
+    description,
+    icon,
+    onclick,
+    onSelect,
+    showArrow = true,
+    external = false,
+    nonInteractive = false,
+    class: className,
+    ...rest
+  }: Props = $props();
+
+  function handleSelect() {
+    if (nonInteractive) return;
+    onclick?.();
+    onSelect?.(value);
+  }
+</script>
+
+<CommandPaletteItem
+  value={String(value)}
+  disabled={nonInteractive}
+  onSelect={handleSelect}
+  class={cn('min-h-12 items-start px-3 py-2', className)}
+  {...rest}
+>
+  {#if icon}
+    <span class="mt-0.5 flex size-4 shrink-0 items-center justify-center text-kumo-subtle">
+      {@render icon()}
+    </span>
+  {/if}
+  <span class="min-w-0 flex-1">
+    {#if breadcrumbs.length}
+      <span class="mb-0.5 flex min-w-0 flex-wrap items-center gap-1 text-xs text-kumo-subtle">
+        {#each breadcrumbs as breadcrumb, index (`${index}-${breadcrumb}`)}
+          {#if index > 0}<span>/</span>{/if}
+          <span class="truncate">
+            <CommandPaletteHighlightedText text={breadcrumb} highlights={breadcrumbHighlights[index] ?? []} />
+          </span>
+        {/each}
+      </span>
+    {/if}
+    <span class="block truncate font-medium">
+      <CommandPaletteHighlightedText text={title} highlights={titleHighlights} />
+    </span>
+    {#if description}
+      <span class="block truncate text-xs text-kumo-subtle">{description}</span>
+    {/if}
+  </span>
+  {#if showArrow}
+    {#if external}
+      <ExternalLink class="mt-0.5 size-4 shrink-0 text-kumo-muted" />
+    {:else}
+      <ArrowRight class="mt-0.5 size-4 shrink-0 text-kumo-muted" />
+    {/if}
+  {/if}
+</CommandPaletteItem>

package/src/lib/components/command-palette/index.ts

@@ -0,0 +1,75 @@
+import { Command as CommandPrimitive } from 'bits-ui';
+import CommandPaletteRoot from './CommandPalette.svelte';
+import CommandPaletteDialog from './CommandPaletteDialog.svelte';
+import CommandPalettePanel from './CommandPalettePanel.svelte';
+import CommandPaletteInput from './CommandPaletteInput.svelte';
+import CommandPaletteList from './CommandPaletteList.svelte';
+import CommandPaletteGroup from './CommandPaletteGroup.svelte';
+import CommandPaletteGroupLabel from './CommandPaletteGroupLabel.svelte';
+import CommandPaletteItems from './CommandPaletteItems.svelte';
+import CommandPaletteItem from './CommandPaletteItem.svelte';
+import CommandPaletteResultItem from './CommandPaletteResultItem.svelte';
+import CommandPaletteHighlightedText from './CommandPaletteHighlightedText.svelte';
+import CommandPaletteEmpty from './CommandPaletteEmpty.svelte';
+import CommandPaletteLoading from './CommandPaletteLoading.svelte';
+import CommandPaletteFooter from './CommandPaletteFooter.svelte';
+
+export { default as CommandPaletteRoot } from './CommandPalette.svelte';
+export { default as CommandPaletteDialog } from './CommandPaletteDialog.svelte';
+export { default as CommandPalettePanel } from './CommandPalettePanel.svelte';
+export { default as CommandPaletteInput } from './CommandPaletteInput.svelte';
+export { default as CommandPaletteList } from './CommandPaletteList.svelte';
+export { default as CommandPaletteGroup } from './CommandPaletteGroup.svelte';
+export { default as CommandPaletteGroupLabel } from './CommandPaletteGroupLabel.svelte';
+export { default as CommandPaletteItems } from './CommandPaletteItems.svelte';
+export { default as CommandPaletteItem } from './CommandPaletteItem.svelte';
+export { default as CommandPaletteResultItem } from './CommandPaletteResultItem.svelte';
+export { default as CommandPaletteHighlightedText } from './CommandPaletteHighlightedText.svelte';
+export { default as CommandPaletteEmpty } from './CommandPaletteEmpty.svelte';
+export { default as CommandPaletteLoading } from './CommandPaletteLoading.svelte';
+export { default as CommandPaletteFooter } from './CommandPaletteFooter.svelte';
+export type { CommandPaletteCommand } from './CommandPalette.svelte';
+
+export const CommandPalette = Object.assign(CommandPaletteRoot, {
+  Root: CommandPaletteRoot,
+  Dialog: CommandPaletteDialog,
+  Panel: CommandPalettePanel,
+  Input: CommandPaletteInput,
+  List: CommandPaletteList,
+  Viewport: CommandPrimitive.Viewport,
+  Results: CommandPaletteList,
+  Group: CommandPaletteGroup,
+  GroupLabel: CommandPaletteGroupLabel,
+  GroupHeading: CommandPaletteGroupLabel,
+  Items: CommandPaletteItems,
+  Item: CommandPaletteItem,
+  LinkItem: CommandPrimitive.LinkItem,
+  ResultItem: CommandPaletteResultItem,
+  HighlightedText: CommandPaletteHighlightedText,
+  Empty: CommandPaletteEmpty,
+  Loading: CommandPaletteLoading,
+  Separator: CommandPrimitive.Separator,
+  Footer: CommandPaletteFooter
+}) as typeof CommandPaletteRoot & {
+  Root: typeof CommandPaletteRoot;
+  Dialog: typeof CommandPaletteDialog;
+  Panel: typeof CommandPalettePanel;
+  Input: typeof CommandPaletteInput;
+  List: typeof CommandPaletteList;
+  Viewport: typeof CommandPrimitive.Viewport;
+  Results: typeof CommandPaletteList;
+  Group: typeof CommandPaletteGroup;
+  GroupLabel: typeof CommandPaletteGroupLabel;
+  GroupHeading: typeof CommandPaletteGroupLabel;
+  Items: typeof CommandPaletteItems;
+  Item: typeof CommandPaletteItem;
+  LinkItem: typeof CommandPrimitive.LinkItem;
+  ResultItem: typeof CommandPaletteResultItem;
+  HighlightedText: typeof CommandPaletteHighlightedText;
+  Empty: typeof CommandPaletteEmpty;
+  Loading: typeof CommandPaletteLoading;
+  Separator: typeof CommandPrimitive.Separator;
+  Footer: typeof CommandPaletteFooter;
+};
+
+export default CommandPalette;