@lapismd/design-core 0.3.0 → 0.3.1

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @lapismd/design-core
 
+## 0.3.1
+
+### Patch Changes
+
+- [#16](https://github.com/lapismd/design-core/pull/16) [`f94fb98`](https://github.com/lapismd/design-core/commit/f94fb9852f6c3e54ea57f89c2f185b6f00c68e35) Thanks [@stevejuma](https://github.com/stevejuma)! - Release the Composer Input handle correctly through reactive consumer bindings during teardown while preserving replacement handles. Keep Svelte runtime diagnostics fatal even when component cleanup catches the immediate error.
+
+- [#13](https://github.com/lapismd/design-core/pull/13) [`5f533e6`](https://github.com/lapismd/design-core/commit/5f533e656601015b5a5dd3a680f5e97fd13cd1d2) Thanks [@stevejuma](https://github.com/stevejuma)! - Preserve emoji-grid keyboard focus when delayed popover opening frames complete.
+
+- [#15](https://github.com/lapismd/design-core/pull/15) [`02756cb`](https://github.com/lapismd/design-core/commit/02756cb32a5405db45cb47cae9e28d448d20651f) Thanks [@stevejuma](https://github.com/stevejuma)! - Require Bits UI 2.19.5 to prevent Scroll Area resize callbacks and text-selection pointer handlers from reading destroyed Svelte state. Make Svelte runtime diagnostics fatal in Storybook tests and preserve the editing Dialog Frame example's initial field focus.
+
 ## 0.3.0
 
 ### Minor Changes

package/dist/shared/ai/composer-input/ComposerInput.svelte

@@ -5,6 +5,7 @@
 <script lang="ts">
   import * as Command from "@lapismd/design-core/shadcn/command";
   import type { HTMLAttributes } from "svelte/elements";
+  import { untrack } from "svelte";
   import {
     createComposerTokens,
     createPasteAsToken,
@@ -149,12 +150,15 @@
 
   $effect(() => {
     handle = inputHandle;
+    // A consumer's binding may proxy the plain handle. Retain the identity
+    // returned by that binding without making it an effect dependency.
+    const assignedHandle = untrack(() => handle);
     context?.setInputHandle(inputHandle);
     return () => {
       triggerSearch.cancel();
       tokens.cleanup();
       context?.setInputHandle(null);
-      if (handle === inputHandle) handle = null;
+      if (handle === assignedHandle) handle = null;
     };
   });
 

package/dist/shared/ai/experimental/emoji-picker/EmojiPicker.svelte

@@ -55,6 +55,7 @@
   } = $props();
 
   let query = $state("");
+  let searchRef = $state<HTMLInputElement | null>(null);
   let gridRef = $state<HTMLDivElement | null>(null);
 
   const visible = $derived.by(() => {
@@ -77,6 +78,12 @@
     setOpen(false);
   }
 
+  function focusSearchOnOpen(event: Event): void {
+    // Own initial focus so a deferred popover callback cannot undo navigation.
+    event.preventDefault();
+    searchRef?.focus();
+  }
+
   function gridButtons(): HTMLButtonElement[] {
     const root = gridRef ?? ref;
     return Array.from(
@@ -155,9 +162,11 @@
       align="start"
       aria-label={label}
       data-ai-chat-part="emoji-content"
+      onOpenAutoFocus={focusSearchOnOpen}
     >
       <div bind:this={ref} {...restProps} data-ui-part="emoji-panel">
         <Input
+          bind:ref={searchRef}
           bind:value={query}
           aria-label={searchLabel}
           placeholder={searchLabel}

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

@@ -5,6 +5,7 @@
   import { Input } from "@lapismd/design-core/shadcn/input";
   let open = $state(false);
   let name = $state("");
+  let firstField = $state<HTMLInputElement | null>(null);
 </script>
 
 <Dialog.Root bind:open>
@@ -20,6 +21,11 @@
     size="large"
     surface="inset"
     class={name ? "record-filled" : "record-empty"}
+    onOpenAutoFocus={(event) => {
+      if (!firstField) return;
+      firstField.focus();
+      event.preventDefault();
+    }}
   >
     {#snippet sidebar()}<nav aria-label="Sections">
         <Button variant="secondary">Details</Button>
@@ -27,6 +33,7 @@
     {#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:ref={firstField}
             bind:value={name}
           />{:else}<Input />{/if}</label
       >{/each}

package/dist/shared/shadcn/scroll-area/ScrollAreaStyledLifecycleFixture.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import { Button } from "../button/index.js";
+  import { ScrollArea } from "./index.js";
+
+  let { type = "always" }: { type?: "always" | "auto" } = $props();
+  let mounted = $state(false);
+  let clicks = $state(0);
+</script>
+
+<Button onclick={() => (mounted = !mounted)}>Toggle styled viewport</Button>
+<Button onclick={() => clicks++}>Remaining control</Button>
+<p role="status">Remaining clicks: {clicks}</p>
+{#if mounted}
+  <ScrollArea
+    aria-label="Styled lifecycle"
+    {type}
+    orientation="both"
+    scrollStrategy="styled"
+    class="styled-lifecycle-area"
+  >
+    <div class="styled-lifecycle-content">
+      {#each Array.from({ length: 40 }) as _, index}
+        <p>Entry {index + 1}</p>
+      {/each}
+    </div>
+  </ScrollArea>
+{/if}
+
+<style>
+  :global(.styled-lifecycle-area) {
+    height: 10rem;
+    width: 16rem;
+  }
+
+  .styled-lifecycle-content {
+    width: 30rem;
+  }
+</style>

package/dist/shared/shadcn/scroll-area/ScrollAreaStyledLifecycleFixture.svelte.d.ts

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    type?: "always" | "auto";
+};
+declare const ScrollAreaStyledLifecycleFixture: import("svelte").Component<$$ComponentProps, {}, "">;
+type ScrollAreaStyledLifecycleFixture = ReturnType<typeof ScrollAreaStyledLifecycleFixture>;
+export default ScrollAreaStyledLifecycleFixture;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lapismd/design-core",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Shared Lapis design system, forms, shell, and workspace primitives",
   "license": "Apache-2.0",
   "repository": {
@@ -58,7 +58,7 @@
     "@lucide/svelte": "^1.21.0",
     "@tanstack/svelte-virtual": "^3.13.39",
     "@types/luxon": "^3.4.2",
-    "bits-ui": "^2.18.1",
+    "bits-ui": "^2.19.5",
     "chrono-node": "^2.10.1",
     "clsx": "^2.1.1",
     "codemirror-lang-mermaid": "^0.5.0",

package/src/shared/ai/composer-input/ComposerInput.svelte

@@ -5,6 +5,7 @@
 <script lang="ts">
   import * as Command from "@lapismd/design-core/shadcn/command";
   import type { HTMLAttributes } from "svelte/elements";
+  import { untrack } from "svelte";
   import {
     createComposerTokens,
     createPasteAsToken,
@@ -149,12 +150,15 @@
 
   $effect(() => {
     handle = inputHandle;
+    // A consumer's binding may proxy the plain handle. Retain the identity
+    // returned by that binding without making it an effect dependency.
+    const assignedHandle = untrack(() => handle);
     context?.setInputHandle(inputHandle);
     return () => {
       triggerSearch.cancel();
       tokens.cleanup();
       context?.setInputHandle(null);
-      if (handle === inputHandle) handle = null;
+      if (handle === assignedHandle) handle = null;
     };
   });
 

package/src/shared/ai/experimental/emoji-picker/EmojiPicker.svelte

@@ -55,6 +55,7 @@
   } = $props();
 
   let query = $state("");
+  let searchRef = $state<HTMLInputElement | null>(null);
   let gridRef = $state<HTMLDivElement | null>(null);
 
   const visible = $derived.by(() => {
@@ -77,6 +78,12 @@
     setOpen(false);
   }
 
+  function focusSearchOnOpen(event: Event): void {
+    // Own initial focus so a deferred popover callback cannot undo navigation.
+    event.preventDefault();
+    searchRef?.focus();
+  }
+
   function gridButtons(): HTMLButtonElement[] {
     const root = gridRef ?? ref;
     return Array.from(
@@ -155,9 +162,11 @@
       align="start"
       aria-label={label}
       data-ai-chat-part="emoji-content"
+      onOpenAutoFocus={focusSearchOnOpen}
     >
       <div bind:this={ref} {...restProps} data-ui-part="emoji-panel">
         <Input
+          bind:ref={searchRef}
           bind:value={query}
           aria-label={searchLabel}
           placeholder={searchLabel}

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

@@ -5,6 +5,7 @@
   import { Input } from "@lapismd/design-core/shadcn/input";
   let open = $state(false);
   let name = $state("");
+  let firstField = $state<HTMLInputElement | null>(null);
 </script>
 
 <Dialog.Root bind:open>
@@ -20,6 +21,11 @@
     size="large"
     surface="inset"
     class={name ? "record-filled" : "record-empty"}
+    onOpenAutoFocus={(event) => {
+      if (!firstField) return;
+      firstField.focus();
+      event.preventDefault();
+    }}
   >
     {#snippet sidebar()}<nav aria-label="Sections">
         <Button variant="secondary">Details</Button>
@@ -27,6 +33,7 @@
     {#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:ref={firstField}
             bind:value={name}
           />{:else}<Input />{/if}</label
       >{/each}

package/src/shared/shadcn/scroll-area/ScrollAreaStyledLifecycleFixture.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import { Button } from "../button/index.js";
+  import { ScrollArea } from "./index.js";
+
+  let { type = "always" }: { type?: "always" | "auto" } = $props();
+  let mounted = $state(false);
+  let clicks = $state(0);
+</script>
+
+<Button onclick={() => (mounted = !mounted)}>Toggle styled viewport</Button>
+<Button onclick={() => clicks++}>Remaining control</Button>
+<p role="status">Remaining clicks: {clicks}</p>
+{#if mounted}
+  <ScrollArea
+    aria-label="Styled lifecycle"
+    {type}
+    orientation="both"
+    scrollStrategy="styled"
+    class="styled-lifecycle-area"
+  >
+    <div class="styled-lifecycle-content">
+      {#each Array.from({ length: 40 }) as _, index}
+        <p>Entry {index + 1}</p>
+      {/each}
+    </div>
+  </ScrollArea>
+{/if}
+
+<style>
+  :global(.styled-lifecycle-area) {
+    height: 10rem;
+    width: 16rem;
+  }
+
+  .styled-lifecycle-content {
+    width: 30rem;
+  }
+</style>