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

package/lib/index.d.ts

@@ -0,0 +1,21 @@
+export declare const name = "stack-profiles";
+export declare const version = "0.1.0";
+/**
+ * Host loader entry for the browser-only profile UI plugin: mounting it puts
+ * the package on the loader's entry list so the client-modules scanner picks
+ * up its `dsh.client` bundle.
+ */
+export declare function apply(): void;
+export declare const profileOptions: readonly [{
+    readonly id: "default";
+    readonly label: "Default";
+}, {
+    readonly id: "coding";
+    readonly label: "Coding";
+}, {
+    readonly id: "trading";
+    readonly label: "Trading";
+}, {
+    readonly id: "skyblock";
+    readonly label: "SkyBlock";
+}];

package/lib/index.js

@@ -0,0 +1,14 @@
+export const name = "stack-profiles";
+export const version = "0.1.0";
+/**
+ * Host loader entry for the browser-only profile UI plugin: mounting it puts
+ * the package on the loader's entry list so the client-modules scanner picks
+ * up its `dsh.client` bundle.
+ */
+export function apply() { }
+export const profileOptions = [
+    { id: "default", label: "Default" },
+    { id: "coding", label: "Coding" },
+    { id: "trading", label: "Trading" },
+    { id: "skyblock", label: "SkyBlock" },
+];

package/package.json

@@ -1,6 +1,73 @@
 {
   "name": "@dsh-stack/profile-ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.1",
+  "type": "module",
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "default": "./lib/index.js"
+    },
+    "./client": {
+      "types": "./lib/client/index.d.ts",
+      "default": "./lib/client.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "dsh": {
+    "client": {
+      "inject": [
+        "@deepseek-ai/dsh-client-ui-slots",
+        "@deepseek-ai/dsh-client-ui-renderer",
+        "@deepseek-ai/dsh-client-ui-sidebar",
+        "@deepseek-ai/dsh-client-ui-settings",
+        "@deepseek-ai/dsh-client-locale",
+        "@deepseek-ai/dsh-client-ui-primitives"
+      ],
+      "platform": "web"
+    }
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json && tsdown",
+    "typecheck": "tsc -p tsconfig.typecheck.json --noEmit"
+  },
+  "dependencies": {
+    "@dsh-stack/lucide-animated": "0.1.1",
+    "@dsh-stack/profile-runtime": "0.1.1",
+    "@dsh-stack/settings-panel": "0.1.1"
+  },
+  "peerDependencies": {
+    "@deepseek-ai/cordis": "^4.0.1",
+    "@deepseek-ai/dsh-client-locale": "0.2.0-rc.2",
+    "@deepseek-ai/dsh-client-ui-primitives": "0.2.0-rc.2",
+    "@deepseek-ai/dsh-client-ui-renderer": "0.2.0-rc.2",
+    "@deepseek-ai/dsh-client-ui-settings": "0.2.0-rc.2",
+    "@deepseek-ai/dsh-client-ui-sidebar": "0.2.0-rc.2",
+    "@deepseek-ai/dsh-client-ui-slots": "0.2.0-rc.2",
+    "react": "^18.2.0"
+  },
+  "devDependencies": {
+    "@deepseek-ai/cordis": "^4.0.1",
+    "@deepseek-ai/dsh-client-ui-primitives": "0.2.0-rc.2",
+    "@deepseek-ai/dsh-client-ui-renderer": "0.2.0-rc.2",
+    "@deepseek-ai/dsh-client-ui-settings": "0.2.0-rc.2",
+    "@deepseek-ai/dsh-client-ui-sidebar": "0.2.0-rc.2",
+    "@deepseek-ai/dsh-client-ui-slots": "0.2.0-rc.2",
+    "@types/react": "~18.3.1",
+    "react": "^18.3.1",
+    "typescript": "^6.0.3"
+  },
+  "stack": {
+    "kind": "plugin",
+    "id": "stack.ui.profile"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/marius-patrik/dsh-stack.git",
+    "directory": "plugins/profile-ui"
+  }
+}

package/src/client/index.tsx

@@ -0,0 +1,130 @@
+import { useState } from "react";
+import { Menu } from "@deepseek-ai/dsh-client-ui-primitives";
+import type { Context as ClientContext } from "@deepseek-ai/cordis";
+import type { SettingsSectionOwnerProps } from "@deepseek-ai/dsh-client-ui-settings/client";
+import type { SidebarFooterActionOwnerProps } from "@deepseek-ai/dsh-client-ui-sidebar/client";
+import type {} from "@deepseek-ai/dsh-client-ui-settings/client";
+// Type-only: pulls the SlotRegistry service merge (ctx.slots).
+import type {} from "@deepseek-ai/dsh-client-ui-renderer/client";
+import type {} from "@deepseek-ai/dsh-client-ui-sidebar/client";
+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 }: SidebarFooterActionOwnerProps) {
+  const [open, setOpen] = useState(false);
+  const active = runtime.getActive();
+  const activeOption = profileOptions.find((option) => option.id === active) ?? profileOptions[0]!;
+  return (
+    <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
+      portal
+      anchor={
+        <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",
+          }}
+        >
+          <SettingsIcon aria-hidden="true" size={18} />
+          {wide ? (
+            <span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
+              {activeOption.label}
+            </span>
+          ) : null}
+        </button>
+      }
+    />
+  );
+}
+
+/** Render the profile selection section inside the settings surface. */
+function ProfileSettings({ close }: SettingsSectionOwnerProps) {
+  const [active, setActive] = useState(runtime.getActive());
+  return (
+    <SettingsSection
+      label="Profiles"
+      title="Profiles"
+      description="Switch the active Stack composition. The new profile is applied after the interface reloads."
+      onClose={close}
+    >
+      {profileOptions.map((option) => (
+        <SettingsOptionRow
+          key={option.id}
+          label={option.label}
+          selected={option.id === active}
+          onSelect={() => {
+            setActive(option.id);
+            runtime.setActive(option.id);
+          }}
+          selectedMark={<CheckIcon aria-hidden="true" size={18} />}
+        />
+      ))}
+    </SettingsSection>
+  );
+}
+
+/** Renders the Profiles section's nav glyph from the canonical animated icon set. */
+function ProfileSettingsIcon() {
+  return <LayersIcon aria-hidden="true" size={16} />;
+}
+
+/** Mount the profile selector and settings section into the client slot registry. */
+export function apply(ctx: ClientContext): void {
+  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,
+    ),
+  );
+}

package/src/index.ts

@@ -0,0 +1,16 @@
+export const name = "stack-profiles";
+export const version = "0.1.0";
+
+/**
+ * Host loader entry for the browser-only profile UI plugin: mounting it puts
+ * the package on the loader's entry list so the client-modules scanner picks
+ * up its `dsh.client` bundle.
+ */
+export function apply(): void {}
+
+export const profileOptions = [
+  { id: "default", label: "Default" },
+  { id: "coding", label: "Coding" },
+  { id: "trading", label: "Trading" },
+  { id: "skyblock", label: "SkyBlock" },
+] as const;

package/src/types.d.ts

@@ -0,0 +1 @@
+declare module "katex/dist/katex.min.css";

package/stack.json

@@ -0,0 +1,10 @@
+{
+  "id": "stack.ui.profile",
+  "name": "@dsh-stack/profile-ui",
+  "version": "0.1.1",
+  "kind": "plugin",
+  "description": "@dsh-stack/profile-ui",
+  "files": ["lib", "README.md", "package.json", "stack.json"],
+  "dependencies": [],
+  "optionalDependencies": []
+}

package/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "lib": ["ES2023", "DOM"],
+    "jsx": "react-jsx",
+    "outDir": "lib",
+    "rootDir": "src"
+  },
+  "include": ["src"]
+}