@lapismd/design-core 0.1.0

package/src/shared/workspace/view-header/WorkspaceViewLabel.css

@@ -0,0 +1,48 @@
+.ui-workspace-view-label {
+  display: inline-flex;
+  min-width: 0;
+  max-width: 100%;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+.ui-workspace-view-label__title {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ui-workspace-view-label__badge {
+  min-width: 1.125rem;
+  height: 1.125rem;
+  flex: 0 0 auto;
+  justify-content: center;
+  border: 0;
+  border-radius: 999px;
+  padding: 0 0.3125rem;
+  color: var(--ui-workspace-foreground);
+  background: var(--ui-workspace-selection);
+  box-shadow: inset 0 0 0 1px
+    color-mix(in srgb, var(--ui-workspace-accent) 24%, transparent);
+  font-size: 0.6875rem;
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+  writing-mode: horizontal-tb;
+}
+
+.ui-workspace-view-label[data-title-visible="false"][data-has-badge="true"] {
+  position: absolute;
+  top: 0;
+  right: 0;
+  overflow: visible;
+  pointer-events: none;
+}
+
+.ui-workspace-view-label[data-title-visible="false"][data-has-badge="true"]
+  .ui-workspace-view-label__badge {
+  min-width: 0.875rem;
+  height: 0.875rem;
+  padding: 0 0.1875rem;
+  font-size: 0.5625rem;
+}

package/src/shared/workspace/view-header/WorkspaceViewLabel.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+  import { Badge } from "@lapismd/design-core/shadcn/badge";
+  import type { WorkspaceTab } from "../core/types.js";
+  import type { WorkspaceShellController } from "../core/workspace-controller.svelte.js";
+  import { resolveWorkspaceViewLabel } from "./workspace-view-label.js";
+  import "./WorkspaceViewLabel.css";
+
+  let {
+    controller,
+    tab,
+    hostId,
+    paneId,
+    fallbackTitle = tab.title,
+    showTitle = true,
+    announce = true,
+    class: className = "",
+  }: {
+    controller: WorkspaceShellController;
+    tab: WorkspaceTab;
+    hostId: string;
+    paneId: string;
+    fallbackTitle?: string;
+    showTitle?: boolean;
+    announce?: boolean;
+    class?: string;
+  } = $props();
+
+  let label = $derived(
+    resolveWorkspaceViewLabel(controller, tab, hostId, paneId, fallbackTitle),
+  );
+  let title = $derived(label.title);
+  let badge = $derived(label.badge);
+  let accessibleLabel = $derived(label.accessibleLabel);
+</script>
+
+<span
+  class={`ui-workspace-view-label ${className}`.trim()}
+  data-ui-component="workspace-view-label"
+  data-workspace-view-label={tab.id}
+  data-title-visible={showTitle}
+  data-has-badge={Boolean(badge)}
+  aria-label={announce && badge ? accessibleLabel : undefined}
+>
+  {#if showTitle}
+    <span class="ui-workspace-view-label__title" data-ui-part="title">
+      {title}
+    </span>
+  {:else if !badge}
+    <span class="sr-only">{title}</span>
+  {/if}
+  {#if badge}
+    <Badge
+      variant="secondary"
+      class="ui-workspace-view-label__badge"
+      data-workspace-view-badge={tab.id}
+      aria-hidden="true"
+    >
+      {badge.value}
+    </Badge>
+  {/if}
+</span>

package/src/shared/workspace/view-header/index.ts

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

package/src/shared/workspace/view-header/workspace-view-label.ts

@@ -0,0 +1,61 @@
+import type {
+  WorkspaceTab,
+  WorkspaceViewBadge,
+  WorkspaceViewChrome,
+  WorkspaceViewContext,
+} from "../core/types.js";
+import type { WorkspaceShellController } from "../core/workspace-controller.svelte.js";
+
+export interface ResolvedWorkspaceViewLabel {
+  title: string;
+  badge?: WorkspaceViewBadge;
+  accessibleLabel: string;
+}
+
+export function createWorkspaceViewContext(
+  controller: WorkspaceShellController,
+  tab: WorkspaceTab,
+  hostId: string,
+  paneId: string,
+): WorkspaceViewContext {
+  return {
+    tab,
+    hostId,
+    paneId,
+    active: controller.activeTabId === tab.id,
+    showInlineTitle: controller.showInlineTitle,
+    activate: () => controller.selectTab(tab.id),
+    close: () => controller.closeTab(tab.id),
+    setState: (state) => controller.updateViewState(tab.id, state),
+  };
+}
+
+export function resolveWorkspaceViewChrome(
+  controller: WorkspaceShellController,
+  tab: WorkspaceTab,
+  hostId: string,
+  paneId: string,
+): WorkspaceViewChrome {
+  const definition = controller.registry.resolve(tab.view.type);
+  return (
+    definition?.getChrome?.(
+      createWorkspaceViewContext(controller, tab, hostId, paneId),
+    ) ?? {}
+  );
+}
+
+export function resolveWorkspaceViewLabel(
+  controller: WorkspaceShellController,
+  tab: WorkspaceTab,
+  hostId: string,
+  paneId: string,
+  fallbackTitle = tab.title,
+): ResolvedWorkspaceViewLabel {
+  const chrome = resolveWorkspaceViewChrome(controller, tab, hostId, paneId);
+  const title = (chrome.title ?? fallbackTitle) || tab.id;
+  return {
+    title,
+    badge: chrome.badge,
+    accessibleLabel: chrome.badge ? `${title}, ${chrome.badge.label}` : title,
+  };
+}

package/src/shared/workspace/view-host/ExampleWorkspaceView.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import type { WorkspaceViewContext } from "../core/types.js";
+
+  let { tab, active, setState }: WorkspaceViewContext = $props();
+
+  const initialCount = () => Number(tab.view.state?.count ?? 0);
+  let count = $state(initialCount());
+
+  function increment() {
+    count += 1;
+    setState({ count });
+  }
+</script>
+
+<section class="example-workspace-view" aria-label={tab.title}>
+  <h2>{tab.title}</h2>
+  <p>This view is {active ? "active" : "inactive"}.</p>
+  <button type="button" onclick={increment}>Count {count}</button>
+</section>
+
+<style>
+  .example-workspace-view {
+    display: grid;
+    height: 100%;
+    box-sizing: border-box;
+    place-content: center;
+    gap: 0.75rem;
+    text-align: center;
+  }
+
+  h2,
+  p {
+    margin: 0;
+  }
+</style>

package/src/shared/workspace/view-host/WorkspaceImperativeView.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import { untrack } from "svelte";
+  import type {
+    WorkspaceImperativeViewDefinition,
+    WorkspaceViewContext,
+  } from "../core/types.js";
+  import "./WorkspaceViewHost.css";
+
+  let {
+    definition,
+    context,
+  }: {
+    definition: WorkspaceImperativeViewDefinition;
+    context: WorkspaceViewContext;
+  } = $props();
+
+  let remountKey = $derived(`${context.tab.id}:${definition.type}`);
+
+  function mountView(key: string) {
+    return (element: HTMLDivElement) => {
+      void key;
+      const cleanup = untrack(() => definition.mount(element, context));
+      return () => cleanup?.();
+    };
+  }
+</script>
+
+<div
+  class="ui-workspace-imperative-view"
+  data-ui-component="workspace-imperative-view"
+  {@attach mountView(remountKey)}
+></div>

package/src/shared/workspace/view-host/WorkspaceViewHost.css

@@ -0,0 +1,23 @@
+.ui-workspace-view-host {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  background: var(
+    --ui-workspace-view-background,
+    var(--ui-workspace-background)
+  );
+  color: var(--ui-workspace-view-foreground, var(--ui-workspace-foreground));
+}
+
+.ui-workspace-imperative-view {
+  position: absolute;
+  inset: 0;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  background: inherit;
+  color: inherit;
+}

package/src/shared/workspace/view-host/WorkspaceViewHost.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+  import type { WorkspaceTab } from "../core/types.js";
+  import type { WorkspaceShellController } from "../core/workspace-controller.svelte.js";
+  import WorkspaceEmpty from "../empty/WorkspaceEmpty.svelte";
+  import { createWorkspaceEmptyActions } from "../empty/workspace-empty-actions.js";
+  import WorkspaceImperativeView from "./WorkspaceImperativeView.svelte";
+  import "./WorkspaceViewHost.css";
+
+  let {
+    controller,
+    tab,
+    hostId,
+    paneId,
+    createTab,
+  }: {
+    controller: WorkspaceShellController;
+    tab: WorkspaceTab;
+    hostId: string;
+    paneId: string;
+    createTab?: (paneId: string) => WorkspaceTab;
+  } = $props();
+
+  let persistedMissingType = $derived.by(() => {
+    const persisted = tab.view.state?.["__missingViewType"];
+    return typeof persisted === "string" && persisted.length > 0
+      ? persisted
+      : null;
+  });
+  let resolvedViewType = $derived(persistedMissingType ?? tab.view.type);
+  let definition = $derived(
+    controller.registry.resolve(tab.view.type) ??
+      (persistedMissingType
+        ? controller.registry.resolve(persistedMissingType)
+        : undefined),
+  );
+  let context = $derived({
+    tab,
+    hostId,
+    paneId,
+    active: controller.activeTabId === tab.id,
+    showInlineTitle: controller.showInlineTitle,
+    activate: () => controller.selectTab(tab.id),
+    close: () => controller.closeTab(tab.id),
+    setState: (state: Record<string, unknown>) =>
+      controller.updateViewState(tab.id, state),
+  });
+  let ViewComponent = $derived(
+    definition?.kind === "svelte" ? definition.component : null,
+  );
+  let emptyActions = $derived(
+    createWorkspaceEmptyActions(
+      controller,
+      paneId,
+      createTab,
+      tab.closable === false ? undefined : tab.id,
+    ),
+  );
+  let missingViewType = $derived.by(() => {
+    if (definition) return null;
+    if (persistedMissingType) return persistedMissingType;
+    if (tab.view.type !== "empty") return tab.view.type;
+    return null;
+  });
+  let missingViewActions = $derived([
+    {
+      id: "close",
+      label: "Close",
+      onSelect: () => {
+        controller.closeTab(tab.id);
+      },
+    },
+  ]);
+</script>
+
+<div
+  class="ui-workspace-view-host"
+  data-ui-component="workspace-view-host"
+  data-type={resolvedViewType}
+  data-workspace-view-type={resolvedViewType}
+>
+  {#if definition?.kind === "imperative"}
+    <WorkspaceImperativeView {definition} {context} />
+  {:else if ViewComponent}
+    <ViewComponent {...context} />
+  {:else if missingViewType}
+    <WorkspaceEmpty
+      {missingViewType}
+      surface="page"
+      actions={missingViewActions}
+    />
+  {:else if tab.view.type === "empty"}
+    <WorkspaceEmpty actions={emptyActions} surface="page" />
+  {/if}
+</div>

package/src/shared/workspace/view-host/index.ts

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

package/src/shared/workspace/workspace-desktop-drag.css

@@ -0,0 +1,9 @@
+[data-desktop-drag-region]:not([data-desktop-drag-region="false"]) {
+  app-region: drag;
+  -webkit-app-region: drag;
+}
+
+[data-desktop-drag-region="false"] {
+  app-region: no-drag;
+  -webkit-app-region: no-drag;
+}

package/src/shared/workspace/workspace.tokens.css

@@ -0,0 +1,181 @@
+/**
+ * Workspace defaults bind the public layer tokens to the host theme.
+ * Consumers may override any `--ui-workspace-*` value on an ancestor.
+ */
+:root {
+  --ui-workspace-background: var(--background);
+  --ui-workspace-foreground: var(--foreground);
+  --ui-workspace-view-background: var(--ui-workspace-background);
+  --ui-workspace-view-secondary-background: var(--ui-workspace-secondary);
+  --ui-workspace-view-foreground: var(--ui-workspace-foreground);
+  --ui-workspace-panel: var(--sidebar, var(--background));
+  --ui-workspace-panel-foreground: var(--sidebar-foreground, var(--foreground));
+  --ui-workspace-panel-action-hover-background: var(
+    --sidebar-accent,
+    var(--accent)
+  );
+  --ui-workspace-panel-action-hover-foreground: var(
+    --sidebar-accent-foreground,
+    var(--ui-workspace-panel-foreground)
+  );
+  --ui-workspace-muted: var(--muted);
+  --ui-workspace-muted-foreground: var(--muted-foreground);
+  --ui-workspace-popover: var(--popover);
+  --ui-workspace-popover-foreground: var(--popover-foreground);
+  --ui-workspace-border: var(--border);
+  --ui-workspace-border-strong: color-mix(
+    in srgb,
+    var(--foreground) 18%,
+    var(--border)
+  );
+  --ui-workspace-accent: var(--primary);
+  --ui-workspace-accent-foreground: var(--primary-foreground);
+  --ui-workspace-secondary: var(--secondary);
+  --ui-workspace-secondary-foreground: var(--secondary-foreground);
+  --ui-workspace-about-primary-foreground: color-mix(
+    in srgb,
+    var(--ui-workspace-accent) 15%,
+    #000
+  );
+  --ui-workspace-selection: color-mix(in srgb, var(--primary) 14%, transparent);
+  --ui-workspace-destructive: var(--destructive);
+  --ui-workspace-warning: var(--warning, #f97316);
+  --ui-workspace-diagnostic-error: var(--ui-workspace-destructive);
+  --ui-workspace-diagnostic-warning: var(--ui-workspace-warning);
+  --ui-workspace-diagnostic-information: var(--ui-workspace-accent);
+  --ui-workspace-diagnostic-hint: var(--ui-workspace-muted-foreground);
+  --ui-workspace-focus-ring: var(--ring);
+  --ui-workspace-font-sans: var(--font-sans, inherit);
+  --ui-workspace-font-mono: var(
+    --font-mono,
+    ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    monospace
+  );
+  --ui-workspace-radius-small: calc(var(--radius, 0.625rem) * 0.6);
+  --ui-workspace-radius-medium: calc(var(--radius, 0.625rem) * 0.8);
+  --ui-workspace-radius-large: var(--radius, 0.625rem);
+  --ui-workspace-shadow: 0 12px 32px rgb(15 23 42 / 24%);
+  --ui-workspace-tab-height: 2.5rem;
+  --ui-workspace-tab-active-height: 2.25rem;
+  --ui-workspace-tab-width: 12.5rem;
+  --ui-workspace-tab-max-width: 20rem;
+  --ui-workspace-tab-curve: 0.375rem;
+  --ui-workspace-tab-active-background: var(--background);
+  --ui-workspace-tab-hover-background: var(--accent);
+  --ui-workspace-tab-action-hover-background: color-mix(
+    in srgb,
+    var(--ui-workspace-foreground) 12%,
+    transparent
+  );
+  --ui-workspace-tab-action-hover-foreground: var(--ui-workspace-foreground);
+  --ui-workspace-tab-container-background: var(
+    --sidebar,
+    var(--ui-workspace-muted)
+  );
+  --ui-workspace-tab-divider: var(--border);
+  --ui-workspace-stacked-shadow: -0.5rem 0 0.5rem rgb(0 0 0 / 5%);
+  --ui-workspace-stacked-pane-width: 43.75rem;
+  --ui-workspace-sidebar-header-height: 2rem;
+  --ui-workspace-sidebar-tab-header-inline-padding: 0.5rem;
+  --ui-workspace-bottom-panel-min-height: 7.5rem;
+  --ui-workspace-bottom-panel-max-height: 70%;
+  --ui-workspace-bottom-panel-collapsed-width: 2rem;
+  --ui-workspace-resize-handle-size: 1px;
+  --ui-workspace-resize-handle-active-size: 2px;
+  --ui-workspace-ribbon-width: 3rem;
+  --ui-workspace-status-height: 1.5rem;
+  --ui-workspace-settings-heading-size: 1rem;
+  --ui-workspace-settings-heading-weight: 400;
+  --ui-workspace-settings-label-size: 0.9375rem;
+  --ui-workspace-settings-description-size: 0.75rem;
+  --ui-workspace-settings-navigation-row-height: 2rem;
+  --ui-workspace-settings-navigation-active-background: var(
+    --ui-workspace-selection
+  );
+  --ui-workspace-settings-control-height: 1.875rem;
+  --ui-workspace-settings-control-radius: 0.375rem;
+  --ui-workspace-settings-dialog-radius: 0.5rem;
+  --ui-workspace-settings-dialog-max-width: 68.75rem;
+  --ui-workspace-settings-dialog-height: 85vh;
+  --ui-workspace-overlay-z-index: 50;
+  --ui-workspace-explorer-toolbar-height: var(
+    --ui-workspace-sidebar-header-height
+  );
+  --ui-workspace-explorer-row-hover-background: var(
+    --ui-workspace-panel-action-hover-background
+  );
+  --ui-workspace-explorer-row-active-background: var(
+    --ui-workspace-explorer-row-hover-background
+  );
+  --ui-workspace-explorer-drop-background: color-mix(
+    in srgb,
+    var(--ui-workspace-accent) 10%,
+    transparent
+  );
+  --ui-workspace-explorer-drop-foreground: var(--ui-workspace-accent);
+  --ui-workspace-explorer-drop-radius: var(--ui-workspace-radius-small);
+  --ui-workspace-explorer-drop-padding-end: 0.25rem;
+  /* Stronger than ghost --muted hover so toolbar icons read on the panel. */
+  --ui-workspace-explorer-toolbar-action-hover-background: color-mix(
+    in srgb,
+    var(--ui-workspace-foreground) 14%,
+    var(--ui-workspace-panel)
+  );
+  --ui-workspace-explorer-toolbar-action-hover-foreground: var(
+    --ui-workspace-panel-foreground
+  );
+  --ui-workspace-explorer-flash-ring: var(--ui-workspace-accent);
+  --ui-workspace-explorer-row-border-width: 2px;
+  --ui-workspace-explorer-row-padding-inline: 0.375rem;
+  --ui-workspace-explorer-guide-width: 1px;
+  /* Start inset that places the 1px guide under the expanded chevron tip. */
+  --ui-workspace-explorer-indent: calc(
+    var(--ui-workspace-explorer-row-border-width) +
+      var(--ui-workspace-explorer-row-padding-inline) +
+      (var(--ui-workspace-icon-size, 1rem) / 2) -
+      (var(--ui-workspace-explorer-guide-width) / 2)
+  );
+  /* Foreground wash so guides stay visible on panel surfaces (Lapis
+     `--indentation-guide-color` is similarly a low-opacity dark line). */
+  --ui-workspace-explorer-guide-color: color-mix(
+    in srgb,
+    var(--ui-workspace-foreground) 22%,
+    transparent
+  );
+  --ui-workspace-explorer-guide-gap: 0.5rem;
+  --ui-workspace-explorer-font-family: var(--ui-workspace-font-sans);
+  /* Match Lapis nav/file-explorer `--font-ui-small` (13px). */
+  --ui-workspace-explorer-font-size: 0.8125rem;
+  --ui-workspace-explorer-row-height: 1.75rem;
+  --ui-workspace-explorer-row-gap: 0.125rem;
+  /* Space after an expanded folder row so its wash does not touch the first child. */
+  --ui-workspace-explorer-folder-gap: 0.25rem;
+  --ui-workspace-explorer-row-active-weight: inherit;
+  /* Insets tree content only (Lapis Sidebar.Group p-2); scrollbar stays flush. */
+  --ui-workspace-explorer-content-padding: 0.5rem;
+  --ui-workspace-startup-background: var(--ui-workspace-background);
+  --ui-workspace-startup-max-width: 32rem;
+  --ui-workspace-startup-padding: 1.5rem;
+  --ui-workspace-startup-title-size: 1.125rem;
+  --ui-workspace-startup-progress-height: 0.5rem;
+  --ui-workspace-startup-progress-background: color-mix(
+    in srgb,
+    var(--ui-workspace-accent) 20%,
+    transparent
+  );
+  --ui-workspace-startup-task-background: var(--ui-workspace-background);
+  --ui-workspace-startup-task-active-background: color-mix(
+    in srgb,
+    var(--ui-workspace-accent) 5%,
+    var(--ui-workspace-background)
+  );
+  --ui-workspace-startup-task-complete-background: color-mix(
+    in srgb,
+    var(--ui-workspace-muted) 40%,
+    var(--ui-workspace-background)
+  );
+  --ui-workspace-startup-failure-background: var(--ui-workspace-background);
+  --ui-workspace-startup-failure-padding: 1.5rem;
+}