@lapismd/design-core 0.1.0 → 0.1.2

package/src/shared/shadcn/dropdown-menu/dropdown-menu-radio-group.svelte

@@ -3,7 +3,7 @@
 
   let {
     ref = $bindable(null),
-    value = $bindable(),
+    value = $bindable(""),
     ...restProps
   }: DropdownMenuPrimitive.RadioGroupProps = $props();
 </script>

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

@@ -292,6 +292,7 @@
         width: 0.25rem;
         flex: 0 0 0.25rem;
         margin-inline-start: auto;
+        margin-inline-end: 1px;
       }
 
       [data-ui-component="scroll-area"][data-ui-part="scroll-area-scrollbar"][data-orientation="vertical"]
@@ -308,6 +309,7 @@
         height: 0.25rem;
         flex: 0 0 0.25rem;
         margin-block-start: auto;
+        margin-block-end: 1px;
       }
 
       [data-ui-component="scroll-area"][data-ui-part="scroll-area-scrollbar"][data-orientation="horizontal"]

package/src/shared/shadcn/spinner/spinner.svelte

@@ -18,9 +18,9 @@
 <Loader2Icon
   {...omitDataUiComponent(restProps)}
   {role}
-  name={name === null ? undefined : name}
-  color={color === null ? undefined : color}
-  stroke={stroke === null ? undefined : stroke}
+  {...name == null ? {} : { name }}
+  {...color == null ? {} : { color }}
+  {...stroke == null ? {} : { stroke }}
   aria-label={ariaLabel}
   data-ui-component="spinner"
   class={className}

package/src/shared/shell/app-shell/AppShell.demo.css

@@ -0,0 +1,37 @@
+/* Story-only viewport variants. Shell and example presentation styles live
+   with the components that own them. */
+.ui-shell-story-frame-fluid {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  max-width: none;
+}
+
+.ui-shell-story-frame-fluid:has([data-display-mode="mobile"]) {
+  padding-block: 0;
+}
+
+.ui-shell-story-frame-tablet,
+.ui-shell-story-frame-mobile {
+  width: 100%;
+  min-width: 0;
+  margin-inline: auto;
+  padding-block: 0;
+}
+
+.ui-shell-story-frame-tablet {
+  max-width: 56rem;
+}
+
+.ui-shell-story-frame-mobile {
+  max-width: 30rem;
+  padding-inline: 0.5rem;
+}
+
+.ui-shell-story-frame-constrained-desktop {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  max-width: 56rem;
+  margin-inline: auto;
+}

package/src/shared/shell/app-shell/AppShellBodyContent.svelte

@@ -2,18 +2,22 @@
   import type { HTMLAttributes } from "svelte/elements";
   import type { WithElementRef } from "../../../lib/utils.js";
   import { ScrollArea } from "../../shadcn/scroll-area/index.js";
+  import type { ScrollAreaVisibility } from "../../shadcn/scroll-area/scroll-area-model.js";
   import { useAppShell } from "./app-shell-context.svelte.js";
   import { useAppShellBody } from "./app-shell-body-context.svelte.js";
 
   let {
     ref = $bindable(null),
     label,
+    scrollbarVisibility,
     class: className,
     children,
     ...restProps
   }: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
     /** Optional accessible name for this independently scrolling region. */
     label?: string;
+    /** When its scrollbar is painted: while scrolling, on hover, or always. */
+    scrollbarVisibility?: ScrollAreaVisibility;
   } = $props();
 
   useAppShell();
@@ -38,7 +42,7 @@
   aria-label={label}
 >
   <ScrollArea
-    type="auto"
+    type={scrollbarVisibility ?? "auto"}
     class="ui-minimal-app-shell__body-content-scroll-area"
   >
     {@render children?.()}

package/src/shared/shell/app-shell/AppShellBodySidebar.svelte

@@ -7,6 +7,7 @@
   import type { HTMLAttributes } from "svelte/elements";
   import type { WithElementRef } from "../../../lib/utils.js";
   import { ScrollArea } from "../../shadcn/scroll-area/index.js";
+  import type { ScrollAreaVisibility } from "../../shadcn/scroll-area/scroll-area-model.js";
   import { useAppShell } from "./app-shell-context.svelte.js";
   import { useAppShellBody } from "./app-shell-body-context.svelte.js";
   import type { AppShellSide } from "./app-shell-controller.svelte.js";
@@ -19,6 +20,7 @@
     panelId,
     label,
     mobileLabel,
+    scrollbarVisibility,
     tabindex: _tabindex,
     class: className,
     children,
@@ -34,6 +36,8 @@
     label?: string;
     /** Mobile edge selector label. Defaults to the accessible landmark label. */
     mobileLabel?: string;
+    /** When its scrollbar is painted: while scrolling, on hover, or always. */
+    scrollbarVisibility?: ScrollAreaVisibility;
   } = $props();
 
   const controller = useAppShell();
@@ -108,7 +112,7 @@
   inert={(mobileMode && !mobileActive) || (!mobileMode && !open)}
 >
   <ScrollArea
-    type="auto"
+    type={scrollbarVisibility ?? "auto"}
     class="ui-minimal-app-shell__body-sidebar-scroll-area"
   >
     {@render children?.()}

package/src/shared/shell/app-shell/AppShellMobilePanelSelector.svelte

@@ -37,7 +37,7 @@
     <Select.Root
       type="single"
       bind:open
-      value={activePanelId}
+      value={activePanelId ?? panels[0]?.id ?? ""}
       onValueChange={(value) => {
         if (value) controller.mobile.selectPanel(side, value);
       }}

package/src/shared/shell/app-shell/app-shell-controller.svelte.ts

@@ -450,9 +450,11 @@ export class AppShellController {
   readonly mobile = new AppShellMobileController();
   layoutReady = $state(false);
 
-  readonly #persistence?: AppShellLayoutPersistence;
+  readonly #persistence: AppShellLayoutPersistence | undefined;
   readonly #saveDebounceMs: number;
-  readonly #onPersistenceError?: (event: AppShellPersistenceErrorEvent) => void;
+  readonly #onPersistenceError:
+    | ((event: AppShellPersistenceErrorEvent) => void)
+    | undefined;
   readonly #panels = new Map<string, AppShellSidebarController>();
   readonly #panelIds = new Map<AppShellSidebarController, string>();
   readonly #panelDisposers = new Map<string, () => void>();
@@ -467,17 +469,25 @@ export class AppShellController {
     this.#persistence = options.persistence;
     this.#saveDebounceMs = Math.max(0, options.saveDebounceMs ?? 200);
     this.#onPersistenceError = options.onPersistenceError;
-    const sidebarOptions = {
-      minWidth: options.sidebarMinWidth,
-      maxWidth: options.sidebarMaxWidth,
+    const sidebarOptions: AppShellSidebarControllerOptions = {
+      ...(options.sidebarMinWidth === undefined
+        ? {}
+        : { minWidth: options.sidebarMinWidth }),
+      ...(options.sidebarMaxWidth === undefined
+        ? {}
+        : { maxWidth: options.sidebarMaxWidth }),
     };
     this.left = new AppShellSidebarController(
       "left",
       options.leftCollapsed ?? false,
       {
         ...sidebarOptions,
-        width: options.leftWidth,
-        closed: options.leftClosed,
+        ...(options.leftWidth === undefined
+          ? {}
+          : { width: options.leftWidth }),
+        ...(options.leftClosed === undefined
+          ? {}
+          : { closed: options.leftClosed }),
       },
     );
     this.right = new AppShellSidebarController(
@@ -485,8 +495,12 @@ export class AppShellController {
       options.rightCollapsed ?? false,
       {
         ...sidebarOptions,
-        width: options.rightWidth,
-        closed: options.rightClosed,
+        ...(options.rightWidth === undefined
+          ? {}
+          : { width: options.rightWidth }),
+        ...(options.rightClosed === undefined
+          ? {}
+          : { closed: options.rightClosed }),
       },
     );
     this.#attachPanel("left", this.left);

package/src/shared/shell/app-shell/examples/AppShellBodyDemo.svelte

@@ -1,3 +1,7 @@
+<script lang="ts">
+  import "./AppShellExamples.css";
+</script>
+
 <div class="ui-shell-story-body-demo">
   <header>
     <p>Composable layout</p>

package/src/shared/shell/app-shell/examples/AppShellCompleteDemo.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import "./AppShellExamples.css";
   import { untrack } from "svelte";
   import type {
     AppShellController,

package/src/shared/shell/app-shell/examples/AppShellConversationDemo.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import "./AppShellExamples.css";
   import SparklesIcon from "@lucide/svelte/icons/sparkles";
   import {
     Composer,