@profidev/pleiades 1.7.0

package/dist/components/ui-extra/button/button.svelte

@@ -0,0 +1,92 @@
+<script lang="ts" module>
+  import { cn, type WithElementRef } from '../../../blocks/utils.js';
+  import type {
+    HTMLAnchorAttributes,
+    HTMLButtonAttributes
+  } from 'svelte/elements';
+  import { type VariantProps, tv } from 'tailwind-variants';
+
+  export const buttonVariants = tv({
+    base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:ring-3 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/80',
+        outline:
+          'border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',
+        ghost:
+          'hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground',
+        destructive:
+          'bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30',
+        link: 'text-primary underline-offset-4 hover:underline'
+      },
+      size: {
+        default:
+          'h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: 'h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5',
+        lg: 'h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
+        icon: 'size-9',
+        'icon-xs':
+          "size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3",
+        'icon-sm':
+          'size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md',
+        'icon-lg': 'size-10'
+      }
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default'
+    }
+  });
+
+  export type ButtonVariant = VariantProps<typeof buttonVariants>['variant'];
+  export type ButtonSize = VariantProps<typeof buttonVariants>['size'];
+
+  export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
+    WithElementRef<HTMLAnchorAttributes> & {
+      variant?: ButtonVariant;
+      size?: ButtonSize;
+    };
+</script>
+
+<script lang="ts">
+  let {
+    class: className,
+    variant = 'default',
+    size = 'default',
+    ref = $bindable(null),
+    href = undefined,
+    type = 'button',
+    disabled,
+    children,
+    ...restProps
+  }: ButtonProps = $props();
+</script>
+
+{#if href}
+  <a
+    bind:this={ref}
+    data-slot="button"
+    class={cn(buttonVariants({ variant, size }), className)}
+    href={disabled ? undefined : href}
+    aria-disabled={disabled}
+    role={disabled ? 'link' : undefined}
+    tabindex={disabled ? -1 : undefined}
+    {...restProps}
+  >
+    {@render children?.()}
+  </a>
+{:else}
+  <button
+    bind:this={ref}
+    data-slot="button"
+    class={cn(buttonVariants({ variant, size }), className)}
+    {type}
+    {disabled}
+    {...restProps}
+  >
+    {@render children?.()}
+  </button>
+{/if}

package/dist/components/ui-extra/button/button.svelte.d.ts

@@ -0,0 +1,70 @@
+import { type WithElementRef } from '../../../blocks/utils.js';
+import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+import { type VariantProps } from 'tailwind-variants';
+export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        outline: string;
+        secondary: string;
+        ghost: string;
+        destructive: string;
+        link: string;
+    };
+    size: {
+        default: string;
+        xs: string;
+        sm: string;
+        lg: string;
+        icon: string;
+        'icon-xs': string;
+        'icon-sm': string;
+        'icon-lg': string;
+    };
+}, undefined, "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:ring-3 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+    variant: {
+        default: string;
+        outline: string;
+        secondary: string;
+        ghost: string;
+        destructive: string;
+        link: string;
+    };
+    size: {
+        default: string;
+        xs: string;
+        sm: string;
+        lg: string;
+        icon: string;
+        'icon-xs': string;
+        'icon-sm': string;
+        'icon-lg': string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        outline: string;
+        secondary: string;
+        ghost: string;
+        destructive: string;
+        link: string;
+    };
+    size: {
+        default: string;
+        xs: string;
+        sm: string;
+        lg: string;
+        icon: string;
+        'icon-xs': string;
+        'icon-sm': string;
+        'icon-lg': string;
+    };
+}, undefined, "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:ring-3 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", unknown, unknown, undefined>>;
+export type ButtonVariant = VariantProps<typeof buttonVariants>['variant'];
+export type ButtonSize = VariantProps<typeof buttonVariants>['size'];
+export type ButtonProps = WithElementRef<HTMLButtonAttributes> & WithElementRef<HTMLAnchorAttributes> & {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+};
+declare const Button: import("svelte").Component<ButtonProps, {}, "ref">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/components/ui-extra/button/index.d.ts

@@ -0,0 +1,2 @@
+import Root, { type ButtonProps, type ButtonSize, type ButtonVariant, buttonVariants } from './button.svelte';
+export { Root, type ButtonProps as Props, Root as Button, buttonVariants, type ButtonProps, type ButtonSize, type ButtonVariant };

package/dist/components/ui-extra/button/index.js

@@ -0,0 +1,4 @@
+import Root, { buttonVariants } from './button.svelte';
+export { Root, 
+//
+Root as Button, buttonVariants };

package/dist/components/ui-extra/chat/chat-bubble-avatar.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { Root } from '../avatar';
+  import { Avatar as AvatarPrimitive } from 'bits-ui';
+  import { cn } from '../../../blocks/utils.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: AvatarPrimitive.RootProps = $props();
+</script>
+
+<Root
+  bind:ref
+  class={cn(
+    "order-1 group-data-[variant='sent']/chat-bubble:order-2",
+    className
+  )}
+  {...restProps}
+/>

package/dist/components/ui-extra/chat/chat-bubble-avatar.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Avatar as AvatarPrimitive } from 'bits-ui';
+declare const ChatBubbleAvatar: import("svelte").Component<AvatarPrimitive.RootProps, {}, "ref">;
+type ChatBubbleAvatar = ReturnType<typeof ChatBubbleAvatar>;
+export default ChatBubbleAvatar;

package/dist/components/ui-extra/chat/chat-bubble-message.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import LoadingDots from './loading-dots.svelte';
+  import { cn } from '../../../blocks/utils.js';
+  import type { ChatBubbleMessageProps } from './types';
+
+  let {
+    ref = $bindable(null),
+    typing = false,
+    class: className,
+    children,
+    ...rest
+  }: ChatBubbleMessageProps = $props();
+</script>
+
+<div
+  {...rest}
+  bind:this={ref}
+  class={cn(
+    "bg-secondary group-data-[variant='sent']/chat-bubble:bg-primary group-data-[variant='sent']/chat-bubble:text-primary-foreground order-2 rounded-lg p-4 text-sm group-data-[variant='received']/chat-bubble:rounded-bl-none group-data-[variant='sent']/chat-bubble:order-1 group-data-[variant='sent']/chat-bubble:rounded-br-none",
+    className
+  )}
+>
+  {#if typing}
+    <div class="flex size-full place-items-center justify-center">
+      <LoadingDots />
+    </div>
+  {:else}
+    {@render children?.()}
+  {/if}
+</div>

package/dist/components/ui-extra/chat/chat-bubble-message.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ChatBubbleMessageProps } from './types';
+declare const ChatBubbleMessage: import("svelte").Component<ChatBubbleMessageProps, {}, "ref">;
+type ChatBubbleMessage = ReturnType<typeof ChatBubbleMessage>;
+export default ChatBubbleMessage;

package/dist/components/ui-extra/chat/chat-bubble.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import type { ChatBubbleProps } from './types';
+  import { cn } from '../../../blocks/utils.js';
+
+  let {
+    ref = $bindable(null),
+    variant,
+    children,
+    class: className,
+    ...rest
+  }: ChatBubbleProps = $props();
+</script>
+
+<div
+  {...rest}
+  bind:this={ref}
+  class={cn(
+    "group/chat-bubble flex max-w-[80%] flex-row place-items-end gap-2 data-[variant='sent']:place-self-end",
+    className
+  )}
+  data-variant={variant}
+>
+  {@render children?.()}
+</div>

package/dist/components/ui-extra/chat/chat-bubble.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ChatBubbleProps } from './types';
+declare const ChatBubble: import("svelte").Component<ChatBubbleProps, {}, "ref">;
+type ChatBubble = ReturnType<typeof ChatBubble>;
+export default ChatBubble;

package/dist/components/ui-extra/chat/chat-list.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import { cn } from '../../../blocks/utils.js';
+  import { onMount } from 'svelte';
+  import Button from '../../../blocks/button.svelte';
+  import ArrowDownIcon from '@lucide/svelte/icons/arrow-down';
+  import { scale } from 'svelte/transition';
+  import { UseAutoScroll } from '../../../blocks/use-auto-scroll.svelte.js';
+  import type { ChatListProps } from './types';
+
+  let {
+    ref = $bindable(null),
+    children,
+    class: className,
+    ...rest
+  }: ChatListProps = $props();
+
+  // Prevents movement on page load
+  let canScrollSmooth = $state(false);
+
+  const autoScroll = new UseAutoScroll();
+
+  onMount(() => {
+    canScrollSmooth = true;
+  });
+</script>
+
+<div class="relative">
+  <div
+    {...rest}
+    bind:this={ref}
+    class={cn(
+      'no-scrollbar flex h-full w-full flex-col gap-4 overflow-y-auto p-4',
+      className,
+      {
+        'scroll-smooth': canScrollSmooth
+      }
+    )}
+    bind:this={autoScroll.ref}
+  >
+    {@render children?.()}
+  </div>
+  {#if !autoScroll.isAtBottom}
+    <div
+      in:scale={{ start: 0.85, duration: 100, delay: 250 }}
+      out:scale={{ start: 0.85, duration: 100 }}
+    >
+      <Button
+        onclick={() => autoScroll.scrollToBottom()}
+        variant="outline"
+        size="icon"
+        class="absolute bottom-2 left-1/2 inline-flex -translate-x-1/2 transform rounded-full shadow-md"
+      >
+        <ArrowDownIcon />
+      </Button>
+    </div>
+  {/if}
+</div>

package/dist/components/ui-extra/chat/chat-list.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ChatListProps } from './types';
+declare const ChatList: import("svelte").Component<ChatListProps, {}, "ref">;
+type ChatList = ReturnType<typeof ChatList>;
+export default ChatList;

package/dist/components/ui-extra/chat/index.d.ts

@@ -0,0 +1,8 @@
+import Bubble from './chat-bubble.svelte';
+import BubbleMessage from './chat-bubble-message.svelte';
+import BubbleAvatar from './chat-bubble-avatar.svelte';
+import List from './chat-list.svelte';
+declare const BubbleAvatarImage: import("svelte").Component<import("bits-ui").AvatarImageProps, {}, "ref">;
+declare const BubbleAvatarFallback: import("svelte").Component<import("bits-ui").AvatarFallbackProps, {}, "ref">;
+export { List, Bubble, BubbleMessage, BubbleAvatar, BubbleAvatarImage, BubbleAvatarFallback };
+export type { ChatListPropsWithoutHTML, ChatListProps, ChatBubblePropsWithoutHTML, ChatBubbleProps, ChatBubbleMessagePropsWithoutHTML, ChatBubbleMessageProps } from './types';

package/dist/components/ui-extra/chat/index.js

@@ -0,0 +1,8 @@
+import Bubble from './chat-bubble.svelte';
+import BubbleMessage from './chat-bubble-message.svelte';
+import BubbleAvatar from './chat-bubble-avatar.svelte';
+import List from './chat-list.svelte';
+import * as Avatar from '../avatar';
+const BubbleAvatarImage = Avatar.Image;
+const BubbleAvatarFallback = Avatar.Fallback;
+export { List, Bubble, BubbleMessage, BubbleAvatar, BubbleAvatarImage, BubbleAvatarFallback };

package/dist/components/ui-extra/chat/loading-dots.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  type Props = {
+    size?: number;
+  };
+
+  let { size = 4 }: Props = $props();
+</script>
+
+<div
+  style:--loading-dots-size="{size}px"
+  class="inline-flex items-center gap-1"
+>
+  {#each { length: 3 } as _, i (i)}
+    <span
+      class="bg-primary inline-block size-(--loading-dots-size) rounded-full"
+    ></span>
+  {/each}
+</div>
+
+<style>
+  span {
+    animation-name: loading-dots;
+    animation-duration: 1.4s;
+    animation-iteration-count: infinite;
+    animation-fill-mode: both;
+  }
+
+  span:nth-of-type(2) {
+    animation-delay: 0.2s;
+  }
+
+  span:nth-of-type(3) {
+    animation-delay: 0.4s;
+  }
+
+  @keyframes loading-dots {
+    0% {
+      opacity: 0.2;
+    }
+    20% {
+      opacity: 1;
+    }
+    to {
+      opacity: 0.2;
+    }
+  }
+</style>

package/dist/components/ui-extra/chat/loading-dots.svelte.d.ts

@@ -0,0 +1,6 @@
+type Props = {
+    size?: number;
+};
+declare const LoadingDots: import("svelte").Component<Props, {}, "">;
+type LoadingDots = ReturnType<typeof LoadingDots>;
+export default LoadingDots;

package/dist/components/ui-extra/chat/types.d.ts

@@ -0,0 +1,16 @@
+import type { WithChildren, WithoutChildren } from 'bits-ui';
+import type { HTMLAttributes } from 'svelte/elements';
+export type ChatListPropsWithoutHTML = WithChildren<{
+    ref?: HTMLDivElement | null;
+}>;
+export type ChatListProps = ChatListPropsWithoutHTML & WithoutChildren<HTMLAttributes<HTMLDivElement>>;
+export type ChatBubblePropsWithoutHTML = WithChildren<{
+    ref?: HTMLDivElement | null;
+    variant: 'sent' | 'received';
+}>;
+export type ChatBubbleProps = ChatBubblePropsWithoutHTML & WithoutChildren<HTMLAttributes<HTMLDivElement>>;
+export type ChatBubbleMessagePropsWithoutHTML = WithChildren<{
+    ref?: HTMLDivElement | null;
+    typing?: boolean;
+}>;
+export type ChatBubbleMessageProps = ChatBubbleMessagePropsWithoutHTML & WithoutChildren<HTMLAttributes<HTMLDivElement>>;

package/dist/components/ui-extra/chat/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/ui-extra/collapsible/collapsible-content.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { Collapsible as CollapsiblePrimitive } from 'bits-ui';
+
+  let {
+    ref = $bindable(null),
+    ...restProps
+  }: CollapsiblePrimitive.ContentProps = $props();
+</script>
+
+<CollapsiblePrimitive.Content
+  bind:ref
+  data-slot="collapsible-content"
+  {...restProps}
+/>

package/dist/components/ui-extra/collapsible/collapsible-content.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Collapsible as CollapsiblePrimitive } from 'bits-ui';
+declare const CollapsibleContent: import("svelte").Component<CollapsiblePrimitive.ContentProps, {}, "ref">;
+type CollapsibleContent = ReturnType<typeof CollapsibleContent>;
+export default CollapsibleContent;

package/dist/components/ui-extra/collapsible/collapsible-trigger.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { Collapsible as CollapsiblePrimitive } from 'bits-ui';
+
+  let {
+    ref = $bindable(null),
+    ...restProps
+  }: CollapsiblePrimitive.TriggerProps = $props();
+</script>
+
+<CollapsiblePrimitive.Trigger
+  bind:ref
+  data-slot="collapsible-trigger"
+  {...restProps}
+/>

package/dist/components/ui-extra/collapsible/collapsible-trigger.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Collapsible as CollapsiblePrimitive } from 'bits-ui';
+declare const CollapsibleTrigger: import("svelte").Component<CollapsiblePrimitive.TriggerProps, {}, "ref">;
+type CollapsibleTrigger = ReturnType<typeof CollapsibleTrigger>;
+export default CollapsibleTrigger;

package/dist/components/ui-extra/collapsible/collapsible.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { Collapsible as CollapsiblePrimitive } from 'bits-ui';
+
+  let {
+    ref = $bindable(null),
+    open = $bindable(false),
+    ...restProps
+  }: CollapsiblePrimitive.RootProps = $props();
+</script>
+
+<CollapsiblePrimitive.Root
+  bind:ref
+  bind:open
+  data-slot="collapsible"
+  {...restProps}
+/>

package/dist/components/ui-extra/collapsible/collapsible.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Collapsible as CollapsiblePrimitive } from 'bits-ui';
+declare const Collapsible: import("svelte").Component<CollapsiblePrimitive.RootProps, {}, "ref" | "open">;
+type Collapsible = ReturnType<typeof Collapsible>;
+export default Collapsible;

package/dist/components/ui-extra/collapsible/index.d.ts

@@ -0,0 +1,4 @@
+import Root from './collapsible.svelte';
+import Trigger from './collapsible-trigger.svelte';
+import Content from './collapsible-content.svelte';
+export { Root, Content, Trigger, Root as Collapsible, Content as CollapsibleContent, Trigger as CollapsibleTrigger };

package/dist/components/ui-extra/collapsible/index.js

@@ -0,0 +1,6 @@
+import Root from './collapsible.svelte';
+import Trigger from './collapsible-trigger.svelte';
+import Content from './collapsible-content.svelte';
+export { Root, Content, Trigger, 
+//
+Root as Collapsible, Content as CollapsibleContent, Trigger as CollapsibleTrigger };

package/dist/components/ui-extra/command/command-dialog.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  import type {
+    Command as CommandPrimitive,
+    Dialog as DialogPrimitive
+  } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+  import Command from './command.svelte';
+  import * as Dialog from '../dialog/index.js';
+  import { cn, type WithoutChildrenOrChild } from '../../../blocks/utils.js';
+
+  let {
+    open = $bindable(false),
+    ref = $bindable(null),
+    value = $bindable(''),
+    title = 'Command Palette',
+    description = 'Search for a command to run...',
+    showCloseButton = false,
+    portalProps,
+    children,
+    class: className,
+    ...restProps
+  }: WithoutChildrenOrChild<DialogPrimitive.RootProps> &
+    WithoutChildrenOrChild<CommandPrimitive.RootProps> & {
+      portalProps?: DialogPrimitive.PortalProps;
+      children: Snippet;
+      title?: string;
+      description?: string;
+      showCloseButton?: boolean;
+      class?: string;
+    } = $props();
+</script>
+
+<Dialog.Root bind:open {...restProps}>
+  <Dialog.Header class="sr-only">
+    <Dialog.Title>{title}</Dialog.Title>
+    <Dialog.Description>{description}</Dialog.Description>
+  </Dialog.Header>
+  <Dialog.Content
+    class={cn(
+      'top-1/3 translate-y-0 overflow-hidden rounded-xl! p-0',
+      className
+    )}
+    {showCloseButton}
+    {portalProps}
+  >
+    <Command {...restProps} bind:value bind:ref {children} />
+  </Dialog.Content>
+</Dialog.Root>

package/dist/components/ui-extra/command/command-dialog.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Command as CommandPrimitive, Dialog as DialogPrimitive } from 'bits-ui';
+import type { Snippet } from 'svelte';
+import { type WithoutChildrenOrChild } from '../../../blocks/utils.js';
+type $$ComponentProps = WithoutChildrenOrChild<DialogPrimitive.RootProps> & WithoutChildrenOrChild<CommandPrimitive.RootProps> & {
+    portalProps?: DialogPrimitive.PortalProps;
+    children: Snippet;
+    title?: string;
+    description?: string;
+    showCloseButton?: boolean;
+    class?: string;
+};
+declare const CommandDialog: import("svelte").Component<$$ComponentProps, {}, "value" | "ref" | "open">;
+type CommandDialog = ReturnType<typeof CommandDialog>;
+export default CommandDialog;

package/dist/components/ui-extra/command/command-empty.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { Command as CommandPrimitive } from 'bits-ui';
+  import { cn } from '../../../blocks/utils.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: CommandPrimitive.EmptyProps = $props();
+</script>
+
+<CommandPrimitive.Empty
+  bind:ref
+  data-slot="command-empty"
+  class={cn('py-6 text-center text-sm', className)}
+  {...restProps}
+/>

package/dist/components/ui-extra/command/command-empty.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Command as CommandPrimitive } from 'bits-ui';
+declare const CommandEmpty: import("svelte").Component<CommandPrimitive.EmptyProps, {}, "ref">;
+type CommandEmpty = ReturnType<typeof CommandEmpty>;
+export default CommandEmpty;

package/dist/components/ui-extra/command/command-group.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import { Command as CommandPrimitive, useId } from 'bits-ui';
+  import { cn } from '../../../blocks/utils.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    heading,
+    value,
+    ...restProps
+  }: CommandPrimitive.GroupProps & {
+    heading?: string;
+  } = $props();
+</script>
+
+<CommandPrimitive.Group
+  bind:ref
+  data-slot="command-group"
+  class={cn(
+    'text-foreground **:[[cmdk-group-heading]]:text-muted-foreground overflow-clip p-1 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium',
+    className
+  )}
+  value={value ?? heading ?? `----${useId()}`}
+  {...restProps}
+>
+  {#if heading}
+    <CommandPrimitive.GroupHeading
+      class="text-muted-foreground px-2 py-1.5 text-xs font-medium"
+    >
+      {heading}
+    </CommandPrimitive.GroupHeading>
+  {/if}
+  <CommandPrimitive.GroupItems {children} />
+</CommandPrimitive.Group>

package/dist/components/ui-extra/command/command-group.svelte.d.ts

@@ -0,0 +1,7 @@
+import { Command as CommandPrimitive } from 'bits-ui';
+type $$ComponentProps = CommandPrimitive.GroupProps & {
+    heading?: string;
+};
+declare const CommandGroup: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type CommandGroup = ReturnType<typeof CommandGroup>;
+export default CommandGroup;