@lapismd/design-core 0.1.0

package/src/shared/shadcn/column-canvas/column-canvas.css

@@ -0,0 +1,498 @@
+@import "./column-canvas.tokens.css";
+
+[data-ui-component="column-canvas"][data-ui-part="root"] {
+  box-sizing: border-box;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  container-type: inline-size;
+  overflow-x: auto;
+  overflow-y: hidden;
+  background: var(--ui-column-canvas-background, var(--background));
+  padding: var(--ui-column-canvas-padding, 0.75rem);
+  /* Keep columns clear of the horizontal canvas scrollbar. */
+  padding-bottom: calc(
+    var(--ui-column-canvas-padding, 0.75rem) +
+      var(--ui-column-canvas-scrollbar-gap, 0.5rem)
+  );
+  scroll-padding-inline: var(--ui-column-canvas-padding, 0.75rem);
+}
+
+[data-ui-component="column-canvas"][data-ui-part="root"][data-display-mode="wide"] {
+  overscroll-behavior-inline: contain;
+  /* Wide canvases keep native continuous scrolling. Structural navigation and
+     routed vertical-wheel input align explicitly when those events occur. */
+  scroll-snap-type: none;
+}
+
+[data-ui-component="column-canvas"][data-ui-part="root"][data-display-mode="compact"] {
+  overscroll-behavior-inline: contain;
+  padding-bottom: var(--ui-column-canvas-padding, 0.75rem);
+  scrollbar-width: none;
+  scroll-snap-type: x mandatory;
+  touch-action: pan-x pan-y;
+}
+
+[data-ui-component="column-canvas"][data-ui-part="root"][data-display-mode="compact"][data-wheel-animating="true"] {
+  /* The wheel handoff lands exactly on a snap point with its own gentler ease. */
+  scroll-snap-type: none;
+}
+
+[data-ui-component="column-canvas"][data-ui-part="root"][data-display-mode="compact"]::-webkit-scrollbar {
+  display: none;
+}
+
+[data-ui-component="column-canvas"][data-ui-part="row"] {
+  position: relative;
+  display: flex;
+  align-items: stretch;
+  flex: 1 1 auto;
+  height: auto;
+  inline-size: max-content;
+  min-inline-size: 100%;
+  min-height: 0;
+  gap: var(--ui-column-canvas-gap, 0.75rem);
+}
+
+[data-ui-component="column-canvas"][data-ui-part="sticky-layer"] {
+  position: sticky;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  z-index: 30;
+  flex: 0 0 0;
+  width: 0;
+  height: 0;
+  overflow: visible;
+  pointer-events: none;
+}
+
+[data-ui-component="column-canvas"][data-ui-part="sticky-stack"] {
+  box-sizing: border-box;
+  position: absolute;
+  inset-block-start: calc(
+    -1 * var(--ui-column-canvas-sticky-layer-block-offset, 0px)
+  );
+  inset-inline-start: calc(
+    -1 * var(--ui-column-canvas-sticky-layer-inline-offset, 0px)
+  );
+  display: flex;
+  align-items: stretch;
+  gap: 0;
+  height: var(--ui-column-canvas-sticky-layer-height, 0px);
+  overflow: hidden;
+  border: 1px solid var(--ui-column-canvas-border-color, var(--border));
+  border-radius: var(--ui-column-canvas-radius, var(--radius));
+  background: var(--ui-column-canvas-column-background, var(--card));
+  pointer-events: auto;
+}
+
+[data-ui-component="column-canvas"][data-ui-part="sticky-rail"] {
+  box-sizing: border-box;
+  display: flex;
+  flex: 0 0 var(--ui-column-canvas-sticky-rail-width, 2.75rem);
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  width: var(--ui-column-canvas-sticky-rail-width, 2.75rem);
+  min-width: var(--ui-column-canvas-sticky-rail-width, 2.75rem);
+  height: 100%;
+  padding-block-start: 0.5rem;
+  border-inline-end: 1px solid
+    var(--ui-column-canvas-border-color, var(--border));
+  background: transparent;
+  transition: background-color 120ms ease;
+}
+
+[data-ui-component="column-canvas"][data-ui-part="sticky-rail"]:last-child {
+  border-inline-end: 0;
+}
+
+[data-ui-component="column-canvas"][data-ui-part="sticky-rail"]:hover,
+[data-ui-component="column-canvas"][data-ui-part="sticky-rail"]:focus-within {
+  background: var(--ui-column-canvas-rail-hover, var(--muted));
+}
+
+[data-ui-component="column-canvas"][data-ui-part="sticky-rail"]
+  > [data-ui-component="button"][data-ui-part="sticky-return"] {
+  border-radius: 9999px;
+}
+
+[data-ui-component="column-canvas"][data-ui-part="sticky-rail-label"] {
+  color: var(--ui-column-canvas-count-color, var(--muted-foreground));
+  font-size: 0.6875rem;
+  font-weight: var(--font-weight-semibold, 600);
+  writing-mode: vertical-rl;
+}
+
+[data-ui-component="column-canvas"][data-ui-part="sticky-width-probe"] {
+  position: absolute;
+  width: var(--ui-column-canvas-sticky-peek-width, 2.75rem);
+  height: 0;
+  visibility: hidden;
+  pointer-events: none;
+}
+
+[data-ui-component="column-canvas"][data-ui-part="wide-context-width-probe"] {
+  position: absolute;
+  width: var(
+    --ui-column-canvas-wide-context-width,
+    var(--ui-column-canvas-compact-peek-width, 2.75rem)
+  );
+  height: 0;
+  visibility: hidden;
+  pointer-events: none;
+}
+
+[data-ui-component="column-canvas"][data-ui-part="trailing-spacer"] {
+  flex-shrink: 0;
+  height: 100%;
+}
+
+[data-ui-component="column-canvas"][data-ui-part="column"] {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+  border: 1px solid var(--ui-column-canvas-border-color, var(--border));
+  border-radius: var(--ui-column-canvas-radius, var(--radius));
+  background: var(--ui-column-canvas-column-background, var(--card));
+  width: var(--ui-column-canvas-expanded-width);
+  min-width: var(--ui-column-canvas-expanded-width);
+}
+
+[data-ui-component="column-canvas"][data-ui-part="column-preview-anchor"] {
+  position: relative;
+  flex: 0 0 0;
+  width: 0;
+  min-width: 0;
+  margin-inline-end: calc(-1 * var(--ui-column-canvas-gap, 0.75rem));
+  height: 100%;
+  min-height: 0;
+  overflow: visible;
+  pointer-events: none;
+}
+
+[data-ui-component="column-canvas"][data-ui-part="column-edge-trigger"] {
+  position: absolute;
+  z-index: var(--ui-column-canvas-edge-trigger-z-index, 42);
+  inset-block: 0;
+  inset-inline-start: 0;
+  width: var(--ui-column-canvas-edge-trigger-width, 0.25rem);
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  pointer-events: auto;
+}
+
+[data-ui-component="column-canvas"][data-ui-part="column-edge-trigger"]:hover,
+[data-ui-component="column-canvas"][data-ui-part="column-edge-trigger"]:focus-visible {
+  outline: none;
+  background: var(
+    --ui-column-canvas-edge-trigger-hover,
+    color-mix(in oklab, var(--muted-foreground) 32%, transparent)
+  );
+}
+
+[data-ui-component="column-canvas"][data-ui-part="column-preview"] {
+  position: absolute;
+  z-index: var(--ui-column-canvas-preview-z-index, 41);
+  inset-block: 0;
+  inset-inline-start: 0;
+  display: flex;
+  flex-direction: column;
+  width: var(--ui-column-canvas-expanded-width);
+  min-width: var(--ui-column-canvas-expanded-width);
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+  border: 1px solid var(--ui-column-canvas-border-color, var(--border));
+  border-radius: var(--ui-column-canvas-radius, var(--radius));
+  background: var(--ui-column-canvas-column-background, var(--card));
+  box-shadow: var(
+    --ui-column-canvas-preview-shadow,
+    0 1rem 2rem color-mix(in oklab, var(--foreground) 16%, transparent)
+  );
+  pointer-events: auto;
+}
+
+[data-ui-component="column-canvas"][data-ui-part="root"][data-display-mode="compact"]
+  [data-ui-part="column-preview-anchor"] {
+  display: none;
+}
+
+[data-ui-component="column-canvas"][data-ui-part="root"][data-display-mode="wide"]
+  [data-ui-part="column"],
+[data-ui-component="column-canvas"][data-ui-part="root"][data-display-mode="wide"]
+  [data-ui-part="collapsed-column"] {
+  scroll-snap-align: end;
+}
+
+[data-ui-component="column-canvas"][data-ui-part="root"][data-display-mode="wide"]
+  [data-ui-part="column"][data-responsive-stage="pair"] {
+  width: var(
+    --ui-column-canvas-wide-stage-width,
+    var(--ui-column-canvas-expanded-width)
+  );
+  min-width: var(
+    --ui-column-canvas-wide-stage-width,
+    var(--ui-column-canvas-expanded-width)
+  );
+}
+
+[data-ui-component="column-canvas"][data-ui-part="root"][data-display-mode="compact"]
+  [data-ui-part="column"] {
+  width: 100cqi;
+  min-width: 100cqi;
+  scroll-snap-align: end;
+  scroll-snap-stop: always;
+}
+
+[data-ui-component="column-canvas"][data-ui-part="root"][data-display-mode="compact"]
+  [data-ui-part="collapsed-column"] {
+  scroll-snap-align: end;
+  scroll-snap-stop: always;
+}
+
+[data-ui-component="column-canvas"][data-ui-part="column-header"] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-shrink: 0;
+  gap: 0.5rem;
+  height: var(--ui-column-canvas-header-height, 2.5rem);
+  padding-inline: 0.75rem;
+  border-bottom: 1px solid var(--ui-column-canvas-border-color, var(--border));
+}
+
+[data-ui-component="column-canvas"][data-ui-part="column-header-main"] {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+[data-ui-component="column-canvas"][data-ui-part="column-item"] {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+  width: 100%;
+  margin: 0;
+  padding: 0.5rem;
+  border: 0;
+  border-radius: var(--radius-sm, var(--radius));
+  background: transparent;
+  color: var(--ui-column-canvas-title-color, var(--foreground));
+  font: inherit;
+  font-size: var(--text-sm, 0.875rem);
+  text-align: start;
+  cursor: pointer;
+}
+
+[data-ui-component="column-canvas"][data-ui-part="column-item"]:hover {
+  background: var(--ui-column-canvas-item-hover, var(--muted));
+}
+
+[data-ui-component="column-canvas"][data-ui-part="column-item"][data-selected="true"] {
+  background: var(--ui-column-canvas-item-selected, var(--accent));
+  color: var(
+    --ui-column-canvas-item-selected-foreground,
+    var(--accent-foreground)
+  );
+}
+
+[data-ui-component="column-canvas"][data-ui-part="column-item"]:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+[data-ui-component="column-canvas"][data-ui-part="column-body"]
+  [data-ui-part="column-item"] {
+  width: calc(100% - 0.5rem);
+  margin-inline: 0.25rem;
+  margin-block-start: var(--ui-column-canvas-item-gap, 0.25rem);
+}
+
+[data-ui-component="column-canvas"][data-ui-part="column-body"]
+  [data-ui-part="column-item"]:last-child {
+  margin-block-end: var(--ui-column-canvas-item-gap, 0.25rem);
+}
+
+[data-ui-component="column-canvas"][data-ui-part="column-body"]
+  [data-ui-part="column-item"]:last-child {
+  margin-block-end: 0.25rem;
+}
+
+[data-ui-component="column-canvas"][data-ui-part="column-title"] {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--text-sm, 0.875rem);
+  font-weight: var(--font-weight-semibold, 600);
+  color: var(--ui-column-canvas-title-color, var(--foreground));
+}
+
+[data-ui-component="column-canvas"][data-ui-part="column-count"] {
+  flex-shrink: 0;
+  font-size: var(--text-xs, 0.75rem);
+  color: var(--ui-column-canvas-count-color, var(--muted-foreground));
+}
+
+[data-ui-component="column-canvas"][data-ui-part="column-header-actions"] {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-shrink: 0;
+  margin-inline-start: auto;
+}
+
+[data-ui-component="column-canvas"][data-ui-part="column-header-actions"]
+  > button:hover,
+[data-ui-component="column-canvas"][data-ui-part="column-header-actions"]
+  > button:focus-visible,
+[data-ui-component="column-canvas"][data-ui-part="column-header"]
+  > [data-ui-part="column-toggle"]:hover,
+[data-ui-component="column-canvas"][data-ui-part="column-header"]
+  > [data-ui-part="column-toggle"]:focus-visible,
+[data-ui-component="column-canvas"][data-ui-part="column-header"]
+  > [data-ui-part="column-close"]:hover,
+[data-ui-component="column-canvas"][data-ui-part="column-header"]
+  > [data-ui-part="column-close"]:focus-visible {
+  background: var(--ui-column-canvas-header-action-hover);
+  color: var(--ui-column-canvas-header-action-hover-foreground);
+}
+
+[data-ui-component="column-canvas"][data-ui-part="column-body"] {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: hidden;
+}
+
+[data-ui-component="column-canvas"][data-ui-part="column-body"]
+  > [data-ui-component="scroll-area"] {
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+}
+
+[data-ui-component="column-canvas"][data-ui-part="resize-handle"] {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 20;
+  width: 0.25rem;
+  height: 100%;
+  cursor: col-resize;
+  touch-action: none;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  transition: background-color 120ms ease;
+}
+
+[data-ui-component="column-canvas"][data-ui-part="root"][data-display-mode="compact"]
+  [data-ui-part="resize-handle"] {
+  display: none;
+}
+
+[data-ui-component="column-canvas"][data-ui-part="resize-handle"]:hover,
+[data-ui-component="column-canvas"][data-ui-part="resize-handle"]:focus-visible,
+[data-ui-component="column-canvas"][data-ui-part="resize-handle"][data-resizing="true"] {
+  background: var(
+    --ui-column-canvas-resize-handle-hover,
+    color-mix(in oklab, var(--primary) 40%, transparent)
+  );
+  outline: none;
+}
+
+[data-ui-component="column-canvas"][data-ui-part="collapsed-column"] {
+  display: flex;
+  flex-shrink: 0;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+  width: var(--ui-column-canvas-collapsed-width, 2.75rem);
+  min-width: var(--ui-column-canvas-collapsed-width, 2.75rem);
+  border: 1px solid var(--ui-column-canvas-border-color, var(--border));
+  border-radius: var(--ui-column-canvas-radius, var(--radius));
+  background: var(--ui-column-canvas-column-background, var(--card));
+}
+
+[data-ui-component="column-canvas"][data-ui-part="collapsed-placeholder"] {
+  flex: 1 1 auto;
+  width: 100%;
+  min-height: 0;
+}
+
+[data-ui-component="column-canvas"][data-ui-part="collapsed-trigger"] {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+  margin: 0;
+  padding: 0.5rem 0.25rem;
+  border: 0;
+  background: transparent;
+  color: var(--ui-column-canvas-count-color, var(--muted-foreground));
+  cursor: pointer;
+  transition:
+    color 120ms ease,
+    background-color 120ms ease;
+}
+
+[data-ui-component="column-canvas"][data-ui-part="collapsed-trigger"]:hover,
+[data-ui-component="column-canvas"][data-ui-part="collapsed-trigger"]:focus-visible {
+  background: var(--ui-column-canvas-rail-hover, var(--muted));
+  color: var(--ui-column-canvas-title-color, var(--foreground));
+}
+
+[data-ui-component="column-canvas"][data-ui-part="collapsed-trigger"]
+  :global(svg) {
+  width: 0.875rem;
+  height: 0.875rem;
+  flex-shrink: 0;
+}
+
+[data-ui-component="column-canvas"][data-ui-part="root"]
+  [data-ui-part="column-toggle"]
+  :global(svg),
+[data-ui-component="column-canvas"][data-ui-part="root"]
+  [data-ui-part="column-close"]
+  :global(svg) {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+[data-ui-component="column-canvas"][data-ui-part="collapsed-label"] {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-size: 0.6875rem;
+  font-weight: var(--font-weight-semibold, 600);
+  writing-mode: vertical-rl;
+}
+
+[data-ui-component="column-canvas"][data-ui-part="collapsed-count"] {
+  font-weight: var(--font-weight-medium, 500);
+  color: var(--ui-column-canvas-count-color, var(--muted-foreground));
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-ui-component="column-canvas"][data-ui-part="resize-handle"],
+  [data-ui-component="column-canvas"][data-ui-part="sticky-rail"],
+  [data-ui-component="column-canvas"][data-ui-part="collapsed-trigger"] {
+    transition: none;
+  }
+}

package/src/shared/shadcn/column-canvas/column-canvas.demo-data.ts

@@ -0,0 +1,192 @@
+/**
+ * Demo catalog shaped like `AI/Overview` families for Column Canvas stories.
+ * Not a public package export — story/docs fixture only.
+ */
+
+export type AiDemoComponent = {
+  id: string;
+  label: string;
+  role: string;
+  importPath: string;
+};
+
+export type AiDemoCategory = {
+  id: string;
+  label: string;
+  description: string;
+  components: AiDemoComponent[];
+};
+
+export const aiDemoCategories: AiDemoCategory[] = [
+  {
+    id: "stable-chat",
+    label: "Stable Chat",
+    description:
+      "Prop-driven chat surfaces for production hosts. No app store, networking, or model SDK.",
+    components: [
+      {
+        id: "layout",
+        label: "Layout",
+        role: "Full-page chat shell with docked composer, auto-scroll, and density.",
+        importPath: "@lapismd/design-core/ai/chat",
+      },
+      {
+        id: "layout-scroll-button",
+        label: "Layout Scroll Button",
+        role: "Scroll-to-bottom recovery control that expands when new messages arrive.",
+        importPath: "@lapismd/design-core/ai/chat",
+      },
+      {
+        id: "message-list",
+        label: "Message List",
+        role: "Accessible message log with density context and infinite scroll support.",
+        importPath: "@lapismd/design-core/ai/chat",
+      },
+      {
+        id: "message",
+        label: "Message",
+        role: "Sender context wrapper for avatar, name, metadata, and alignment.",
+        importPath: "@lapismd/design-core/ai/chat",
+      },
+      {
+        id: "message-bubble",
+        label: "Message Bubble",
+        role: "Filled or ghost content container styled from sender context.",
+        importPath: "@lapismd/design-core/ai/chat",
+      },
+      {
+        id: "message-metadata",
+        label: "Message Metadata",
+        role: "Timestamp, footer, and delivery status row for chat messages.",
+        importPath: "@lapismd/design-core/ai/chat",
+      },
+      {
+        id: "system-message",
+        label: "System Message",
+        role: "Centered status or date separator without sender chrome.",
+        importPath: "@lapismd/design-core/ai/chat",
+      },
+      {
+        id: "composer",
+        label: "Composer",
+        role: "Layout shell for composer slots, drawer, input, and send actions.",
+        importPath: "@lapismd/design-core/ai/chat",
+      },
+      {
+        id: "composer-input",
+        label: "Composer Input",
+        role: "Rich input with trigger menus, inline tokens, and history recall.",
+        importPath: "@lapismd/design-core/ai/chat",
+      },
+      {
+        id: "composer-drawer",
+        label: "Composer Drawer",
+        role: "Collapsible attachments and context tray above the input.",
+        importPath: "@lapismd/design-core/ai/chat",
+      },
+      {
+        id: "send-button",
+        label: "Send Button",
+        role: "Circular send/stop toggle that reads streaming state from context.",
+        importPath: "@lapismd/design-core/ai/chat",
+      },
+      {
+        id: "composer-token",
+        label: "Composer Token",
+        role: "Serialized token chip for use outside the contentEditable input.",
+        importPath: "@lapismd/design-core/ai/chat",
+      },
+      {
+        id: "tokenized-text",
+        label: "Tokenized Text",
+        role: "Inline token badges for mentions, tags, and commands in message text.",
+        importPath: "@lapismd/design-core/ai/chat",
+      },
+      {
+        id: "tool-calls",
+        label: "Tool Calls",
+        role: "LLM tool and function-call activity with single or stacked summaries.",
+        importPath: "@lapismd/design-core/ai/chat",
+      },
+      {
+        id: "dictation-button",
+        label: "Dictation Button",
+        role: "Voice dictation toggle for the composer with listening affordances.",
+        importPath: "@lapismd/design-core/ai/chat",
+      },
+    ],
+  },
+  {
+    id: "experimental-chat",
+    label: "Experimental",
+    description:
+      "Lab-derived Chat surfaces marked @experimental. Prefer stable Chat for production.",
+    components: [
+      {
+        id: "reasoning",
+        label: "Reasoning",
+        role: "Compact streaming reasoning disclosure with controlled expansion.",
+        importPath: "@lapismd/design-core/ai/experimental",
+      },
+      {
+        id: "reaction-bar",
+        label: "Reaction Bar",
+        role: "Independently pressed reaction pills with an optional emoji picker.",
+        importPath: "@lapismd/design-core/ai/experimental",
+      },
+      {
+        id: "emoji-picker",
+        label: "Emoji Picker",
+        role: "Searchable emoji popover with eight-column keyboard navigation.",
+        importPath: "@lapismd/design-core/ai/experimental",
+      },
+      {
+        id: "typing-indicator",
+        label: "Typing Indicator",
+        role: "Reduced-motion-safe typing dots with live grammar-aware labels.",
+        importPath: "@lapismd/design-core/ai/experimental",
+      },
+      {
+        id: "unread-divider",
+        label: "Unread Divider",
+        role: "Semantic separator marking the first unread message.",
+        importPath: "@lapismd/design-core/ai/experimental",
+      },
+    ],
+  },
+];
+
+export function findAiDemoCategory(
+  categoryId: string | undefined,
+): AiDemoCategory | undefined {
+  return aiDemoCategories.find((category) => category.id === categoryId);
+}
+
+export function findAiDemoComponent(
+  categoryId: string | undefined,
+  componentId: string | undefined,
+): AiDemoComponent | undefined {
+  return findAiDemoCategory(categoryId)?.components.find(
+    (component) => component.id === componentId,
+  );
+}
+
+export type AiDemoDetailField = {
+  id: string;
+  label: string;
+  value: string;
+};
+
+/** Third-column rows that echo fields from the selected second-column component. */
+export function aiDemoComponentDetailFields(
+  component: AiDemoComponent,
+  category: AiDemoCategory,
+): AiDemoDetailField[] {
+  return [
+    { id: "name", label: "Name", value: component.label },
+    { id: "id", label: "Id", value: component.id },
+    { id: "role", label: "Role", value: component.role },
+    { id: "import", label: "Import", value: component.importPath },
+    { id: "category", label: "Category", value: category.label },
+  ];
+}