@lapismd/design-core 0.2.0 → 0.3.1

package/dist/shared/workspace/plugins/f-mode/hint-labels.js

@@ -0,0 +1,69 @@
+export const DEFAULT_FMODE_ALPHABET = "asdfghjklqwertyuiopzxcvbnm";
+export function normalizeFModeAlphabet(alphabet) {
+    return Array.from(new Set(alphabet
+        .toLocaleLowerCase()
+        .split("")
+        .filter((character) => /[a-z0-9]/u.test(character))));
+}
+export function createHintLabels(count, alphabet = DEFAULT_FMODE_ALPHABET) {
+    if (count <= 0)
+        return [];
+    const characters = normalizeFModeAlphabet(alphabet);
+    if (characters.length === 0) {
+        throw new Error("F-Mode alphabet must contain at least one alphanumeric key");
+    }
+    const labels = [...characters];
+    while (labels.length < count) {
+        const shortestLength = Math.min(...labels.map((label) => label.length));
+        let indexToExpand = -1;
+        for (let index = labels.length - 1; index >= 0; index -= 1) {
+            if (labels[index]?.length === shortestLength) {
+                indexToExpand = index;
+                break;
+            }
+        }
+        const prefix = labels[indexToExpand];
+        if (!prefix)
+            throw new Error("Unable to generate enough F-Mode labels");
+        labels.splice(indexToExpand, 1, ...characters.map((character) => `${prefix}${character}`));
+    }
+    return labels.slice(0, count);
+}
+export function createFModeEntries(targets, alphabet = DEFAULT_FMODE_ALPHABET) {
+    const labels = createHintLabels(targets.length, alphabet);
+    return targets.map((target, index) => ({
+        target,
+        hint: labels[index],
+        index,
+    }));
+}
+export function resolveFModeQuery(entries, query) {
+    const normalized = query.toLocaleLowerCase();
+    if (!normalized)
+        return { query: "", visible: entries };
+    const visible = entries.filter((entry) => entry.hint.startsWith(normalized));
+    return {
+        query: normalized,
+        visible,
+        exactMatch: visible.find((entry) => entry.hint === normalized),
+    };
+}
+export function normalizeFModeKey(key) {
+    return /^[a-z0-9]$/iu.test(key) ? key.toLocaleLowerCase() : null;
+}
+export function advanceFModeQuery(entries, currentQuery, nextKey) {
+    const normalizedKey = normalizeFModeKey(nextKey);
+    if (!normalizedKey) {
+        return {
+            accepted: false,
+            state: resolveFModeQuery(entries, currentQuery),
+        };
+    }
+    const nextState = resolveFModeQuery(entries, `${currentQuery}${normalizedKey}`);
+    return nextState.visible.length
+        ? { accepted: true, state: nextState }
+        : {
+            accepted: false,
+            state: resolveFModeQuery(entries, currentQuery),
+        };
+}

package/dist/shared/workspace/plugins/f-mode/index.d.ts

@@ -0,0 +1,6 @@
+export { default as FModeOverlay } from "./FModeOverlay.svelte";
+export { FModeSession } from "./f-mode-session.svelte.js";
+export { fModePlugin } from "./f-mode-plugin.js";
+export * from "./hint-labels.js";
+export * from "./settings.js";
+export type * from "./types.js";

package/dist/shared/workspace/plugins/f-mode/index.js

@@ -0,0 +1,5 @@
+export { default as FModeOverlay } from "./FModeOverlay.svelte";
+export { FModeSession } from "./f-mode-session.svelte.js";
+export { fModePlugin } from "./f-mode-plugin.js";
+export * from "./hint-labels.js";
+export * from "./settings.js";

package/dist/shared/workspace/plugins/f-mode/settings.d.ts

@@ -0,0 +1,17 @@
+import type { AppShellController } from "../../core/app-shell-controller.svelte.js";
+import type { WorkspaceSettingsSection } from "../../settings/types.js";
+import type { FModeHintTarget, FModeSettings, FModeTargetGroupDefinition } from "./types.js";
+export declare const FMODE_SETTING_IDS: {
+    readonly alphabet: "fmode.alphabet";
+    readonly enabledSurfaces: "fmode.enabledSurfaces";
+    readonly accentColor: "fmode.accentColor";
+    readonly showTargetLabels: "fmode.showTargetLabels";
+    readonly showTargetDescriptions: "fmode.showTargetDescriptions";
+    readonly hudMode: "fmode.hudMode";
+    readonly invalidInputBehavior: "fmode.invalidInputBehavior";
+};
+export declare const BUILT_IN_FMODE_TARGET_GROUPS: FModeTargetGroupDefinition[];
+export declare function createFModeTargetGroups(additional?: FModeTargetGroupDefinition[]): FModeTargetGroupDefinition[];
+export declare function createFModeSettingsSection(groups: FModeTargetGroupDefinition[]): WorkspaceSettingsSection;
+export declare function readFModeSettings(app: AppShellController, groups: FModeTargetGroupDefinition[]): FModeSettings;
+export declare function filterFModeTargets(targets: FModeHintTarget[], enabledSurfaces: string[]): FModeHintTarget[];

package/dist/shared/workspace/plugins/f-mode/settings.js

@@ -0,0 +1,130 @@
+import { DEFAULT_FMODE_ALPHABET, normalizeFModeAlphabet, } from "./hint-labels.js";
+export const FMODE_SETTING_IDS = {
+    alphabet: "fmode.alphabet",
+    enabledSurfaces: "fmode.enabledSurfaces",
+    accentColor: "fmode.accentColor",
+    showTargetLabels: "fmode.showTargetLabels",
+    showTargetDescriptions: "fmode.showTargetDescriptions",
+    hudMode: "fmode.hudMode",
+    invalidInputBehavior: "fmode.invalidInputBehavior",
+};
+export const BUILT_IN_FMODE_TARGET_GROUPS = [
+    { id: "tabs", label: "Tabs" },
+    { id: "view-header", label: "View headers" },
+    { id: "sidebar", label: "Sidebars" },
+    { id: "ribbon", label: "Ribbon" },
+    { id: "status", label: "Status bar" },
+];
+export function createFModeTargetGroups(additional = []) {
+    const groups = new Map(BUILT_IN_FMODE_TARGET_GROUPS.map((group) => [group.id, group]));
+    for (const group of additional)
+        groups.set(group.id, group);
+    return [...groups.values()];
+}
+export function createFModeSettingsSection(groups) {
+    const enabled = groups
+        .filter((group) => group.defaultEnabled !== false)
+        .map((group) => group.id);
+    return {
+        id: "fmode",
+        title: "F-Mode",
+        description: "Navigate visible shell actions from the keyboard.",
+        icon: "scan-search",
+        order: 200,
+        navigationGroupId: "core-plugins",
+        fields: [
+            {
+                id: FMODE_SETTING_IDS.enabledSurfaces,
+                title: "Enabled surfaces",
+                description: "Choose which hint target groups F-Mode includes.",
+                type: "multi-enum",
+                default: enabled,
+                options: groups.map((group) => ({
+                    value: group.id,
+                    label: group.label,
+                    description: group.description,
+                })),
+            },
+            {
+                id: FMODE_SETTING_IDS.alphabet,
+                title: "Hint alphabet",
+                description: "Unique alphanumeric keys used to build hint labels.",
+                type: "string",
+                default: DEFAULT_FMODE_ALPHABET,
+            },
+            {
+                id: FMODE_SETTING_IDS.accentColor,
+                title: "Accent colour",
+                description: "Leave empty to use the application accent.",
+                type: "string",
+                default: "",
+                placeholder: "Use application accent",
+            },
+            {
+                id: FMODE_SETTING_IDS.showTargetLabels,
+                title: "Show target labels",
+                type: "boolean",
+                default: true,
+            },
+            {
+                id: FMODE_SETTING_IDS.showTargetDescriptions,
+                title: "Show target descriptions",
+                type: "boolean",
+                default: false,
+            },
+            {
+                id: FMODE_SETTING_IDS.hudMode,
+                title: "HUD mode",
+                type: "enum",
+                default: "detailed",
+                options: [
+                    { value: "detailed", label: "Detailed" },
+                    { value: "compact", label: "Compact" },
+                    { value: "minimal", label: "Minimal" },
+                ],
+            },
+            {
+                id: FMODE_SETTING_IDS.invalidInputBehavior,
+                title: "Invalid input",
+                type: "enum",
+                default: "flash",
+                options: [
+                    { value: "flash", label: "Flash the HUD" },
+                    { value: "close", label: "Close F-Mode" },
+                ],
+            },
+        ],
+    };
+}
+function getValue(app, id, fallback) {
+    return app.configuration.get(id) ?? fallback;
+}
+export function readFModeSettings(app, groups) {
+    const configuredAlphabet = getValue(app, FMODE_SETTING_IDS.alphabet, DEFAULT_FMODE_ALPHABET);
+    const alphabet = normalizeFModeAlphabet(typeof configuredAlphabet === "string" ? configuredAlphabet : "").join("");
+    const permitted = new Set(groups.map((group) => group.id));
+    const configuredSurfaces = getValue(app, FMODE_SETTING_IDS.enabledSurfaces, groups.map((group) => group.id));
+    const enabledSurfaces = Array.isArray(configuredSurfaces)
+        ? [
+            ...new Set(configuredSurfaces.filter((value) => typeof value === "string" && permitted.has(value))),
+        ]
+        : groups.map((group) => group.id);
+    const hudMode = getValue(app, FMODE_SETTING_IDS.hudMode, "detailed");
+    const invalidInputBehavior = getValue(app, FMODE_SETTING_IDS.invalidInputBehavior, "flash");
+    return {
+        alphabet: alphabet || DEFAULT_FMODE_ALPHABET,
+        enabledSurfaces,
+        accentColor: String(getValue(app, FMODE_SETTING_IDS.accentColor, "")).trim(),
+        showTargetLabels: getValue(app, FMODE_SETTING_IDS.showTargetLabels, true) === true,
+        showTargetDescriptions: getValue(app, FMODE_SETTING_IDS.showTargetDescriptions, false) === true,
+        hudMode: hudMode === "compact" || hudMode === "minimal"
+            ? hudMode
+            : "detailed",
+        invalidInputBehavior: invalidInputBehavior === "close"
+            ? invalidInputBehavior
+            : "flash",
+    };
+}
+export function filterFModeTargets(targets, enabledSurfaces) {
+    return targets.filter((target) => !target.group || enabledSurfaces.includes(target.group));
+}

package/dist/shared/workspace/plugins/f-mode/types.d.ts

@@ -0,0 +1,24 @@
+import type { AppShellHintTarget, Hotkey } from "../../core/index.js";
+export type FModeHudMode = "compact" | "detailed" | "minimal";
+export type FModeInvalidInputBehavior = "flash" | "close";
+export interface FModeTargetGroupDefinition {
+    id: string;
+    label: string;
+    description?: string;
+    defaultEnabled?: boolean;
+}
+export interface FModeSettings {
+    alphabet: string;
+    enabledSurfaces: string[];
+    accentColor: string;
+    showTargetLabels: boolean;
+    showTargetDescriptions: boolean;
+    hudMode: FModeHudMode;
+    invalidInputBehavior: FModeInvalidInputBehavior;
+}
+export interface FModePluginOptions {
+    enabled?: boolean;
+    hotkeys?: Hotkey[];
+    targetGroups?: FModeTargetGroupDefinition[];
+}
+export type FModeHintTarget = AppShellHintTarget;

package/dist/shared/workspace/plugins/f-mode/types.js

@@ -0,0 +1 @@
+export {};

package/dist/shared/workspace/plugins/notifications/ControlledNotificationsStory.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+  import NotificationToasts from "./NotificationToasts.svelte";
+  import * as Dialog from "../../../shadcn/dialog/index.js";
+  import { Button } from "../../../shadcn/button/index.js";
+  import { untrack } from "svelte";
+  let { secondaryAction = false }: { secondaryAction?: boolean } = $props();
+  let open = $state(false);
+  let action = $state("");
+  let actionCount = $state(0);
+  let paused = $state(false);
+  let records = $state([
+    {
+      id: "info",
+      title: "Saved",
+      message: "The settings were saved.",
+      severity: "info" as const,
+    },
+    {
+      id: "warning",
+      title: "Connection interrupted",
+      message: "Existing content remains available.",
+      severity: "warning" as const,
+    },
+    {
+      id: "error",
+      title: "Request failed",
+      message: "Try the request again.",
+      severity: "error" as const,
+      action: {
+        id: "retry",
+        label: "Retry request",
+        ...untrack(() =>
+          secondaryAction ? { variant: "secondary" as const } : {},
+        ),
+      },
+    },
+  ]);
+</script>
+
+<Button onclick={() => (open = true)}>Open notification dialog</Button>
+<p>Action: {action || "none"}</p>
+<p>Actions: {actionCount}</p>
+<p>Timer: {paused ? "paused" : "running"}</p>
+<Dialog.Root bind:open>
+  <Dialog.Content>
+    <Dialog.Header>
+      <Dialog.Title>Notification test</Dialog.Title>
+      <Dialog.Description
+        >Notifications remain available while this dialog is open.</Dialog.Description
+      >
+    </Dialog.Header>
+    <Button onclick={() => (open = false)}>Finish</Button>
+  </Dialog.Content>
+</Dialog.Root>
+<NotificationToasts
+  {records}
+  portal
+  onDismiss={(id) => (records = records.filter((record) => record.id !== id))}
+  onAction={(id, actionId) => {
+    action = `${id}:${actionId}`;
+    actionCount++;
+  }}
+  onPause={() => (paused = true)}
+  onResume={() => (paused = false)}
+/>

package/dist/shared/workspace/plugins/notifications/ControlledNotificationsStory.svelte.d.ts

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    secondaryAction?: boolean;
+};
+declare const ControlledNotificationsStory: import("svelte").Component<$$ComponentProps, {}, "">;
+type ControlledNotificationsStory = ReturnType<typeof ControlledNotificationsStory>;
+export default ControlledNotificationsStory;

package/dist/shared/workspace/plugins/notifications/NotificationCenter.svelte

@@ -0,0 +1,225 @@
+<script lang="ts">
+  import type { AppShellController } from "../../core/app-shell-controller.svelte.js";
+  import type { NotificationRecord } from "../../core/notification-manager.svelte.js";
+  import WorkspaceIcon from "../../icon/WorkspaceIcon.svelte";
+  import type { NotificationPresentationState } from "./notification-presentation.svelte.js";
+  import { createNotificationStatusState } from "./notification-status-model.js";
+  import "./Notifications.css";
+
+  const STATUS_SELECTOR = "[data-status-bar-item-id='notifications:status']";
+  const PANEL_GAP = 6;
+  const PANEL_EDGE = 8;
+
+  let {
+    app,
+    presentation,
+    portalTarget,
+  }: {
+    app: AppShellController;
+    presentation: NotificationPresentationState;
+    portalTarget: HTMLElement;
+  } = $props();
+
+  let panel = $state<HTMLElement | null>(null);
+  let panelStyle = $state<string>();
+  let records = $derived(app.notifications.records);
+  let status = $derived(
+    createNotificationStatusState(records, app.notifications.activeProgress),
+  );
+  let empty = $derived(
+    records.length === 0 && status.backgroundTasks.length === 0,
+  );
+
+  function formatTime(record: NotificationRecord): string {
+    return new Date(record.updatedAt || record.createdAt).toLocaleTimeString();
+  }
+
+  function updatePosition(): void {
+    const anchor = portalTarget.querySelector<HTMLElement>(STATUS_SELECTOR);
+    if (!anchor) {
+      panelStyle = undefined;
+      return;
+    }
+    const anchorRect = anchor.getBoundingClientRect();
+    const surfaceRect = portalTarget.getBoundingClientRect();
+    const right = Math.max(PANEL_EDGE, surfaceRect.right - anchorRect.right);
+    const bottom = Math.max(
+      PANEL_EDGE,
+      surfaceRect.bottom - anchorRect.top + PANEL_GAP,
+    );
+    panelStyle = `right:${right}px;bottom:${bottom}px;`;
+  }
+
+  $effect(() => {
+    if (!presentation.centerOpen) return;
+    const unread = records.filter((record) => !record.read);
+    if (unread.length > 0) {
+      void Promise.all(
+        unread.map((record) => app.notifications.markRead(record.id)),
+      );
+    }
+  });
+
+  $effect(() => {
+    if (!presentation.centerOpen) return;
+    const document = portalTarget.ownerDocument;
+    const handlePointerDown = (event: PointerEvent) => {
+      const target = event.target;
+      if (
+        target instanceof Node &&
+        (panel?.contains(target) ||
+          (target instanceof Element &&
+            target.closest(STATUS_SELECTOR) !== null))
+      ) {
+        return;
+      }
+      presentation.close();
+    };
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") presentation.close();
+    };
+    document.addEventListener("pointerdown", handlePointerDown);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("pointerdown", handlePointerDown);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  });
+
+  $effect(() => {
+    if (!presentation.centerOpen) {
+      panelStyle = undefined;
+      return;
+    }
+    const document = portalTarget.ownerDocument;
+    const view = document.defaultView;
+    updatePosition();
+    view?.addEventListener("resize", updatePosition);
+    document.addEventListener("scroll", updatePosition, true);
+    return () => {
+      view?.removeEventListener("resize", updatePosition);
+      document.removeEventListener("scroll", updatePosition, true);
+    };
+  });
+</script>
+
+{#if presentation.centerOpen}
+  <div
+    bind:this={panel}
+    class="ui-workspace-notifications__center"
+    style={panelStyle}
+    role="dialog"
+    aria-modal="false"
+    aria-labelledby="ui-workspace-notification-center-title"
+    data-ui-component="workspace-notification-center"
+    data-ui-part="center"
+    data-notification-center
+  >
+    <header class="ui-workspace-notifications__center-header">
+      <h2 id="ui-workspace-notification-center-title">Notifications</h2>
+      <div class="ui-workspace-notifications__center-actions">
+        {#if records.length > 0}
+          <button
+            type="button"
+            class="ui-workspace-notifications__button"
+            onclick={() => void app.notifications.clearAll()}
+          >
+            Clear all
+          </button>
+        {/if}
+        <button
+          type="button"
+          class="ui-workspace-notifications__icon-button"
+          aria-label="Close notification center"
+          onclick={() => presentation.close()}
+        >
+          <span aria-hidden="true">×</span>
+        </button>
+      </div>
+    </header>
+
+    <div class="ui-workspace-notifications__center-scroll">
+      {#if empty}
+        <div class="ui-workspace-notifications__empty">
+          <WorkspaceIcon name="bell-off" />
+          <div>
+            <strong>No new notifications</strong>
+            <p>Updates and background progress will appear here.</p>
+          </div>
+        </div>
+      {:else}
+        {#if status.backgroundTasks.length > 0}
+          <section class="ui-workspace-notifications__section">
+            <h3>In progress</h3>
+            {#each status.backgroundTasks as task (task.id)}
+              <article
+                class="ui-workspace-notifications__row"
+                data-notification-progress-id={task.id}
+              >
+                <div class="ui-workspace-notifications__row-heading">
+                  <div>
+                    <strong>{task.title}</strong>
+                    {#if task.detail}<p>{task.detail}</p>{/if}
+                  </div>
+                  {#if task.cancellable}
+                    <button
+                      type="button"
+                      class="ui-workspace-notifications__button"
+                      disabled={task.cancelRequested}
+                      onclick={() => app.notifications.cancel(task.id)}
+                    >
+                      {task.cancelRequested ? "Cancelling" : "Cancel"}
+                    </button>
+                  {/if}
+                </div>
+                {#if typeof task.progress === "number"}
+                  <progress max="100" value={task.progress}>
+                    {task.progress}%
+                  </progress>
+                {:else}
+                  <div
+                    class="ui-workspace-notifications__indeterminate-progress"
+                    role="progressbar"
+                    aria-label={`${task.title} progress`}
+                  ></div>
+                {/if}
+              </article>
+            {/each}
+          </section>
+        {/if}
+
+        {#if records.length > 0}
+          <section class="ui-workspace-notifications__section">
+            <h3>History</h3>
+            {#each records as record (record.id)}
+              <article
+                class="ui-workspace-notifications__row"
+                class:ui-workspace-notifications__row--unread={!record.read}
+                data-notification-id={record.id}
+                data-severity={record.severity}
+              >
+                <div class="ui-workspace-notifications__row-heading">
+                  <div>
+                    <strong>{record.title ?? record.message}</strong>
+                    {#if record.title}<p>{record.message}</p>{/if}
+                  </div>
+                  <button
+                    type="button"
+                    class="ui-workspace-notifications__icon-button"
+                    aria-label={`Clear ${record.title ?? record.message}`}
+                    onclick={() => void app.notifications.clear(record.id)}
+                  >
+                    <span aria-hidden="true">×</span>
+                  </button>
+                </div>
+                <time datetime={new Date(record.updatedAt).toISOString()}>
+                  {formatTime(record)}
+                </time>
+              </article>
+            {/each}
+          </section>
+        {/if}
+      {/if}
+    </div>
+  </div>
+{/if}

package/dist/shared/workspace/plugins/notifications/NotificationCenter.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { AppShellController } from "../../core/app-shell-controller.svelte.js";
+import type { NotificationPresentationState } from "./notification-presentation.svelte.js";
+import "./Notifications.css";
+type $$ComponentProps = {
+    app: AppShellController;
+    presentation: NotificationPresentationState;
+    portalTarget: HTMLElement;
+};
+declare const NotificationCenter: import("svelte").Component<$$ComponentProps, {}, "">;
+type NotificationCenter = ReturnType<typeof NotificationCenter>;
+export default NotificationCenter;

package/dist/shared/workspace/plugins/notifications/NotificationStatus.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import type { AppShellController } from "../../core/app-shell-controller.svelte.js";
+  import WorkspaceIcon from "../../icon/WorkspaceIcon.svelte";
+  import type { NotificationPresentationState } from "./notification-presentation.svelte.js";
+  import { createNotificationStatusState } from "./notification-status-model.js";
+  import "./Notifications.css";
+
+  let {
+    app,
+    presentation,
+  }: {
+    app: AppShellController;
+    presentation: NotificationPresentationState;
+  } = $props();
+
+  let status = $derived(
+    createNotificationStatusState(
+      app.notifications.records,
+      app.notifications.activeProgress,
+    ),
+  );
+</script>
+
+<button
+  type="button"
+  class="ui-workspace-notifications__status"
+  class:ui-workspace-notifications__status--busy={status.hasProgress}
+  aria-label={status.hasProgress
+    ? status.progressTooltip
+    : status.historyTooltip}
+  aria-expanded={presentation.centerOpen}
+  aria-haspopup="dialog"
+  onclick={() => presentation.toggle()}
+>
+  <WorkspaceIcon name={status.hasProgress ? "loader-circle" : "bell"} />
+  {#if status.hasProgress}
+    <span>{status.progressLabel}</span>
+  {:else if status.unreadText}
+    <span>{status.unreadText}</span>
+  {/if}
+</button>

package/dist/shared/workspace/plugins/notifications/NotificationStatus.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { AppShellController } from "../../core/app-shell-controller.svelte.js";
+import type { NotificationPresentationState } from "./notification-presentation.svelte.js";
+import "./Notifications.css";
+type $$ComponentProps = {
+    app: AppShellController;
+    presentation: NotificationPresentationState;
+};
+declare const NotificationStatus: import("svelte").Component<$$ComponentProps, {}, "">;
+type NotificationStatus = ReturnType<typeof NotificationStatus>;
+export default NotificationStatus;