@dsh-stack/profile-ui 0.0.0-stage → 0.1.0

package/README.md

@@ -1,3 +1,3 @@
-# Temporary Holding Version
+# profile-ui
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+User interface components for selecting and managing Stack profiles.

package/lib/client/index.d.ts

@@ -0,0 +1,4 @@
+import type { Context as ClientContext } from "@deepseek-ai/cordis";
+export declare const inject: string[];
+/** Mount the profile selector and settings section into the client slot registry. */
+export declare function apply(ctx: ClientContext): void;

package/lib/client/index.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Menu } from "@deepseek-ai/dsh-client-ui-primitives";
+import { SETTINGS_SECTION_ICON_SLOT, SettingsSection, SettingsOptionRow, } from "@dsh-stack/settings-panel";
+import { CheckIcon, LayersIcon, SettingsIcon } from "@dsh-stack/lucide-animated/client";
+import { createProfileRuntime } from "@dsh-stack/profile-runtime";
+import { profileOptions } from "../index.js";
+const runtime = createProfileRuntime(profileOptions, { reload: () => window.location.reload() });
+export const inject = ["slots"];
+/** Render the compact or expanded profile selector in the sidebar footer. */
+function ProfileSelector({ wide }) {
+    const [open, setOpen] = useState(false);
+    const active = runtime.getActive();
+    const activeOption = profileOptions.find((option) => option.id === active) ?? profileOptions[0];
+    return (_jsx(Menu, { open: open, onClose: () => setOpen(false), items: profileOptions.map((option) => ({ id: option.id, label: option.label })), selectedIds: [activeOption.id], onSelect: (id) => {
+            setOpen(false);
+            runtime.setActive(id);
+        }, align: "start", dense: true, portal: true, anchor: _jsxs("button", { type: "button", "aria-label": "Switch profile", "aria-haspopup": "menu", "aria-expanded": open, onClick: () => setOpen((value) => !value), title: activeOption.label, style: {
+                width: "100%",
+                minHeight: 34,
+                display: "flex",
+                alignItems: "center",
+                gap: 8,
+                padding: wide ? "0 10px" : 0,
+                justifyContent: wide ? "flex-start" : "center",
+                border: 0,
+                borderRadius: 8,
+                background: "transparent",
+                color: "inherit",
+                cursor: "pointer",
+                font: "inherit",
+            }, children: [_jsx(SettingsIcon, { "aria-hidden": "true", size: 18 }), wide ? (_jsx("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: activeOption.label })) : null] }) }));
+}
+/** Render the profile selection section inside the settings surface. */
+function ProfileSettings({ close }) {
+    const [active, setActive] = useState(runtime.getActive());
+    return (_jsx(SettingsSection, { label: "Profiles", title: "Profiles", description: "Switch the active Stack composition. The new profile is applied after the interface reloads.", onClose: close, children: profileOptions.map((option) => (_jsx(SettingsOptionRow, { label: option.label, selected: option.id === active, onSelect: () => {
+                setActive(option.id);
+                runtime.setActive(option.id);
+            }, selectedMark: _jsx(CheckIcon, { "aria-hidden": "true", size: 18 }) }, option.id))) }));
+}
+/** Renders the Profiles section's nav glyph from the canonical animated icon set. */
+function ProfileSettingsIcon() {
+    return _jsx(LayersIcon, { "aria-hidden": "true", size: 16 });
+}
+/** Mount the profile selector and settings section into the client slot registry. */
+export function apply(ctx) {
+    ctx.slots.inject("sidebar.footer.action", () => ctx.slots.register({ name: "sidebar.footer.action", id: "profiles" }, ProfileSelector));
+    ctx.slots.inject("settings.section", () => ctx.slots.register({
+        name: "settings.section",
+        id: "profiles",
+        order: 40,
+        label: "Profiles",
+        inject: () => ({}),
+    }, ProfileSettings));
+    ctx.slots.inject(SETTINGS_SECTION_ICON_SLOT, () => ctx.slots.register({ name: SETTINGS_SECTION_ICON_SLOT, id: "profiles", order: 0 }, ProfileSettingsIcon));
+}