@lapismd/design-core 0.1.0 → 0.2.0

package/src/shared/workspace/settings/types.ts

@@ -15,6 +15,7 @@ export interface WorkspaceSettingBase<Id extends string = string> {
   description?: string;
   order?: number;
   disabled?: boolean;
+  readOnly?: boolean;
   deprecated?: string;
 }
 
@@ -89,7 +90,24 @@ export interface WorkspaceActionSetting extends WorkspaceSettingBase {
   label: string;
   icon?: WorkspaceIconName;
   variant?: "default" | "outline" | "destructive" | "ghost";
-  run(): void | Promise<void>;
+  isDisabled?(): boolean;
+  isBusy?(): boolean;
+  confirm?(): boolean | Promise<boolean>;
+  run(): void | WorkspaceActionResult | Promise<void | WorkspaceActionResult>;
+}
+
+export interface WorkspaceActionResult {
+  tone: "success" | "warning" | "error";
+  message: string;
+}
+
+export interface WorkspaceOutputSetting extends WorkspaceSettingBase {
+  type: "output";
+  presentation?: "text" | "code" | "status" | "copyable";
+  emptyLabel?: string;
+  copyLabel?: string;
+  leadingCharacters?: number;
+  trailingCharacters?: number;
 }
 
 export interface WorkspaceSectionSettingGroup extends WorkspaceSettingBase {
@@ -115,6 +133,23 @@ export interface WorkspaceObjectProperty {
   type: "string" | "number" | "integer" | "boolean";
   default?: string | number | boolean;
   required?: boolean;
+  presentation?: "text" | "url" | "code" | "copyable" | "status" | "hidden";
+  readOnly?: boolean;
+}
+
+export interface WorkspaceObjectRowAction {
+  id: string;
+  label: string;
+  icon?: WorkspaceIconName;
+  variant?: "default" | "outline" | "destructive" | "ghost";
+  disabled?: boolean | ((row: Record<string, unknown>) => boolean);
+  hidden?: boolean | ((row: Record<string, unknown>) => boolean);
+  busy?: (row: Record<string, unknown>) => boolean;
+  confirm?: (row: Record<string, unknown>) => boolean | Promise<boolean>;
+  run(
+    row: Record<string, unknown>,
+    index: number,
+  ): void | WorkspaceActionResult | Promise<void | WorkspaceActionResult>;
 }
 
 export interface WorkspaceObjectCollectionSetting extends WorkspaceSettingBase {
@@ -123,6 +158,12 @@ export interface WorkspaceObjectCollectionSetting extends WorkspaceSettingBase {
   properties: WorkspaceObjectProperty[];
   minimumItems?: number;
   maximumItems?: number;
+  rowKey?: string;
+  reorderable?: boolean;
+  allowAdd?: boolean;
+  allowRemove?: boolean;
+  addLabel?: string;
+  rowActions?: WorkspaceObjectRowAction[];
 }
 
 export interface WorkspaceObjectMapSetting extends WorkspaceSettingBase {
@@ -144,17 +185,32 @@ export interface WorkspaceKeyValueSetting extends WorkspaceSettingBase {
   allowUnknownValues?: boolean;
 }
 
-export interface WorkspaceCustomSettingProps {
+export interface WorkspaceCustomSettingProps<T = unknown> {
   id: string;
-  value: unknown;
+  field: WorkspaceCustomSetting<T>;
+  value: T;
   disabled?: boolean;
-  update(value: unknown): boolean;
+  readOnly?: boolean;
+  busy?: boolean;
+  error?: string;
+  setValue(value: T): Promise<boolean>;
+  /** @deprecated Use setValue for controlled custom fields. */
+  update(value: T): boolean;
 }
 
-export interface WorkspaceCustomSetting extends WorkspaceSettingBase {
+export interface WorkspaceCustomFieldAdapter<T = unknown> {
+  id: string;
+  component: Component<WorkspaceCustomSettingProps<T>>;
+}
+
+export interface WorkspaceCustomSetting<T = unknown>
+  extends WorkspaceSettingBase {
   type: "custom";
-  default: unknown;
-  component: Component<WorkspaceCustomSettingProps>;
+  default?: T;
+  adapter?: string;
+  component?: Component<WorkspaceCustomSettingProps<T>>;
+  presentation?: "row" | "full-width";
+  validate?(value: T): string | null;
 }
 
 export interface WorkspaceUnsupportedSetting extends WorkspaceSettingBase {
@@ -171,6 +227,7 @@ export type WorkspaceSettingField =
   | WorkspaceMultiEnumSetting
   | WorkspaceListSetting
   | WorkspaceActionSetting
+  | WorkspaceOutputSetting
   | WorkspaceSettingGroup
   | WorkspaceObjectCollectionSetting
   | WorkspaceObjectMapSetting
@@ -184,6 +241,14 @@ export interface WorkspaceSettingsPageProps {
   section: WorkspaceSettingsSection;
 }
 
+export interface WorkspaceSettingsSearchEntry {
+  id: string;
+  title: string;
+  description?: string;
+  keywords?: readonly string[];
+  path?: readonly string[];
+}
+
 export interface WorkspaceSettingsSection {
   id: string;
   title: string;
@@ -194,9 +259,25 @@ export interface WorkspaceSettingsSection {
   sourcePluginId?: string;
   surface?: "schema" | "hotkeys" | "core-plugins";
   page?: Component<WorkspaceSettingsPageProps>;
+  searchEntries?:
+    | readonly WorkspaceSettingsSearchEntry[]
+    | (() => readonly WorkspaceSettingsSearchEntry[]);
+  revealSearchEntry?(entryId: string): void | Promise<void>;
   fields?: WorkspaceSettingField[];
 }
 
+export interface WorkspaceSettingsSource {
+  get(fieldId: string): unknown;
+  set(fieldId: string, value: unknown): Promise<unknown | void>;
+  subscribe(listener: (fieldId?: string) => void): () => void;
+}
+
+export interface WorkspaceSettingsDefinition {
+  section: WorkspaceSettingsSection;
+  source: WorkspaceSettingsSource;
+  adapters?: readonly WorkspaceCustomFieldAdapter<any>[];
+}
+
 export interface WorkspaceSettingsNavigationGroup {
   id: string;
   title: string;
@@ -209,7 +290,7 @@ export interface WorkspaceSettingsSnapshotV1 {
 }
 
 export interface WorkspaceSettingsChangeEvent {
-  source: "update" | "restore-default" | "replace" | "load";
+  source: "update" | "source" | "restore-default" | "replace" | "load";
   id?: string;
 }
 
@@ -242,6 +323,7 @@ export interface WorkspaceSettingsEventMap {
   "validation-error": [event: WorkspaceSettingsValidationError];
   "persistence-error": [event: { operation: "load" | "save"; error: unknown }];
   "persistence-success": [event: { operation: "load" | "save" }];
+  "source-error": [event: { id: string; error: unknown }];
 }
 
 export interface WorkspaceSettingsSearchResult {

package/src/storybook/app-shell-reference/AppShellTwoExpandedSidebarsReference.css

@@ -0,0 +1,25 @@
+#storybook-root:has(.ui-shell-story-frame) {
+  height: 100vh;
+}
+
+.ui-shell-story-frame {
+  box-sizing: border-box;
+  height: 100%;
+  min-width: 48rem;
+  padding: 1.5rem;
+  background: var(--muted);
+}
+
+/* Detached interaction-test renderers do not provide the Storybook root height. */
+.ui-shell-story-frame:not(:where(#storybook-root *)) {
+  height: 40rem;
+}
+
+.ui-shell-story-surface {
+  --ui-shell-height: 100%;
+
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  box-shadow: 0 1rem 2.5rem
+    color-mix(in srgb, var(--foreground) 10%, transparent);
+}

package/src/storybook/app-shell-reference/AppShellTwoExpandedSidebarsReference.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import { AppShell } from "../../shared/shell/app-shell/index.js";
+  import { AppShellController } from "../../shared/shell/app-shell/app-shell-controller.svelte.js";
+  import AppShellBodyDemo from "../../shared/shell/app-shell/examples/AppShellBodyDemo.svelte";
+  import AppShellConversationDemo from "../../shared/shell/app-shell/examples/AppShellConversationDemo.svelte";
+  import AppShellSidebarDemo from "../../shared/shell/app-shell/examples/AppShellSidebarDemo.svelte";
+  import AppShellToolbarDemo from "../../shared/shell/app-shell/examples/AppShellToolbarDemo.svelte";
+  import "./AppShellTwoExpandedSidebarsReference.css";
+
+  let {
+    controller = new AppShellController(),
+    leftSidebar,
+    showRightToggle = true,
+  }: {
+    controller?: AppShellController;
+    leftSidebar?: Snippet<[AppShellController]>;
+    showRightToggle?: boolean;
+  } = $props();
+</script>
+
+<div class="ui-shell-story-frame">
+  <AppShell.Root
+    {controller}
+    displayMode="desktop"
+    desktopMinMainWidth={0}
+    class="ui-shell-story-surface"
+  >
+    <AppShell.Sidebar side="left">
+      {#if leftSidebar}
+        {@render leftSidebar(controller)}
+      {:else}
+        <AppShellSidebarDemo {controller} side="left" />
+      {/if}
+    </AppShell.Sidebar>
+    <AppShell.Main>
+      <AppShell.Toolbar>
+        <AppShellToolbarDemo {showRightToggle} />
+      </AppShell.Toolbar>
+      <AppShell.Body label="Workspace content">
+        <AppShellBodyDemo />
+      </AppShell.Body>
+    </AppShell.Main>
+    <AppShell.Sidebar side="right" closeable>
+      <AppShellConversationDemo {controller} />
+    </AppShell.Sidebar>
+  </AppShell.Root>
+</div>

package/src/storybook/app-shell-reference/index.ts

@@ -0,0 +1 @@
+export { default as AppShellTwoExpandedSidebarsReference } from "./AppShellTwoExpandedSidebarsReference.svelte";

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;