@lapismd/design-core 0.1.0 → 0.2.0

package/src/shared/forms/confirm-button/ConfirmButton.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import { Button, type ButtonProps } from "../../shadcn/button/index.js";
+  import ConfirmDialog, {
+    type ConfirmDialogProps,
+  } from "../confirm-dialog/ConfirmDialog.svelte";
+  import type { Snippet } from "svelte";
+  let {
+    children,
+    disabled = false,
+    variant,
+    size = "default",
+    ...confirmation
+  }: Omit<ConfirmDialogProps, "open"> & {
+    children: Snippet;
+    disabled?: boolean;
+    variant?: ButtonProps["variant"];
+    size?: ButtonProps["size"];
+  } = $props();
+  let open = $state(false);
+  let trigger = $state<HTMLButtonElement | null>(null);
+</script>
+
+<Button
+  bind:ref={trigger}
+  {disabled}
+  {size}
+  variant={variant ?? (confirmation.destructive ? "destructive" : "outline")}
+  onclick={() => (open = true)}>{@render children()}</Button
+>
+<ConfirmDialog
+  {...confirmation}
+  bind:open
+  onCloseAutoFocus={(event) => {
+    event.preventDefault();
+    trigger?.focus();
+    confirmation.onCloseAutoFocus?.(event);
+  }}
+/>

package/src/shared/forms/confirm-button/ConfirmButtonExample.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { ConfirmButton } from "@lapismd/design-core/forms/dialog";
+  let count = $state(0);
+</script>
+
+<ConfirmButton
+  title="Clear history?"
+  description="Remove saved history from this device."
+  destructive
+  onConfirm={() => {
+    count += 1;
+  }}>Clear history</ConfirmButton
+>
+<p>Cleared {count} time</p>

package/src/shared/forms/confirm-button/index.ts

@@ -0,0 +1 @@
+export { default as ConfirmButton } from "./ConfirmButton.svelte";

package/src/shared/forms/confirm-dialog/ConfirmDialog.css

@@ -0,0 +1,21 @@
+[data-ui-confirm-dialog][data-ui-part="alert-dialog-content"] {
+  width: min(28rem, calc(100vw - 2rem));
+  max-width: 28rem;
+  max-height: calc(100dvh - 2rem);
+  overflow: auto;
+  font-family: var(--font-sans, sans-serif);
+  font-size: var(--ui-dialog-frame-font-size, 0.875rem);
+}
+[data-ui-confirm-dialog] [data-slot="alert-dialog-title"] {
+  font-size: var(--ui-dialog-frame-title-size, 1.125rem);
+}
+[data-ui-confirm-dialog] [data-slot="alert-dialog-footer"] {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  gap: 0.5rem;
+}
+[data-ui-confirm-dialog] [role="alert"] {
+  color: var(--destructive);
+  margin: 0;
+}

package/src/shared/forms/confirm-dialog/ConfirmDialog.svelte

@@ -0,0 +1,116 @@
+<script lang="ts" module>
+  import type { ComponentProps, Snippet } from "svelte";
+  import type * as AlertDialogTypes from "../../shadcn/alert-dialog/index.js";
+  export interface ConfirmDialogProps {
+    open?: boolean;
+    title: string | Snippet;
+    description: string | Snippet;
+    confirmLabel?: string | Snippet;
+    children?: Snippet;
+    confirmDisabled?: boolean;
+    cancelLabel?: string;
+    destructive?: boolean;
+    pending?: boolean;
+    error?: string;
+    /** Resolve false to retain an externally reported validation error. Reject to show a retryable error. */
+    onConfirm: () => void | boolean | Promise<void | boolean>;
+    onCancel?: () => void;
+    onOpenChange?: (open: boolean) => void;
+    onCloseAutoFocus?: ComponentProps<
+      typeof AlertDialogTypes.Content
+    >["onCloseAutoFocus"];
+    portalProps?: ComponentProps<
+      typeof AlertDialogTypes.Content
+    >["portalProps"];
+  }
+</script>
+
+<script lang="ts">
+  import * as AlertDialog from "../../shadcn/alert-dialog/index.js";
+  import { Button } from "../../shadcn/button/index.js";
+  import "./ConfirmDialog.css";
+  let {
+    open = $bindable(false),
+    title,
+    description,
+    confirmLabel = "Confirm",
+    cancelLabel = "Cancel",
+    children,
+    confirmDisabled = false,
+    destructive = false,
+    pending = false,
+    error = "",
+    onConfirm,
+    onCancel,
+    onOpenChange,
+    onCloseAutoFocus,
+    portalProps,
+  }: ConfirmDialogProps = $props();
+  let submitting = $state(false);
+  let failure = $state("");
+  const busy = $derived(pending || submitting);
+  $effect(() => {
+    if (!open) failure = "";
+  });
+  function changeOpen(next: boolean) {
+    if (busy) return;
+    open = next;
+    onOpenChange?.(next);
+    if (!next) onCancel?.();
+  }
+  async function confirm() {
+    if (busy) return;
+    submitting = true;
+    failure = "";
+    try {
+      if ((await onConfirm()) !== false) {
+        open = false;
+        onOpenChange?.(false);
+      }
+    } catch (cause) {
+      failure =
+        cause instanceof Error
+          ? cause.message
+          : "The action failed. Please try again.";
+    } finally {
+      submitting = false;
+    }
+  }
+</script>
+
+<AlertDialog.Root {open} onOpenChange={changeOpen}>
+  <AlertDialog.Content
+    data-ui-confirm-dialog=""
+    {...portalProps === undefined ? {} : { portalProps }}
+    {...onCloseAutoFocus === undefined ? {} : { onCloseAutoFocus }}
+    onEscapeKeydown={(event) => {
+      if (busy) event.preventDefault();
+    }}
+  >
+    <AlertDialog.Header>
+      <AlertDialog.Title
+        >{#if typeof title === "string"}{title}{:else}{@render title()}{/if}</AlertDialog.Title
+      >
+      <AlertDialog.Description
+        >{#if typeof description === "string"}{description}{:else}{@render description()}{/if}</AlertDialog.Description
+      >
+    </AlertDialog.Header>
+    {@render children?.()}
+    {#if failure || error}<p role="alert">{failure || error}</p>{/if}
+    <AlertDialog.Footer>
+      <Button
+        variant="outline"
+        disabled={busy}
+        onclick={() => changeOpen(false)}
+        autofocus>{cancelLabel}</Button
+      >
+      <Button
+        variant={destructive ? "destructive" : "default"}
+        disabled={busy || confirmDisabled}
+        aria-busy={busy}
+        onclick={confirm}
+        >{#if busy}Working…{:else if typeof confirmLabel === "string"}{confirmLabel}{:else}{@render confirmLabel()}{/if}</Button
+      >
+    </AlertDialog.Footer>
+  </AlertDialog.Content>
+</AlertDialog.Root>

package/src/shared/forms/confirm-dialog/ConfirmDialogExample.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { ConfirmDialog } from "@lapismd/design-core/forms/dialog";
+  let open = $state(true);
+  let removed = $state(false);
+</script>
+
+<ConfirmDialog
+  bind:open
+  title="Remove record?"
+  description="Remove the selected record."
+  confirmLabel="Remove"
+  destructive
+  onConfirm={async () => {
+    removed = true;
+  }}
+/>
+<p>{removed ? "Removed" : "Available"}</p>

package/src/shared/forms/confirm-dialog/index.ts

@@ -0,0 +1,2 @@
+export { default as ConfirmDialog } from "./ConfirmDialog.svelte";
+export type { ConfirmDialogProps } from "./ConfirmDialog.svelte";

package/src/shared/forms/dialog-frame/DialogFrame.css

@@ -0,0 +1,130 @@
+[data-ui-dialog-frame][data-ui-part="dialog-content"] {
+  --ui-dialog-frame-width: 40rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  width: min(var(--ui-dialog-frame-width), calc(100vw - 2rem));
+  max-width: calc(100vw - 2rem);
+  max-height: calc(100dvh - 2rem);
+  padding: 0;
+  overflow: hidden;
+  font-family: var(--font-sans, sans-serif);
+  font-size: var(--ui-dialog-frame-font-size, 0.875rem);
+  line-height: 1.5;
+}
+[data-ui-dialog-frame][data-frame-size="compact"] {
+  --ui-dialog-frame-width: 28rem;
+}
+[data-ui-dialog-frame][data-frame-size="wide"] {
+  --ui-dialog-frame-width: 68rem;
+}
+[data-ui-dialog-frame][data-frame-size="large"] {
+  --ui-dialog-frame-width: 56rem;
+  max-height: min(42rem, calc(100dvh - 2rem));
+}
+[data-ui-dialog-frame][data-frame-surface="inset"] {
+  background: var(--muted);
+}
+[data-ui-dialog-frame] > [data-ui-part="dialog-frame-header"] {
+  display: flex;
+  align-items: flex-start;
+  gap: 1rem;
+  flex: none;
+  padding: 1.25rem 1.5rem;
+}
+[data-ui-dialog-frame] [data-ui-part="dialog-frame-heading"] {
+  flex: 1;
+  min-width: 0;
+  display: grid;
+  gap: 0.5rem;
+}
+[data-ui-dialog-frame] [data-slot="dialog-title"] {
+  font-size: var(--ui-dialog-frame-title-size, 1.125rem);
+  line-height: 1.4;
+  font-weight: 600;
+}
+[data-ui-dialog-frame] [data-ui-part="dialog-frame-close"] {
+  flex: none;
+}
+[data-ui-dialog-frame][data-frame-surface="inset"]
+  > [data-ui-part="dialog-frame-header"] {
+  background: var(--muted);
+}
+[data-ui-dialog-frame][data-frame-surface="inset"]
+  [data-ui-part="dialog-frame-close"]:is(:hover, :focus-visible) {
+  background: var(--background);
+  color: var(--foreground);
+}
+[data-ui-dialog-frame] [data-ui-part="dialog-frame-layout"] {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  min-width: 0;
+}
+[data-ui-dialog-frame] [data-ui-part="dialog-frame-sidebar"] {
+  flex: 0 0 10rem;
+  padding: 0.5rem 1rem 1rem;
+  background: var(--muted);
+}
+[data-ui-dialog-frame][data-frame-surface="inset"]
+  [data-ui-part="dialog-frame-sidebar"] {
+  flex-basis: 13rem;
+}
+[data-ui-dialog-frame] [data-ui-part="dialog-frame-main"] {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+}
+[data-ui-dialog-frame][data-frame-surface="inset"]
+  [data-ui-part="dialog-frame-main"] {
+  margin: 0 1rem 1rem 0;
+  border-radius: 1rem;
+  background: var(--background);
+  overflow: hidden;
+}
+[data-ui-dialog-frame] .ui-dialog-frame-scroll {
+  flex: 1;
+  min-height: 0;
+  min-width: 0;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+[data-ui-dialog-frame]
+  .ui-dialog-frame-scroll
+  > [data-ui-part="scroll-area-viewport"] {
+  flex: 1;
+  height: auto;
+  min-height: 0;
+}
+[data-ui-dialog-frame] [data-ui-part="dialog-frame-body"] {
+  padding: 0.5rem 1.5rem 1.5rem;
+}
+[data-ui-dialog-frame][data-frame-padding="none"]
+  [data-ui-part="dialog-frame-body"] {
+  padding: 0;
+}
+[data-ui-dialog-frame] [data-ui-part="dialog-frame-footer"] {
+  display: flex;
+  flex: none;
+  flex-direction: row;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  padding: 1rem 1.5rem;
+  background: var(--popover);
+}
+@media (max-width: 40rem) {
+  [data-ui-dialog-frame] [data-ui-part="dialog-frame-layout"] {
+    flex-direction: column;
+  }
+  [data-ui-dialog-frame] [data-ui-part="dialog-frame-sidebar"] {
+    flex: none;
+  }
+  [data-ui-dialog-frame][data-frame-surface="inset"]
+    [data-ui-part="dialog-frame-main"] {
+    margin-left: 1rem;
+  }
+}

package/src/shared/forms/dialog-frame/DialogFrame.svelte

@@ -0,0 +1,108 @@
+<script lang="ts" module>
+  import type { ComponentProps, Snippet } from "svelte";
+  import type * as DialogTypes from "../../shadcn/dialog/index.js";
+
+  export type DialogFrameSize = "compact" | "form" | "large" | "wide";
+  export type DialogFrameSurface = "plain" | "inset";
+  export type DialogFrameProps = Omit<
+    ComponentProps<typeof DialogTypes.Content>,
+    "children" | "title" | "showCloseButton" | "dataUiComponent" | "dataUiPart"
+  > & {
+    title: string | Snippet;
+    description?: string | Snippet;
+    descriptionHidden?: boolean;
+    size?: DialogFrameSize;
+    /** Visual treatment for the dialog shell and main content surface. */
+    surface?: DialogFrameSurface;
+    busy?: boolean;
+    closeLabel?: string;
+    sidebar?: Snippet;
+    headerActions?: Snippet;
+    footer?: Snippet;
+    children: Snippet;
+    bodyPadding?: "default" | "none";
+  };
+</script>
+
+<script lang="ts">
+  import * as Dialog from "../../shadcn/dialog/index.js";
+  import { Button } from "../../shadcn/button/index.js";
+  import { ScrollArea } from "../../shadcn/scroll-area/index.js";
+  import XIcon from "@lucide/svelte/icons/x";
+  import "./DialogFrame.css";
+
+  let {
+    title,
+    description,
+    descriptionHidden = false,
+    size = "form",
+    surface = "plain",
+    busy = false,
+    closeLabel = "Close",
+    sidebar,
+    headerActions,
+    footer,
+    children,
+    bodyPadding = "default",
+    ref = $bindable(null),
+    onInteractOutside,
+    onEscapeKeydown,
+    ...contentProps
+  }: DialogFrameProps = $props();
+</script>
+
+<Dialog.Content
+  {...contentProps}
+  bind:ref
+  showCloseButton={false}
+  data-ui-dialog-frame=""
+  data-frame-size={size}
+  data-frame-surface={surface}
+  data-frame-padding={bodyPadding}
+  onInteractOutside={(event) => {
+    if (busy) event.preventDefault();
+    else onInteractOutside?.(event);
+  }}
+  onEscapeKeydown={(event) => {
+    if (busy) event.preventDefault();
+    else onEscapeKeydown?.(event);
+  }}
+>
+  <div data-ui-part="dialog-frame-header">
+    <div data-ui-part="dialog-frame-heading">
+      <Dialog.Title
+        >{#if typeof title === "string"}{title}{:else}{@render title()}{/if}</Dialog.Title
+      >
+      {#if description}<Dialog.Description
+          class={descriptionHidden ? "sr-only" : undefined}
+          >{#if typeof description === "string"}{description}{:else}{@render description()}{/if}</Dialog.Description
+        >{/if}
+    </div>
+    {@render headerActions?.()}
+    <Dialog.Close>
+      {#snippet child({ props })}
+        <Button
+          {...props}
+          variant="ghost"
+          size="icon-sm"
+          disabled={busy}
+          aria-label={closeLabel}
+          data-ui-part="dialog-frame-close"><XIcon aria-hidden="true" /></Button
+        >
+      {/snippet}
+    </Dialog.Close>
+  </div>
+  <div data-ui-part="dialog-frame-layout" data-has-sidebar={Boolean(sidebar)}>
+    {#if sidebar}<aside data-ui-part="dialog-frame-sidebar">
+        {@render sidebar()}
+      </aside>{/if}
+    <div data-ui-part="dialog-frame-main">
+      <ScrollArea class="ui-dialog-frame-scroll" type="always">
+        <div data-ui-part="dialog-frame-body">{@render children()}</div>
+      </ScrollArea>
+      {#if footer}<Dialog.Footer data-ui-part="dialog-frame-footer"
+          >{@render footer()}</Dialog.Footer
+        >{/if}
+    </div>
+  </div>
+</Dialog.Content>

package/src/shared/forms/dialog-frame/DialogFrameExample.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+  import { DialogFrame } from "@lapismd/design-core/forms/dialog";
+  import * as Dialog from "@lapismd/design-core/shadcn/dialog";
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import { Input } from "@lapismd/design-core/shadcn/input";
+  let open = $state(false);
+  let name = $state("");
+</script>
+
+<Dialog.Root bind:open>
+  <Dialog.Trigger
+    >{#snippet child({ props })}<Button {...props}>Edit record</Button
+      >{/snippet}</Dialog.Trigger
+  >
+  <DialogFrame
+    title="Edit record"
+    description={name
+      ? `Editing ${name}`
+      : "The form scrolls while its actions remain visible."}
+    size="large"
+    surface="inset"
+    class={name ? "record-filled" : "record-empty"}
+  >
+    {#snippet sidebar()}<nav aria-label="Sections">
+        <Button variant="secondary">Details</Button>
+      </nav>{/snippet}
+    {#each Array.from({ length: 24 }) as _, index}<label
+        style="display: grid; gap: 0.5rem; margin-block: 1rem;"
+        >Field {index + 1}{#if index === 0}<Input
+            bind:value={name}
+          />{:else}<Input />{/if}</label
+      >{/each}
+    {#snippet footer()}<Button variant="outline" onclick={() => (open = false)}
+        >Cancel</Button
+      ><Button onclick={() => (open = false)}>Save</Button>{/snippet}
+  </DialogFrame>
+</Dialog.Root>

package/src/shared/forms/dialog-frame/index.ts

@@ -0,0 +1,6 @@
+export { default as DialogFrame } from "./DialogFrame.svelte";
+export type {
+  DialogFrameProps,
+  DialogFrameSize,
+  DialogFrameSurface,
+} from "./DialogFrame.svelte";

package/src/shared/forms/dialog.ts

@@ -0,0 +1,8 @@
+export { DialogFrame } from "./dialog-frame/index.js";
+export type {
+  DialogFrameProps,
+  DialogFrameSize,
+} from "./dialog-frame/index.js";
+export { ConfirmDialog } from "./confirm-dialog/index.js";
+export type { ConfirmDialogProps } from "./confirm-dialog/index.js";
+export { ConfirmButton } from "./confirm-button/index.js";

package/src/shared/forms/index.ts

@@ -129,3 +129,14 @@ export {
 export type { InlineOptionPickerOption } from "./inline-option-picker/InlineOptionPicker.svelte";
 export type { AddSectionOption } from "./add-section-chooser/AddSectionChooser.svelte";
 export * from "./core/core";
+
+export {
+  DialogFrame,
+  type DialogFrameProps,
+  type DialogFrameSize,
+} from "./dialog-frame/index.js";
+export {
+  ConfirmDialog,
+  type ConfirmDialogProps,
+} from "./confirm-dialog/index.js";
+export { ConfirmButton } from "./confirm-button/index.js";

package/src/shared/shadcn/button/button.svelte

@@ -276,6 +276,7 @@
         }
         [data-ui-component="button"][data-variant="outline"]:hover,
         [data-ui-component="button"][data-variant="ghost"]:hover {
+          background-color: var(--accent);
           color: var(--foreground);
         }
         [data-ui-component="button"][data-variant="link"]:hover {
@@ -294,6 +295,9 @@
           );
         }
       }
+      [data-ui-component="button"][data-variant="ghost"]:focus-visible {
+        background-color: var(--accent);
+      }
       [data-ui-component="button"]:focus-visible {
         border-color: var(--ui-button-focus-ring-color, var(--ring));
       }

package/src/shared/shadcn/code-block/highlightRanges.ts

@@ -179,8 +179,9 @@ function applyRangesToContainer(
   for (let i = 0; i < lineDivs.length; i++) {
     const tokenIndex = globalLineOffset + i;
     const tokens = tokenLines[tokenIndex];
-    if (tokens && tokens.length > 0) {
-      applyLineRanges(lineDivs[i], tokens, results, resolve);
+    const lineDiv = lineDivs[i];
+    if (lineDiv && tokens && tokens.length > 0) {
+      applyLineRanges(lineDiv, tokens, results, resolve);
     }
   }
   return results;
@@ -216,6 +217,7 @@ export function applyHighlightRangesChunked(
 
   for (let i = 0; i < codeEl.children.length; i++) {
     const child = codeEl.children[i];
+    if (!child) continue;
     const lineDivs = child.querySelectorAll("[data-line]");
     if (
       lineDivs.length > 0 &&
@@ -235,8 +237,9 @@ export function applyHighlightRangesChunked(
     const lineDivs = codeEl.querySelectorAll("[data-line]");
     for (let i = 0; i < lineDivs.length; i++) {
       const tokens = tokenLines[i];
-      if (tokens && tokens.length > 0) {
-        applyLineRanges(lineDivs[i], tokens, allRanges, resolve);
+      const lineDiv = lineDivs[i];
+      if (lineDiv && tokens && tokens.length > 0) {
+        applyLineRanges(lineDiv, tokens, allRanges, resolve);
       }
     }
     return () => cleanupRanges(allRanges);
@@ -253,7 +256,7 @@ export function applyHighlightRangesChunked(
     const ranges = applyRangesToContainer(
       wrapper,
       tokenLines,
-      chunkLineOffsets[index],
+      chunkLineOffsets[index] ?? 0,
       resolve,
     );
     chunkRanges.set(wrapper, ranges);
@@ -269,6 +272,7 @@ export function applyHighlightRangesChunked(
 
   for (let i = 0; i < chunkWrappers.length; i++) {
     const wrapper = chunkWrappers[i];
+    if (!wrapper) continue;
 
     const handler = (e: Event) => {
       // contentvisibilityautostatechange fires with .skipped = true when
@@ -347,7 +351,7 @@ export function applyHighlightRangesBatch(
 
     const lineDiv = lineDivs[divIndex];
     const tokens = tokenLines[i];
-    if (tokens && tokens.length > 0) {
+    if (lineDiv && tokens && tokens.length > 0) {
       applyLineRanges(lineDiv, tokens, results, resolve);
     }
   }

package/src/shared/shadcn/code-block/syntax/defineSyntaxTheme.ts

@@ -60,11 +60,13 @@ export function resolveSyntaxTokenForMode(
   mode: "light" | "dark",
 ): string {
   if (Array.isArray(value)) {
-    return mode === "dark" ? value[1] : value[0];
+    return (mode === "dark" ? value[1] : value[0]) ?? "";
   }
   const match = value.match(/^light-dark\(([^,]+),([^)]+)\)$/);
   if (match) {
-    return mode === "dark" ? match[2].trim() : match[1].trim();
+    return mode === "dark"
+      ? (match[2]?.trim() ?? "")
+      : (match[1]?.trim() ?? "");
   }
   return value;
 }

package/src/shared/shadcn/code-block/tokenizer.ts

@@ -517,13 +517,13 @@ export function flatTokensToLines(
   for (const token of tokens) {
     while (
       lineIdx < lineStarts.length - 1 &&
-      token.start >= lineStarts[lineIdx + 1]
+      token.start >= (lineStarts[lineIdx + 1] ?? Number.POSITIVE_INFINITY)
     ) {
       lineIdx++;
     }
 
-    const lineStart = lineStarts[lineIdx];
-    result[lineIdx].push({
+    const lineStart = lineStarts[lineIdx] ?? 0;
+    result[lineIdx]?.push({
       type: token.type,
       start: token.start - lineStart,
       end: token.end - lineStart,

package/src/shared/shadcn/command/command-dialog.svelte

@@ -41,7 +41,7 @@
     data-slot="command-content"
     class={className}
     {showCloseButton}
-    {portalProps}
+    {...portalProps === undefined ? {} : { portalProps }}
   >
     <Command {...restProps} bind:value bind:ref {children} />
   </Dialog.Content>

package/src/shared/shadcn/command/command-group.svelte

@@ -31,5 +31,7 @@
       {heading}
     </CommandPrimitive.GroupHeading>
   {/if}
-  <CommandPrimitive.GroupItems {children} />
+  <CommandPrimitive.GroupItems>
+    {#if children}{@render children()}{/if}
+  </CommandPrimitive.GroupItems>
 </CommandPrimitive.Group>

package/src/shared/shadcn/command-view/command-view.svelte

@@ -19,12 +19,7 @@
   data-slot="command-view"
   class={className}
 >
-  <Command.Root
-    bind:value
-    bind:ref
-    {shouldFilter}
-    {...restProps}
-  >
+  <Command.Root bind:value bind:ref {shouldFilter} {...restProps}>
     {@render children?.()}
   </Command.Root>
 </div>