@lapismd/design-core 0.2.0 → 0.3.1

package/dist/shared/workspace/settings/AppShellPluginsSettings.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+  import { Switch } from "@lapismd/design-core/shadcn/switch";
+  import type { AppShellController } from "../core/app-shell-controller.svelte.js";
+  import WorkspaceIcon from "../icon/WorkspaceIcon.svelte";
+  import { findPluginSettingsSection } from "./plugin-settings-target.js";
+
+  let { app }: { app: AppShellController } = $props();
+  let busy = $state<string | null>(null);
+  let included = $derived(
+    app.managedPlugins.states.filter(
+      (plugin) => plugin.distribution === "bundled",
+    ),
+  );
+  let firstParty = $derived(
+    app.managedPlugins.states.filter(
+      (plugin) => plugin.distribution === "first-party-external",
+    ),
+  );
+
+  async function toggle(key: string, enabled: boolean) {
+    busy = key;
+    try {
+      if (enabled) await app.managedPlugins.disable(key);
+      else await app.managedPlugins.enable(key);
+    } finally {
+      busy = null;
+    }
+  }
+
+  function openPluginSettings(pluginId: string) {
+    const section = findPluginSettingsSection(app.settings.sections, pluginId);
+    if (!section) return;
+    app.settings.selectSection(section.id);
+  }
+</script>
+
+{#snippet pluginList(plugins: typeof app.managedPlugins.states)}
+  <div class="ui-workspace-plugins">
+    {#each plugins as plugin (plugin.key)}
+      {@const settingsSection = findPluginSettingsSection(
+        app.settings.sections,
+        plugin.id,
+      )}
+      <article data-settings-plugin-id={plugin.id}>
+        <div class="ui-workspace-plugins__icon">
+          <WorkspaceIcon name={plugin.icon ?? "puzzle"} />
+        </div>
+        <div>
+          <div class="ui-workspace-plugins__title">
+            <strong>{plugin.name}</strong>
+            {#if plugin.required}
+              <span class="ui-workspace-plugins__badge">Required</span>
+            {/if}
+          </div>
+          {#if plugin.description}<p>{plugin.description}</p>{/if}
+          <span data-status={plugin.status}>{plugin.status}</span>
+          {#if plugin.error}
+            <span class="ui-workspace-plugins__error" role="alert"
+              >{String(plugin.error)}</span
+            >
+          {/if}
+        </div>
+        <div class="ui-workspace-plugins__actions">
+          {#if settingsSection}
+            <button
+              type="button"
+              class="ui-workspace-plugins__settings"
+              aria-label={`Open ${plugin.name} settings`}
+              title="Options"
+              onclick={() => openPluginSettings(plugin.id)}
+            >
+              <WorkspaceIcon name="settings" />
+            </button>
+          {/if}
+          <Switch
+            aria-label={`Enable ${plugin.name}`}
+            checked={plugin.enabled}
+            disabled={plugin.required || busy === plugin.key}
+            onCheckedChange={() => toggle(plugin.key, plugin.enabled)}
+          />
+        </div>
+      </article>
+    {/each}
+  </div>
+{/snippet}
+
+<section class="ui-workspace-settings-page">
+  <header>
+    <h1>Core plugins</h1>
+    <p>Enable or disable the statically registered application extensions.</p>
+  </header>
+  {#if included.length > 0}
+    <section class="ui-workspace-plugins-group">
+      <h2>Included plugins</h2>
+      {@render pluginList(included)}
+    </section>
+  {/if}
+  {#if firstParty.length > 0}
+    <section class="ui-workspace-plugins-group">
+      <h2>First-party plugins</h2>
+      {@render pluginList(firstParty)}
+    </section>
+  {/if}
+</section>

package/dist/shared/workspace/settings/AppShellPluginsSettings.svelte.d.ts

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

package/dist/shared/workspace/settings/CopyableValue.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+  import { onDestroy } from "svelte";
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import WorkspaceIcon from "../icon/WorkspaceIcon.svelte";
+  import { shortenCopyableValue } from "./copyable-value.js";
+
+  let {
+    value,
+    label = "value",
+    emptyLabel = "None",
+    leadingCharacters = 8,
+    trailingCharacters = 4,
+    class: className,
+    testId,
+  }: {
+    value?: string | null;
+    label?: string;
+    emptyLabel?: string;
+    leadingCharacters?: number;
+    trailingCharacters?: number;
+    class?: string;
+    testId?: string;
+  } = $props();
+
+  let copied = $state(false);
+  let failed = $state(false);
+  let resetTimer: ReturnType<typeof setTimeout> | undefined;
+  let displayValue = $derived(
+    value
+      ? shortenCopyableValue(value, leadingCharacters, trailingCharacters)
+      : emptyLabel,
+  );
+
+  onDestroy(() => {
+    if (resetTimer) clearTimeout(resetTimer);
+  });
+
+  async function copy(): Promise<void> {
+    if (!value) return;
+    copied = false;
+    failed = false;
+    try {
+      const clipboard = globalThis.navigator?.clipboard;
+      if (!clipboard?.writeText) throw new Error("Clipboard is unavailable");
+      await clipboard.writeText(value);
+      copied = true;
+    } catch {
+      failed = true;
+    }
+    if (resetTimer) clearTimeout(resetTimer);
+    resetTimer = setTimeout(() => {
+      copied = false;
+      failed = false;
+    }, 1_500);
+  }
+</script>
+
+{#if value}
+  <Button
+    class={["ui-workspace-copyable-value", className].filter(Boolean).join(" ")}
+    variant="ghost"
+    size="xs"
+    aria-label={`Copy full ${label}: ${value}`}
+    title={`Copy full ${label}`}
+    data-testid={testId}
+    data-copied={copied || undefined}
+    data-copy-failed={failed || undefined}
+    onclick={() => void copy()}
+  >
+    <code>{displayValue}</code>
+    <WorkspaceIcon
+      name={copied ? "check" : failed ? "triangle-alert" : "copy"}
+    />
+  </Button>
+{:else}
+  <span
+    class={["ui-workspace-copyable-value__empty", className]
+      .filter(Boolean)
+      .join(" ")}>{displayValue}</span
+  >
+{/if}

package/dist/shared/workspace/settings/CopyableValue.svelte.d.ts

@@ -0,0 +1,12 @@
+type $$ComponentProps = {
+    value?: string | null;
+    label?: string;
+    emptyLabel?: string;
+    leadingCharacters?: number;
+    trailingCharacters?: number;
+    class?: string;
+    testId?: string;
+};
+declare const CopyableValue: import("svelte").Component<$$ComponentProps, {}, "">;
+type CopyableValue = ReturnType<typeof CopyableValue>;
+export default CopyableValue;

package/dist/shared/workspace/settings/DeclarativeSettingsSection.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import AppSettingsRoot from "./AppSettingsRoot.svelte";
+  import AppSettingsSection from "./AppSettingsSection.svelte";
+  import type { WorkspaceSettingsController } from "./settings-controller.svelte.js";
+  import type { WorkspaceSettingsSection } from "./types.js";
+
+  let {
+    controller,
+    section,
+    class: className = "",
+  }: {
+    controller: WorkspaceSettingsController;
+    section: WorkspaceSettingsSection;
+    class?: string;
+  } = $props();
+</script>
+
+<AppSettingsRoot {controller} class={className}>
+  <AppSettingsSection {section} />
+</AppSettingsRoot>

package/dist/shared/workspace/settings/DeclarativeSettingsSection.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { WorkspaceSettingsController } from "./settings-controller.svelte.js";
+import type { WorkspaceSettingsSection } from "./types.js";
+type $$ComponentProps = {
+    controller: WorkspaceSettingsController;
+    section: WorkspaceSettingsSection;
+    class?: string;
+};
+declare const DeclarativeSettingsSection: import("svelte").Component<$$ComponentProps, {}, "">;
+type DeclarativeSettingsSection = ReturnType<typeof DeclarativeSettingsSection>;
+export default DeclarativeSettingsSection;

package/dist/shared/workspace/settings/WorkspaceSettingAddButton.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import WorkspaceIcon from "../icon/WorkspaceIcon.svelte";
+
+  let {
+    label,
+    disabled = false,
+    onclick,
+  }: {
+    label: string;
+    disabled?: boolean;
+    onclick: () => void;
+  } = $props();
+</script>
+
+<button
+  type="button"
+  class="ui-workspace-setting-add"
+  data-ui-part="setting-add"
+  {disabled}
+  {onclick}
+>
+  <WorkspaceIcon name="plus" />
+  {label}
+</button>

package/dist/shared/workspace/settings/WorkspaceSettingAddButton.svelte.d.ts

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    label: string;
+    disabled?: boolean;
+    onclick: () => void;
+};
+declare const WorkspaceSettingAddButton: import("svelte").Component<$$ComponentProps, {}, "">;
+type WorkspaceSettingAddButton = ReturnType<typeof WorkspaceSettingAddButton>;
+export default WorkspaceSettingAddButton;