@lapismd/design-core 0.1.0

package/src/shared/workspace/plugins/f-mode/settings.ts

@@ -0,0 +1,191 @@
+import type { AppShellController } from "../../core/app-shell-controller.svelte.js";
+import type { WorkspaceSettingsSection } from "../../settings/types.js";
+import {
+  DEFAULT_FMODE_ALPHABET,
+  normalizeFModeAlphabet,
+} from "./hint-labels.js";
+import type {
+  FModeHintTarget,
+  FModeHudMode,
+  FModeInvalidInputBehavior,
+  FModeSettings,
+  FModeTargetGroupDefinition,
+} from "./types.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",
+} as const;
+
+export const BUILT_IN_FMODE_TARGET_GROUPS: FModeTargetGroupDefinition[] = [
+  { 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: FModeTargetGroupDefinition[] = [],
+): FModeTargetGroupDefinition[] {
+  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: FModeTargetGroupDefinition[],
+): WorkspaceSettingsSection {
+  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<T>(app: AppShellController, id: string, fallback: T): T {
+  return app.configuration.get<T>(id) ?? fallback;
+}
+
+export function readFModeSettings(
+  app: AppShellController,
+  groups: FModeTargetGroupDefinition[],
+): FModeSettings {
+  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<unknown>(
+    app,
+    FMODE_SETTING_IDS.enabledSurfaces,
+    groups.map((group) => group.id),
+  );
+  const enabledSurfaces = Array.isArray(configuredSurfaces)
+    ? [
+        ...new Set(
+          configuredSurfaces.filter(
+            (value): value is string =>
+              typeof value === "string" && permitted.has(value),
+          ),
+        ),
+      ]
+    : groups.map((group) => group.id);
+  const hudMode = getValue<unknown>(app, FMODE_SETTING_IDS.hudMode, "detailed");
+  const invalidInputBehavior = getValue<unknown>(
+    app,
+    FMODE_SETTING_IDS.invalidInputBehavior,
+    "flash",
+  );
+  return {
+    alphabet: alphabet || DEFAULT_FMODE_ALPHABET,
+    enabledSurfaces,
+    accentColor: String(
+      getValue(app, FMODE_SETTING_IDS.accentColor, ""),
+    ).trim(),
+    showTargetLabels:
+      getValue<boolean>(app, FMODE_SETTING_IDS.showTargetLabels, true) === true,
+    showTargetDescriptions:
+      getValue<boolean>(
+        app,
+        FMODE_SETTING_IDS.showTargetDescriptions,
+        false,
+      ) === true,
+    hudMode:
+      hudMode === "compact" || hudMode === "minimal"
+        ? (hudMode as FModeHudMode)
+        : "detailed",
+    invalidInputBehavior:
+      invalidInputBehavior === "close"
+        ? (invalidInputBehavior as FModeInvalidInputBehavior)
+        : "flash",
+  };
+}
+
+export function filterFModeTargets(
+  targets: FModeHintTarget[],
+  enabledSurfaces: string[],
+): FModeHintTarget[] {
+  return targets.filter(
+    (target) => !target.group || enabledSurfaces.includes(target.group),
+  );
+}

package/src/shared/workspace/plugins/f-mode/types.ts

@@ -0,0 +1,29 @@
+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/src/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/src/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/src/shared/workspace/plugins/notifications/NotificationToasts.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import type { AppShellController } from "../../core/app-shell-controller.svelte.js";
+  import "./Notifications.css";
+
+  let { app }: { app: AppShellController } = $props();
+  let records = $derived(app.notifications.transient);
+</script>
+
+<div
+  class="ui-workspace-notifications__toasts"
+  aria-label="Notifications"
+  aria-live="polite"
+  role="region"
+  data-ui-component="workspace-notification-toasts"
+  data-notification-toasts
+>
+  {#each records as record (record.id)}
+    <section
+      class="ui-workspace-notifications__toast"
+      data-ui-part="toast"
+      data-severity={record.severity}
+      data-notification-id={record.id}
+      role={record.severity === "error" ? "alert" : "status"}
+    >
+      <span class="ui-workspace-notifications__severity" aria-hidden="true"
+      ></span>
+      <div class="ui-workspace-notifications__toast-content">
+        {#if record.title}<strong>{record.title}</strong>{/if}
+        <span>{record.message}</span>
+      </div>
+      <button
+        type="button"
+        class="ui-workspace-notifications__icon-button"
+        aria-label={`Dismiss ${record.title ?? record.message}`}
+        onclick={() => app.notifications.dismiss(record.id)}
+      >
+        <span aria-hidden="true">×</span>
+      </button>
+    </section>
+  {/each}
+</div>