@lapismd/design-core 0.1.2 → 0.2.0

package/src/shared/shell/app-shell/examples/AppShellExamples.css

@@ -2,6 +2,109 @@
   --ui-shell-body-sidebar-width: 10rem;
 }
 
+.ui-shell-story-multi-panel {
+  width: min(100%, 80rem);
+  margin-inline: auto;
+}
+
+.ui-shell-story-multi-panel-wide {
+  width: min(100%, 94rem);
+}
+
+.ui-shell-story-multi-panel-dark {
+  color-scheme: dark;
+}
+
+.ui-shell-story-multi-panel__toolbar {
+  gap: 0.5rem;
+  padding-inline: 0.5rem;
+}
+
+.ui-shell-story-multi-panel__toolbar > span {
+  flex: 1;
+}
+
+.ui-shell-story-multi-panel__nav,
+.ui-shell-story-multi-panel__rail {
+  display: grid;
+  gap: 0.25rem;
+  padding: 0.5rem;
+}
+
+.ui-shell-story-multi-panel__nav button,
+.ui-shell-story-multi-panel__rail button {
+  display: flex;
+  min-height: 2.25rem;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.375rem 0.625rem;
+  border: 0;
+  border-radius: calc(var(--radius) * 0.75);
+  color: var(--foreground);
+  background: transparent;
+  font: inherit;
+  text-align: start;
+}
+
+.ui-shell-story-multi-panel__nav button:is(:hover, :focus-visible),
+.ui-shell-story-multi-panel__nav button[data-active],
+.ui-shell-story-multi-panel__rail button:is(:hover, :focus-visible) {
+  background: var(--accent);
+}
+
+.ui-shell-story-multi-panel__rail small {
+  color: var(--muted-foreground);
+}
+
+.ui-shell-story-multi-panel__content {
+  width: min(100%, 42rem);
+  margin-inline: auto;
+  padding: clamp(2rem, 8cqw, 6rem) 1.5rem;
+}
+
+.ui-shell-story-multi-panel__content > p:first-child,
+.ui-shell-story-multi-panel__panel-copy p {
+  color: var(--muted-foreground);
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.ui-shell-story-multi-panel__content h1 {
+  margin-block: 0.5rem 1rem;
+  font-size: clamp(1.5rem, 4cqw, 3rem);
+  line-height: 1;
+}
+
+.ui-shell-story-multi-panel__panel-copy,
+.ui-shell-story-multi-panel__reviews {
+  display: grid;
+  gap: 0.75rem;
+  padding: 1rem;
+}
+
+.ui-shell-story-multi-panel__panel-copy strong {
+  margin-block-end: 0.75rem;
+}
+
+.ui-shell-story-multi-panel__reviews article {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 1rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--card);
+}
+
+.ui-shell-story-multi-panel__reviews span {
+  color: var(--muted-foreground);
+  font-size: 0.75rem;
+}
+
 .ui-shell-story-mode-demo {
   position: relative;
   height: 100%;

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

@@ -0,0 +1,187 @@
+<script lang="ts">
+  import { Button } from "../../../shadcn/button/index.js";
+  import type {
+    AppShellController,
+    AppShellDisplayMode,
+    AppShellSidebarController,
+  } from "../app-shell-controller.svelte.js";
+  import { AppShell } from "../index.js";
+  import "./AppShellExamples.css";
+
+  let {
+    controller,
+    overview,
+    activity,
+    displayMode = "desktop",
+    frameClass,
+    direction = "ltr",
+  }: {
+    controller: AppShellController;
+    overview: AppShellSidebarController;
+    activity: AppShellSidebarController;
+    displayMode?: AppShellDisplayMode;
+    frameClass?: string;
+    direction?: "ltr" | "rtl";
+  } = $props();
+
+  let surfaceOpen = $state(false);
+  let surfaceTrigger = $state<HTMLButtonElement | null>(null);
+</script>
+
+<div
+  class={["ui-shell-story-frame", "ui-shell-story-multi-panel", frameClass]
+    .filter(Boolean)
+    .join(" ")}
+  dir={direction}
+>
+  <AppShell.Root
+    {controller}
+    {displayMode}
+    mobileBreakpoint={760}
+    desktopMinMainWidth={440}
+    class="ui-shell-story-surface"
+  >
+    <AppShell.Sidebar side="left" label="Navigation" resizable>
+      <AppShell.Sidebar.Header>
+        <strong>Workspace</strong>
+      </AppShell.Sidebar.Header>
+      <AppShell.Sidebar.Body>
+        <nav class="ui-shell-story-multi-panel__nav" aria-label="Workspace">
+          <button type="button" data-active>Inbox</button>
+          <button type="button">Projects</button>
+          <button type="button">Archive</button>
+        </nav>
+      </AppShell.Sidebar.Body>
+    </AppShell.Sidebar>
+
+    <AppShell.Main>
+      <AppShell.Toolbar class="ui-shell-story-multi-panel__toolbar">
+        <AppShell.Sidebar.Toggle side="left" sidebarName="navigation" />
+        <strong>Project updates</strong>
+        <span></span>
+        <AppShell.Sidebar.Toggle side="right" sidebarName="details" />
+        <AppShell.Sidebar.Toggle
+          side="right"
+          sidebarController={overview}
+          sidebarName="overview"
+        />
+      </AppShell.Toolbar>
+      <AppShell.Body label="Project workspace">
+        <article class="ui-shell-story-multi-panel__content">
+          <p>Project workspace</p>
+          <h1>Composable same-side panels</h1>
+          <p>
+            The main surface stays mounted while inspectors, overview rails, and
+            structural layers respond to the available width.
+          </p>
+          <button type="button">Draft update</button>
+        </article>
+      </AppShell.Body>
+    </AppShell.Main>
+
+    <AppShell.Sidebar
+      side="right"
+      label="Details"
+      constraintPriority={0}
+      constrainedPresentation="replace-main"
+      closeable
+    >
+      <AppShell.Sidebar.Header>
+        <strong>Details</strong>
+        <AppShell.Sidebar.Close />
+      </AppShell.Sidebar.Header>
+      <AppShell.Sidebar.Body>
+        <div class="ui-shell-story-multi-panel__panel-copy">
+          <p>Owner</p>
+          <strong>Design systems</strong>
+          <p>Status</p>
+          <strong>In review</strong>
+        </div>
+      </AppShell.Sidebar.Body>
+    </AppShell.Sidebar>
+
+    <AppShell.Sidebar
+      side="right"
+      sidebarController={overview}
+      label="Overview rail"
+      variant="rail"
+      constraintPriority={100}
+      resizable
+    >
+      <AppShell.Sidebar.Body>
+        <nav class="ui-shell-story-multi-panel__rail" aria-label="Overview">
+          <button type="button"><span>Reviews</span><small>4</small></button>
+          <button type="button"><span>People</span><small>12</small></button>
+        </nav>
+      </AppShell.Sidebar.Body>
+    </AppShell.Sidebar>
+
+    <AppShell.Sidebar
+      side="right"
+      sidebarController={activity}
+      label="Activity rail"
+      variant="rail"
+      constraintPriority={100}
+      resizable
+    >
+      <AppShell.Sidebar.Body>
+        <nav class="ui-shell-story-multi-panel__rail" aria-label="Activity">
+          <button type="button"><span>Tasks</span><small>7</small></button>
+          <button type="button"><span>Commits</span><small>18</small></button>
+          <Button
+            bind:ref={surfaceTrigger}
+            variant="outline"
+            size="sm"
+            onclick={() => (surfaceOpen = true)}
+          >
+            Open reviews
+          </Button>
+        </nav>
+      </AppShell.Sidebar.Body>
+    </AppShell.Sidebar>
+
+    <AppShell.SurfaceLayer
+      open={surfaceOpen}
+      label="Release reviews"
+      coverPanelIds={["right"]}
+      suspendPanelIds={["overview"]}
+      returnFocus={surfaceTrigger}
+      dismissLabel="Close reviews"
+      onDismiss={() => (surfaceOpen = false)}
+    >
+      <AppShell.SurfaceLayer.Header>
+        <strong>Release reviews</strong>
+        <Button
+          variant="ghost"
+          size="icon-sm"
+          aria-label="Close release reviews"
+          onclick={() => (surfaceOpen = false)}
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            aria-hidden="true"
+          >
+            <path d="M18 6 6 18M6 6l12 12"></path>
+          </svg>
+        </Button>
+      </AppShell.SurfaceLayer.Header>
+      <AppShell.SurfaceLayer.Body>
+        <div class="ui-shell-story-multi-panel__reviews">
+          <article>
+            <strong>History 0.1.3</strong>
+            <span>Pending review</span>
+          </article>
+          <article>
+            <strong>Markdown 0.1.5</strong>
+            <span>Approved</span>
+          </article>
+        </div>
+      </AppShell.SurfaceLayer.Body>
+    </AppShell.SurfaceLayer>
+  </AppShell.Root>
+</div>

package/src/shared/shell/app-shell/index.ts

@@ -10,6 +10,9 @@ import AppShellSidebarClose from "./AppShellSidebarClose.svelte";
 import AppShellSidebarFooter from "./AppShellSidebarFooter.svelte";
 import AppShellSidebarHeader from "./AppShellSidebarHeader.svelte";
 import AppShellSidebarToggle from "./AppShellSidebarToggle.svelte";
+import AppShellSurfaceLayer from "./AppShellSurfaceLayer.svelte";
+import AppShellSurfaceLayerBody from "./AppShellSurfaceLayerBody.svelte";
+import AppShellSurfaceLayerHeader from "./AppShellSurfaceLayerHeader.svelte";
 import AppShellToolbar from "./AppShellToolbar.svelte";
 
 export const Sidebar = Object.assign(AppShellSidebar, {
@@ -26,6 +29,11 @@ export const Body = Object.assign(AppShellBody, {
   Toggle: AppShellBodyToggle,
 });
 
+export const SurfaceLayer = Object.assign(AppShellSurfaceLayer, {
+  Header: AppShellSurfaceLayerHeader,
+  Body: AppShellSurfaceLayerBody,
+});
+
 export {
   AppShellBody,
   AppShellBodyContent,
@@ -39,6 +47,9 @@ export {
   AppShellSidebarFooter,
   AppShellSidebarHeader,
   AppShellSidebarToggle,
+  AppShellSurfaceLayer,
+  AppShellSurfaceLayerBody,
+  AppShellSurfaceLayerHeader,
   AppShellToolbar,
   AppShellBodyContent as BodyContent,
   AppShellBodySidebar as BodySidebar,
@@ -50,6 +61,8 @@ export {
   AppShellSidebarFooter as SidebarFooter,
   AppShellSidebarHeader as SidebarHeader,
   AppShellSidebarToggle as SidebarToggle,
+  AppShellSurfaceLayerBody as SurfaceLayerBody,
+  AppShellSurfaceLayerHeader as SurfaceLayerHeader,
   AppShellToolbar as Toolbar,
 };
 
@@ -59,6 +72,7 @@ export const AppShell = {
   Main: AppShellMain,
   Toolbar: AppShellToolbar,
   Body,
+  SurfaceLayer,
 } as const;
 
 export * from "./app-shell-body-context.svelte.js";

package/src/shared/shell/shell.tokens.css

@@ -19,4 +19,6 @@
       color-mix(in srgb, var(--foreground) 10%, transparent),
     0 1px 2px -1px color-mix(in srgb, var(--foreground) 10%, transparent);
   --ui-shell-main-border: 1px solid var(--border);
+  --ui-shell-surface-layer-main-start-allowance: 0px;
+  --ui-shell-surface-layer-inline-end-inset: var(--ui-shell-main-block-inset);
 }

package/src/shared/shell/shell.tokens.ts

@@ -14,6 +14,9 @@ export const shellTokenNames = {
   mainRadius: "--ui-shell-main-radius",
   mainShadow: "--ui-shell-main-shadow",
   mainBorder: "--ui-shell-main-border",
+  surfaceLayerMainStartAllowance:
+    "--ui-shell-surface-layer-main-start-allowance",
+  surfaceLayerInlineEndInset: "--ui-shell-surface-layer-inline-end-inset",
 } as const;
 
 export type ShellTokenKey = keyof typeof shellTokenNames;
@@ -36,4 +39,6 @@ export const shellTokenDefaults: Record<ShellTokenKey, string> = {
   mainShadow:
     "0 1px 3px color-mix(in srgb, var(--foreground) 10%, transparent), 0 1px 2px -1px color-mix(in srgb, var(--foreground) 10%, transparent)",
   mainBorder: "1px solid var(--border)",
+  surfaceLayerMainStartAllowance: "0px",
+  surfaceLayerInlineEndInset: "var(--ui-shell-main-block-inset)",
 };

package/src/theme.css

@@ -1,6 +1,16 @@
 @custom-variant dark (&:is(.dark *));
 
 :root {
+  /* Runtime defaults must survive consumer Tailwind tree shaking. */
+  --container-xs: 20rem;
+  --container-md: 28rem;
+  --container-lg: 32rem;
+  --text-xs: 0.75rem;
+  --text-sm: 0.875rem;
+  --text-base: 1rem;
+  --text-lg: 1.125rem;
+  --text-xl: 1.25rem;
+  --text-2xl: 1.5rem;
   /* Compiled shadcn CSS reads these even when a consumer does not reprocess @theme. */
   --color-white: #ffffff;
   --color-black: #000000;