@lapismd/design-core 0.1.0 → 0.1.2

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @lapismd/design-core
 
+## 0.1.2
+
+### Patch Changes
+
+- [#2](https://github.com/lapismd/design-core/pull/2) [`af3a0b3`](https://github.com/lapismd/design-core/commit/af3a0b3aaabd24be368acea795b150af8f4e5b89) Thanks [@stevejuma](https://github.com/stevejuma)! - Keep workspace menu close handling lifecycle-safe when an action callback destroys its owning view.
+
+- [#4](https://github.com/lapismd/design-core/pull/4) [`d153167`](https://github.com/lapismd/design-core/commit/d15316795ce7601a483796bce23f78bfc37188ae) Thanks [@stevejuma](https://github.com/stevejuma)! - Allow App Shell body content and body sidebar regions to configure scroll, hover, or always-on scrollbar visibility independently.
+
+- [#4](https://github.com/lapismd/design-core/pull/4) [`31c7a2c`](https://github.com/lapismd/design-core/commit/31c7a2cb438213d75a5ef3193e957cd7c35dc34f) Thanks [@stevejuma](https://github.com/stevejuma)! - Inset vertical and horizontal Scroll Area thumbs by one pixel from their outer edge.
+
+- [#4](https://github.com/lapismd/design-core/pull/4) [`24a6e98`](https://github.com/lapismd/design-core/commit/24a6e989354b9d00d2d93786e4255da088812ee9) Thanks [@stevejuma](https://github.com/stevejuma)! - Expose the canonical two-expanded-sidebars App Shell fixture, including bounded content extension points and an optional right-sidebar toggle, for downstream Storybook catalogs. Keep the focused Search Filter Bar source export compatible with strict consumers.
+
+- [#4](https://github.com/lapismd/design-core/pull/4) [`413139d`](https://github.com/lapismd/design-core/commit/413139d1269d5f939d20c1f00de45f151372eae0) Thanks [@stevejuma](https://github.com/stevejuma)! - Keep composed Shadcn, AI, and Filter source exports compatible with strict consumers that enable exact optional properties and unchecked indexed access.
+
+- [#4](https://github.com/lapismd/design-core/pull/4) [`61fa863`](https://github.com/lapismd/design-core/commit/61fa86315a840717c39f0a0701d8cb208a187cb2) Thanks [@stevejuma](https://github.com/stevejuma)! - Keep the public App Shell source compatible with consumers that enable exact optional-property semantics.
+
+## 0.1.1
+
+### Patch Changes
+
+- [`d1dc4a8`](https://github.com/lapismd/design-core/commit/d1dc4a8fb13eec9b59075712f964a89cee18a1a8) Thanks [@stevejuma](https://github.com/stevejuma)! - Allow custom settings pages to contribute dynamic search entries and reveal the selected row before Design Core scrolls to and highlights it.
+
 ## 0.1.0
 
 ### Initial public release

package/README.md

@@ -246,7 +246,7 @@ pnpm release:plan --registry https://registry.npmjs.org
 pnpm packages:pack
 ```
 
-The first public npm publication is a manual bootstrap from reviewed tarballs.
+`@lapismd/design-core@0.1.0` was manually bootstrapped from a reviewed tarball.
 Future releases use Changesets and the repository release workflow.
 
 ## Further reading

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lapismd/design-core",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Shared Lapis design system, forms, shell, and workspace primitives",
   "license": "AGPL-3.0-or-later",
   "repository": {
@@ -36,7 +36,6 @@
     "svelte": "^5.0.0"
   },
   "dependencies": {
-    "@lapismd/mira": "^0.0.1",
     "@codemirror/autocomplete": "^6.18.0",
     "@codemirror/commands": "^6.8.0",
     "@codemirror/lang-java": "^6.0.2",
@@ -54,16 +53,18 @@
     "@iconify-json/lucide": "^1.2.63",
     "@iconify/utils": "^2.3.0",
     "@internationalized/date": "^3.12.2",
+    "@lapismd/mira": "^0.0.1",
     "@lezer/common": "^1.2.3",
     "@lezer/highlight": "^1.2.3",
     "@lezer/lr": "^1.4.2",
     "@lucide/svelte": "^1.21.0",
+    "@types/luxon": "^3.4.2",
     "bits-ui": "^2.18.1",
     "chrono-node": "^2.10.1",
     "clsx": "^2.1.1",
     "codemirror-lang-mermaid": "^0.5.0",
     "luxon": "^3.5.0",
-    "minimatch": "^10.2.5",
+    "minimatch": "^10.2.6",
     "paneforge": "^1.0.2",
     "shadcn-svelte": "^1.3.0",
     "tailwind-merge": "^3.6.0",
@@ -90,11 +91,10 @@
     "@sveltejs/vite-plugin-svelte": "^5.0.3",
     "@tailwindcss/cli": "^4.3.3",
     "@tailwindcss/vite": "^4.3.0",
-    "@tobilu/qmd": "2.5.3",
     "@testing-library/jest-dom": "^7.0.0",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
-    "@types/luxon": "^3.4.2",
+    "@tobilu/qmd": "2.5.3",
     "@types/node": "^22.15.0",
     "@types/pixelmatch": "^5.2.6",
     "@types/pngjs": "^6.0.5",
@@ -107,11 +107,11 @@
     "highlight.js": "^11.11.1",
     "jsdom": "^29.1.1",
     "magic-string": "^1.0.0",
-    "markdownlint-cli2": "^0.22.1",
+    "markdownlint-cli2": "^0.23.2",
     "pixelmatch": "^7.2.0",
     "playwright": "^1.52.0",
     "pngjs": "^7.0.0",
-    "postcss": "^8.5.20",
+    "postcss": "^8.5.28",
     "postcss-selector-parser": "^7.1.4",
     "prettier": "3.3.3",
     "prettier-plugin-svelte": "^3.3.2",
@@ -174,6 +174,7 @@
     "./styles.css": "./src/styles.css",
     "./storybook.css": "./src/storybook.css",
     "./storybook/catalog-layout": "./src/storybook/catalog-layout.ts",
+    "./storybook/app-shell-reference": "./src/storybook/app-shell-reference/index.ts",
     "./themes/lapis.css": "./src/themes/lapis.css",
     "./ai": "./src/shared/ai/index.ts",
     "./ai/chat": "./src/shared/ai/chat.ts",
@@ -277,7 +278,10 @@
     "ui:visual:tag": "tsx scripts/ui-generator/cli.ts visual:tag",
     "test-unit": "pnpm test:unit",
     "test-storybook": "pnpm test:storybook",
-    "check": "pnpm spec:validate && svelte-check --tsconfig ./tsconfig.json --fail-on-warnings",
+    "check": "pnpm spec:validate && svelte-check --tsconfig ./tsconfig.json --fail-on-warnings && pnpm check:shell-consumer && pnpm check:filter-consumer && pnpm check:source-consumer",
+    "check:filter-consumer": "svelte-check --tsconfig ./tsconfig.filter-consumer.json --fail-on-warnings",
+    "check:shell-consumer": "svelte-check --tsconfig ./tsconfig.shell-consumer.json --fail-on-warnings",
+    "check:source-consumer": "svelte-check --tsconfig ./tsconfig.source-consumer.json --fail-on-warnings",
     "fmt": "prettier . --write",
     "fmt:check": "prettier . --check",
     "check:no-tailwind": "tsx scripts/check-no-tailwind-utilities.ts",

package/spec/src/styling-and-themes.md

@@ -107,15 +107,15 @@ pages.
 
 ### Token layers
 
-| Layer               | Prefix                         | Defaults                                    |
-| ------------------- | ------------------------------ | ------------------------------------------- |
-| Theme               | `--background`, `--primary`, … | `src/theme.css`                             |
-| Shadcn family       | `--ui-<family>-*`              | `<family>.tokens.css`                       |
-| Forms               | `--ui-form-*`                  | `src/shared/forms/form.tokens.css`          |
-| Filter and AI       | `--ui-*` / `--ui-ai-*`         | colocated CSS and token maps                |
-| Diff                | `--ui-diff-*`                  | `src/shared/diff/diff.tokens.css`           |
-| Structural shell    | `--ui-shell-*`                 | `src/shared/shell/shell.tokens.css`         |
-| Workspace framework | `--ui-workspace-*`             | `src/shared/workspace/workspace.tokens.css` |
+| Layer               | Prefix                         | Defaults                                          |
+| ------------------- | ------------------------------ | ------------------------------------------------- |
+| Theme               | `--background`, `--primary`, … | `src/theme.css`                                   |
+| Shadcn family       | `--ui-<family>-*`              | `<family>.tokens.css`                             |
+| Forms               | `--ui-form-*`                  | `src/shared/forms/form.tokens.css`                |
+| Filter and AI       | `--ui-*` / `--ui-ai-*`         | colocated CSS and token maps                      |
+| Diff                | `--ui-diff-*`                  | `src/shared/diff/diff.tokens.css`                 |
+| Structural shell    | `--ui-shell-*`                 | `src/shared/shell/shell.tokens.css`               |
+| Workspace framework | `--ui-workspace-*`             | `src/shared/workspace/workspace.tokens.css`       |
 | Desktop drag        | `data-desktop-drag-region`     | `src/shared/workspace/workspace-desktop-drag.css` |
 
 Set public tokens on `:root` or an appropriate shared ancestor such as

package/src/shared/ai/chat.css

@@ -1031,7 +1031,8 @@
 
 [data-ui-component="ai-chat-composer-drawer"]
   [data-ai-chat-part="drawer-content"]
-  [data-ui-part="attachment-remove"] svg {
+  [data-ui-part="attachment-remove"]
+  svg {
   width: 0.75rem;
   height: 0.75rem;
 }

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

@@ -331,9 +331,10 @@
           Math.max(1, searchState.items.length);
         return;
       }
-      if (event.key === "Enter" && searchState.items[highlightedIndex]) {
+      const highlightedItem = searchState.items[highlightedIndex];
+      if (event.key === "Enter" && highlightedItem) {
         event.preventDefault();
-        insertTriggerSelection(searchState.items[highlightedIndex]);
+        insertTriggerSelection(highlightedItem);
         return;
       }
       if (event.key === "Escape") {

package/src/shared/ai/experimental/reaction-bar/ReactionBar.svelte

@@ -74,7 +74,7 @@
     {/each}
     {#if onAdd}
       <EmojiPicker
-        {emojis}
+        {...emojis === undefined ? {} : { emojis }}
         label={addLabel}
         triggerLabel={addLabel}
         onSelect={onAdd}

package/src/shared/ai/tool-calls/ToolCalls.svelte

@@ -141,7 +141,7 @@
   >
     {#if !hasMultipleCalls}
       <ul data-ui-part="call-list" data-single-call>
-        {@render callRow(calls[0], 0)}
+        {@render callRow(calls[0]!, 0)}
       </ul>
     {:else}
       <Collapsible.Root open={expanded} onOpenChange={setExpanded}>

package/src/shared/ai/trigger-menu.ts

@@ -40,9 +40,8 @@ export function nearestClipBottom(
   let bottom = viewportHeight;
   let current = element?.parentElement ?? null;
   while (current) {
-    const overflowY = current.ownerDocument.defaultView
-      ?.getComputedStyle(current)
-      .overflowY;
+    const overflowY =
+      current.ownerDocument.defaultView?.getComputedStyle(current).overflowY;
     if (overflowY && CLIPPING_OVERFLOW.has(overflowY)) {
       bottom = Math.min(bottom, current.getBoundingClientRect().bottom);
     }

package/src/shared/diff/file-diff/FileDiff.svelte

@@ -107,10 +107,7 @@
           if (candidate.scrollTop !== target.scrollTop) {
             candidate.scrollTop = target.scrollTop;
           }
-          if (
-            syncHorizontal &&
-            candidate.scrollLeft !== target.scrollLeft
-          ) {
+          if (syncHorizontal && candidate.scrollLeft !== target.scrollLeft) {
             candidate.scrollLeft = target.scrollLeft;
           }
         }
@@ -214,10 +211,10 @@
 {/snippet}
 
 {#snippet splitCell(
-    row: UnifiedDiffRow | null,
-    side: "left" | "right",
-    pairKey: string,
-  )}
+  row: UnifiedDiffRow | null,
+  side: "left" | "right",
+  pairKey: string,
+)}
   {#if row}
     <div
       class="ui-diff-file-diff__row"

package/src/shared/diff/file-listing/FileListingViewModeToggle.css

@@ -1,14 +1,51 @@
 @import "../diff.tokens.css";
 
-[data-ui-component="file-listing-view-mode-toggle"] svg {
-  width: 0.875rem;
-  height: 0.875rem;
+[data-ui-component="file-listing-view-mode-toggle"][data-ui-part="toggle-group"] {
+  display: inline-flex;
+  align-items: stretch;
+  width: fit-content;
+  height: 1.375rem;
+  gap: 0;
+  overflow: hidden;
+  border: 1px solid var(--ui-diff-border, var(--border, #d4d4d4));
+  border-radius: calc(var(--radius, 0.5rem) * 0.6);
+  background: var(--ui-diff-surface, var(--background, #fff));
+  box-shadow: none;
 }
 
 [data-ui-component="file-listing-view-mode-toggle"]
-  [data-ui-part="toggle-group-item"][data-state="on"],
+  [data-ui-component="toggle-group"][data-ui-part="toggle-group-item"][data-size="sm"],
 [data-ui-component="file-listing-view-mode-toggle"]
-  [data-ui-part="toggle-group-item"][data-state="on"]:hover {
+  [data-ui-component="toggle-group"][data-ui-part="toggle-group-item"][data-variant="outline"] {
+  box-sizing: border-box;
+  height: 100%;
+  min-height: 0;
+  width: 1.375rem;
+  min-width: 1.375rem;
+  padding: 0;
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+  background-color: transparent;
+}
+
+[data-ui-component="file-listing-view-mode-toggle"]
+  [data-ui-component="toggle-group"][data-ui-part="toggle-group-item"]
+  + [data-ui-component="toggle-group"][data-ui-part="toggle-group-item"] {
+  border-left: 1px solid var(--ui-diff-border, var(--border, #d4d4d4));
+}
+
+[data-ui-component="file-listing-view-mode-toggle"]
+  [data-ui-component="toggle-group"][data-ui-part="toggle-group-item"]
+  svg {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+
+[data-ui-component="file-listing-view-mode-toggle"]
+  [data-ui-component="toggle-group"][data-ui-part="toggle-group-item"][data-state="on"],
+[data-ui-component="file-listing-view-mode-toggle"]
+  [data-ui-component="toggle-group"][data-ui-part="toggle-group-item"][data-state="on"]:hover {
   background-color: var(--ui-diff-selected);
   color: inherit;
 }

package/src/shared/diff/merge-editor/MergeEditor.svelte

@@ -187,9 +187,7 @@
       const viewport = view.querySelector<HTMLElement>(
         "[data-ui-part='scroll-area-viewport']",
       );
-      return viewport
-        ? [{ side: view.dataset.mergeSide, viewport }]
-        : [];
+      return viewport ? [{ side: view.dataset.mergeSide, viewport }] : [];
     });
     if (targets.length === 0) return;
     let syncing = false;
@@ -202,10 +200,7 @@
           if (candidate.viewport.scrollTop !== target.viewport.scrollTop) {
             candidate.viewport.scrollTop = target.viewport.scrollTop;
           }
-          if (
-            !syncAcross &&
-            candidate.side !== target.side
-          ) {
+          if (!syncAcross && candidate.side !== target.side) {
             continue;
           }
           if (candidate.viewport.scrollLeft !== target.viewport.scrollLeft) {

package/src/shared/filter/filter-query/filters.ts

@@ -350,14 +350,14 @@ export class BooleanFilter extends Filter {
     const size = this.args.length;
     if (this.op == FilterType.NOT) {
       if (size == 1) {
-        return `-${this.args[0]}`;
+        return `-${this.args[0]!}`;
       }
       return `-(${this.args.map((it) => it.toString()).join("")})`;
     }
 
     const separator = this.op === FilterType.AND ? " " : ",";
     return size == 1
-      ? this.args[0].toString()
+      ? this.args[0]!.toString()
       : `(${this.args.map((it) => it.toString()).join(separator)})`;
   }
 

package/src/shared/filter/filter-query/parser.ts

@@ -310,13 +310,14 @@ export class DateExpression {
 
   resolve(): DateExpressionInput | DateRange {
     if (this.#operands.length == 1) {
-      if (this.#operands[0] instanceof DateExpression) {
-        return this.#operands[0].resolve();
+      const operand = this.#operands[0]!;
+      if (operand instanceof DateExpression) {
+        return operand.resolve();
       } else {
-        return this.#operands[0];
+        return operand;
       }
     }
-    return this.eval(this.#operands[0], this.#operands[1]);
+    return this.eval(this.#operands[0]!, this.#operands[1]!);
   }
 
   private eval(left: DateExpressionInput, right: DateExpressionInput) {
@@ -510,9 +511,9 @@ export class Parser {
     }, this.leave.bind(this));
 
     if (this.stack.length == 1) {
-      const filter = this.stack[0];
+      const filter = this.stack[0]!;
       if (filter instanceof BooleanFilter) {
-        this.predicate = filter.args.length == 1 ? filter.args[0] : filter;
+        this.predicate = filter.args.length == 1 ? filter.args[0]! : filter;
       } else {
         this.errors.push(
           `Expected {${filter}} to be instance of BooleanFilter`,
@@ -658,7 +659,7 @@ export class Parser {
       return new NumberFilter(this.content(node));
     } else if (node.name === "Regex") {
       const value = this.content(node).match(/\/(.+)\/([a-z]+)?/) || [];
-      return new PatternFilter(new RegExp(value[1], value[2] ?? ""));
+      return new PatternFilter(new RegExp(value[1] ?? "", value[2] ?? ""));
     } else if (node.name === "AccountName") {
       return new AccountFilter(this.content(node));
     }
@@ -704,7 +705,7 @@ export class Parser {
   private dateExpression(node: SyntaxNode | null | undefined) {
     return dateExpression(node, {
       content: this.content.bind(this),
-      now: this.options.now,
+      ...(this.options.now === undefined ? {} : { now: this.options.now }),
     });
   }
 }

package/src/shared/filter/power-search/PowerSearch.svelte

@@ -207,7 +207,7 @@
         {disabled}
         ariaLabel="Add filter field"
         onSelectField={openAddForField}
-        onCommitText={contentSearchFieldKey ? handleCommitText : undefined}
+        {...contentSearchFieldKey ? { onCommitText: handleCommitText } : {}}
       />
     </div>
 

package/src/shared/filter/search-filter-bar/SearchFilterBar.svelte

@@ -112,12 +112,12 @@
       {ariaLabel}
       shortcut={!showFilterToggle || filtersExpanded ? shortcut : ""}
       {disabled}
-      {inputId}
+      {...inputId === undefined ? {} : { inputId }}
       {inputMode}
       {clearSearchLabel}
       {error}
       {editorExtensions}
-      {filterSyntax}
+      {...filterSyntax === undefined ? {} : { filterSyntax }}
       {onValueChange}
       {onClearSearch}
     >

package/src/shared/filter/search-filter-bar/SearchFilterInput.svelte

@@ -403,7 +403,7 @@
   {#key `${chipEditSession.from}:${chipEditSession.to}:${chipEditSession.field}`}
     <SearchFilterPredicateEditor
       session={chipEditSession}
-      {filterSyntax}
+      {...filterSyntax === undefined ? {} : { filterSyntax }}
       {disabled}
       onCancel={closePredicateChipEditor}
       onApply={applyPredicateChipEdit}

package/src/shared/filter/search-filter-bar/SearchFilterPredicateEditor.svelte

@@ -158,7 +158,7 @@
   <div class="cv-search-filter-bar__predicate-editor-row">
     <SearchFilterFieldAutocomplete
       value={field}
-      {filterSyntax}
+      {...filterSyntax === undefined ? {} : { filterSyntax }}
       {disabled}
       onValueChange={handleFieldChange}
     />

package/src/shared/filter/search-filter-bar/search-filter-syntax.ts

@@ -261,7 +261,7 @@ function operatorDescription(operator: string) {
 function valueCompletions(field: SearchFilterField): Completion[] {
   return uniqueValues(field).map((value) => ({
     label: value.label ?? value.value,
-    detail: value.description,
+    ...(value.description === undefined ? {} : { detail: value.description }),
     type: "constant",
     apply: value.apply ?? value.value,
   }));

package/src/shared/forms/autocomplete-input/AutocompleteInput.svelte

@@ -52,6 +52,7 @@
   let editing = $state(false);
   let filterValue = $state("");
   let activeIndex = $state(0);
+  let blurFocusTarget: HTMLElement | null = null;
   const listId = `autocomplete-list-${Math.random().toString(36).slice(2)}`;
 
   const normalizedSuggestions = $derived.by(() => {
@@ -115,10 +116,10 @@
     void onCommit(suggestion);
   }
 
-  function commitValue() {
+  function commitValue(close = true) {
     const committed = value.trim();
     if (!committed) return;
-    if (!forceOpen) open = false;
+    if (close && !forceOpen) open = false;
     editing = false;
     filterValue = "";
     void onCommit(committed);
@@ -132,6 +133,13 @@
     activeIndex = 0;
   }
 
+  function handleCloseAutoFocus(event: Event) {
+    event.preventDefault();
+    const target = blurFocusTarget;
+    blurFocusTarget = null;
+    target?.focus({ preventScroll: true });
+  }
+
   function handleKeydown(event: KeyboardEvent) {
     if (event.key === "ArrowDown") {
       event.preventDefault();
@@ -166,9 +174,8 @@
     }
     if (event.key === "Tab") {
       if (commitOnTab && value.trim()) {
-        commitValue();
+        commitValue(false);
       }
-      closeList();
       return;
     }
     if (event.key === "Backspace" && !value) {
@@ -213,11 +220,16 @@
         activeIndex = 0;
       }}
       onkeydown={handleKeydown}
-      onblur={() => {
+      onblur={(event) => {
+        blurFocusTarget =
+          event.relatedTarget instanceof HTMLElement
+            ? event.relatedTarget
+            : null;
         if (commitOnBlur) {
           commitValue();
+        } else {
+          closeList();
         }
-        closeList();
       }}
     />
     <Popover.Content
@@ -227,7 +239,7 @@
       customAnchor={input}
       {portalProps}
       onOpenAutoFocus={(event) => event.preventDefault()}
-      onCloseAutoFocus={(event) => event.preventDefault()}
+      onCloseAutoFocus={handleCloseAutoFocus}
     >
       <div id={listId} class="ui-autocomplete-input__list" role="listbox">
         {#each normalizedSuggestions as suggestion, index (suggestion)}

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>