@hadoku/task-ui-components 4.22.3 → 4.22.4

package/dist/app-header.css

@@ -112,12 +112,6 @@
   color: var(--color-text);
 }
 
-/* Divider above the optional app-specific settings section. */
-.settings-popout__app {
-  border-top: 1px solid var(--color-border);
-  padding-top: 12px;
-}
-
 .settings-popout__header {
   font-weight: 600;
   font-size: 0.95rem;

package/dist/components/AppHeader.d.ts

@@ -30,13 +30,13 @@
  * // once, at the app root:
  * <HadokuThemeRoot>
  *   <AppHeader title="Print Tool" status={<ApiStatus status={apiStatus} />}>
- *     <MyAppPreferences />   // optional: appended AFTER the canonical rows
+ *     <MyAppPreferences />   // optional: the "App" tab, after the site's tabs
  *   </AppHeader>
  * </HadokuThemeRoot>
  * ```
  */
 import React from 'react';
-import { type ConnectedSettingsProps } from './ConnectedSettings';
+import { type AppSettingsTab, type ConnectedSettingsProps } from './ConnectedSettings';
 export interface AppHeaderProps {
     /** Left-aligned header title. A string is wrapped in an <h1>; pass a node for
      *  custom markup (e.g. a clickable title button). */
@@ -48,14 +48,17 @@ export interface AppHeaderProps {
      *  `name` exist because an app behind a path-prefixed shim may not be able to
      *  reach `/session/whoami` (conjure), NOT as a styling or layout hook. */
     settingsProps?: ConnectedSettingsProps;
-    /** THE app-specific extension point. Rendered inside the settings popout as a
-     *  final section, under the four canonical rows. Put your app's own
-     *  preferences here — checkboxes, selects, whatever it needs; this slot is
-     *  deliberately unconstrained. What it cannot do is alter the rows above it. */
+    /** THE app-specific extension point. Rendered inside the settings popout as
+     *  one "App" tab, after the site's own tabs. Put your app's own preferences
+     *  here — checkboxes, selects, whatever it needs; this slot is deliberately
+     *  unconstrained. What it cannot do is alter the site's tabs. */
     children?: React.ReactNode;
+    /** The same, split into tabs of the app's own: one per entry, after the
+     *  "App" tab if `children` is also given. See AppSettingsTab. */
+    appTabs?: AppSettingsTab[];
     /** Extra class on the <header> root. Layout only — it cannot reach the
      *  controls, which own their own markup. */
     className?: string;
 }
-export declare function AppHeader({ title, status, settingsProps, children, className }: AppHeaderProps): React.JSX.Element;
+export declare function AppHeader({ title, status, settingsProps, children, appTabs, className }: AppHeaderProps): React.JSX.Element;
 //# sourceMappingURL=AppHeader.d.ts.map

package/dist/components/AppHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppHeader.d.ts","sourceRoot":"","sources":["../../src/components/AppHeader.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAqB,KAAK,sBAAsB,EAAE,MAAM,qBAAqB,CAAA;AAGpF,MAAM,WAAW,cAAc;IAC7B;yDACqD;IACrD,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB;gFAC4E;IAC5E,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB;;8EAE0E;IAC1E,aAAa,CAAC,EAAE,sBAAsB,CAAA;IACtC;;;oFAGgF;IAChF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B;gDAC4C;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,MAAM,EACN,aAAa,EACb,QAAQ,EACR,SAAc,EACf,EAAE,cAAc,qBAkBhB"}
+{"version":3,"file":"AppHeader.d.ts","sourceRoot":"","sources":["../../src/components/AppHeader.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAEL,KAAK,cAAc,EACnB,KAAK,sBAAsB,EAC5B,MAAM,qBAAqB,CAAA;AAG5B,MAAM,WAAW,cAAc;IAC7B;yDACqD;IACrD,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB;gFAC4E;IAC5E,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB;;8EAE0E;IAC1E,aAAa,CAAC,EAAE,sBAAsB,CAAA;IACtC;;;qEAGiE;IACjE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B;qEACiE;IACjE,OAAO,CAAC,EAAE,cAAc,EAAE,CAAA;IAC1B;gDAC4C;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,MAAM,EACN,aAAa,EACb,QAAQ,EACR,OAAO,EACP,SAAc,EACf,EAAE,cAAc,qBAoBhB"}

package/dist/components/AppHeader.js

@@ -6,6 +6,7 @@ function AppHeader({
   status,
   settingsProps,
   children,
+  appTabs,
   className = ""
 }) {
   return /* @__PURE__ */ jsxs("header", { className: `app-header ${className}`.trim(), children: [
@@ -13,7 +14,7 @@ function AppHeader({
     /* @__PURE__ */ jsxs("div", { className: "app-header__actions", children: [
       status,
       /* @__PURE__ */ jsx(HadokuThemePicker, {}),
-      /* @__PURE__ */ jsx(ConnectedSettings, { ...settingsProps, children })
+      /* @__PURE__ */ jsx(ConnectedSettings, { ...settingsProps, appTabs, children })
     ] })
   ] });
 }

package/dist/components/AppHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppHeader.js","sources":["../../src/components/AppHeader.tsx"],"sourcesContent":["/**\n * AppHeader — the ecosystem-standard top bar for every hadoku.me app.\n *\n * Enforces the shared contract so child apps stop drifting:\n *   [ title (left) ] ————— <space> ————— [ status? · ThemePicker · Settings gear ] (right)\n *\n * Everything BELOW the header is the app's own concern. The header owns the\n * title, and it OWNS both right-hand controls outright — it renders the theme\n * picker and the settings gear itself. Neither is a prop.\n *\n * WHY THEY ARE NOT PROPS ANY MORE\n * -------------------------------\n * `themePicker?: React.ReactNode` was an open hole: a slot that accepts a node\n * accepts ANY node, so \"every app uses the same picker\" was a convention, and\n * conventions drift. They did — one app passed a raw `<ThemePicker>` with its\n * own `isOpen` state and a debug logger wired into `getThemeIcon`, and eight\n * apps each kept a hand-copied `useTheme` hook to feed it. Those copies had\n * already diverged on real behaviour (only one wrote `localStorage`, so the\n * rest lost the theme on browser restart and flashed a default on next paint).\n *\n * The control is now rendered here, from `useHadokuTheme()`. An app cannot\n * substitute, restyle or omit it. What an app CAN do is inject its own\n * preferences — see `children`.\n *\n * @example\n * ```tsx\n * import { AppHeader } from '@wolffm/task-ui-components'\n * import { HadokuThemeRoot } from '@wolffm/themes'\n *\n * // once, at the app root:\n * <HadokuThemeRoot>\n *   <AppHeader title=\"Print Tool\" status={<ApiStatus status={apiStatus} />}>\n *     <MyAppPreferences />   // optional: appended AFTER the canonical rows\n *   </AppHeader>\n * </HadokuThemeRoot>\n * ```\n */\nimport React from 'react'\nimport { ConnectedSettings, type ConnectedSettingsProps } from './ConnectedSettings'\nimport { HadokuThemePicker } from './HadokuThemePicker'\n\nexport interface AppHeaderProps {\n  /** Left-aligned header title. A string is wrapped in an <h1>; pass a node for\n   *  custom markup (e.g. a clickable title button). */\n  title: React.ReactNode\n  /** Optional status/extra node shown left of the theme + settings controls\n   *  (e.g. an \"API Online\" indicator). Acceptable per the header contract. */\n  status?: React.ReactNode\n  /** Identity hints for the settings popout. Narrow on purpose: `userType` and\n   *  `name` exist because an app behind a path-prefixed shim may not be able to\n   *  reach `/session/whoami` (conjure), NOT as a styling or layout hook. */\n  settingsProps?: ConnectedSettingsProps\n  /** THE app-specific extension point. Rendered inside the settings popout as a\n   *  final section, under the four canonical rows. Put your app's own\n   *  preferences here — checkboxes, selects, whatever it needs; this slot is\n   *  deliberately unconstrained. What it cannot do is alter the rows above it. */\n  children?: React.ReactNode\n  /** Extra class on the <header> root. Layout only — it cannot reach the\n   *  controls, which own their own markup. */\n  className?: string\n}\n\nexport function AppHeader({\n  title,\n  status,\n  settingsProps,\n  children,\n  className = ''\n}: AppHeaderProps) {\n  // No useHadokuTheme() call here: <HadokuThemePicker> reads the context and\n  // throws its own actionable error when the app root was never wrapped, so a\n  // second read would only duplicate that.\n  return (\n    <header className={`app-header ${className}`.trim()}>\n      {typeof title === 'string' ? (\n        <h1 className=\"app-header__title\">{title}</h1>\n      ) : (\n        <div className=\"app-header__title\">{title}</div>\n      )}\n      <div className=\"app-header__actions\">\n        {status}\n        <HadokuThemePicker />\n        <ConnectedSettings {...settingsProps}>{children}</ConnectedSettings>\n      </div>\n    </header>\n  )\n}\n"],"names":[],"mappings":";;;AA8DO,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AACd,GAAmB;AAIjB,8BACG,UAAA,EAAO,WAAW,cAAc,SAAS,GAAG,QAC1C,UAAA;AAAA,IAAA,OAAO,UAAU,WAChB,oBAAC,MAAA,EAAG,WAAU,qBAAqB,UAAA,MAAA,CAAM,IAEzC,oBAAC,OAAA,EAAI,WAAU,qBAAqB,UAAA,OAAM;AAAA,IAE5C,qBAAC,OAAA,EAAI,WAAU,uBACZ,UAAA;AAAA,MAAA;AAAA,0BACA,mBAAA,EAAkB;AAAA,MACnB,oBAAC,mBAAA,EAAmB,GAAG,eAAgB,SAAA,CAAS;AAAA,IAAA,EAAA,CAClD;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"AppHeader.js","sources":["../../src/components/AppHeader.tsx"],"sourcesContent":["/**\n * AppHeader — the ecosystem-standard top bar for every hadoku.me app.\n *\n * Enforces the shared contract so child apps stop drifting:\n *   [ title (left) ] ————— <space> ————— [ status? · ThemePicker · Settings gear ] (right)\n *\n * Everything BELOW the header is the app's own concern. The header owns the\n * title, and it OWNS both right-hand controls outright — it renders the theme\n * picker and the settings gear itself. Neither is a prop.\n *\n * WHY THEY ARE NOT PROPS ANY MORE\n * -------------------------------\n * `themePicker?: React.ReactNode` was an open hole: a slot that accepts a node\n * accepts ANY node, so \"every app uses the same picker\" was a convention, and\n * conventions drift. They did — one app passed a raw `<ThemePicker>` with its\n * own `isOpen` state and a debug logger wired into `getThemeIcon`, and eight\n * apps each kept a hand-copied `useTheme` hook to feed it. Those copies had\n * already diverged on real behaviour (only one wrote `localStorage`, so the\n * rest lost the theme on browser restart and flashed a default on next paint).\n *\n * The control is now rendered here, from `useHadokuTheme()`. An app cannot\n * substitute, restyle or omit it. What an app CAN do is inject its own\n * preferences — see `children`.\n *\n * @example\n * ```tsx\n * import { AppHeader } from '@wolffm/task-ui-components'\n * import { HadokuThemeRoot } from '@wolffm/themes'\n *\n * // once, at the app root:\n * <HadokuThemeRoot>\n *   <AppHeader title=\"Print Tool\" status={<ApiStatus status={apiStatus} />}>\n *     <MyAppPreferences />   // optional: the \"App\" tab, after the site's tabs\n *   </AppHeader>\n * </HadokuThemeRoot>\n * ```\n */\nimport React from 'react'\nimport {\n  ConnectedSettings,\n  type AppSettingsTab,\n  type ConnectedSettingsProps\n} from './ConnectedSettings'\nimport { HadokuThemePicker } from './HadokuThemePicker'\n\nexport interface AppHeaderProps {\n  /** Left-aligned header title. A string is wrapped in an <h1>; pass a node for\n   *  custom markup (e.g. a clickable title button). */\n  title: React.ReactNode\n  /** Optional status/extra node shown left of the theme + settings controls\n   *  (e.g. an \"API Online\" indicator). Acceptable per the header contract. */\n  status?: React.ReactNode\n  /** Identity hints for the settings popout. Narrow on purpose: `userType` and\n   *  `name` exist because an app behind a path-prefixed shim may not be able to\n   *  reach `/session/whoami` (conjure), NOT as a styling or layout hook. */\n  settingsProps?: ConnectedSettingsProps\n  /** THE app-specific extension point. Rendered inside the settings popout as\n   *  one \"App\" tab, after the site's own tabs. Put your app's own preferences\n   *  here — checkboxes, selects, whatever it needs; this slot is deliberately\n   *  unconstrained. What it cannot do is alter the site's tabs. */\n  children?: React.ReactNode\n  /** The same, split into tabs of the app's own: one per entry, after the\n   *  \"App\" tab if `children` is also given. See AppSettingsTab. */\n  appTabs?: AppSettingsTab[]\n  /** Extra class on the <header> root. Layout only — it cannot reach the\n   *  controls, which own their own markup. */\n  className?: string\n}\n\nexport function AppHeader({\n  title,\n  status,\n  settingsProps,\n  children,\n  appTabs,\n  className = ''\n}: AppHeaderProps) {\n  // No useHadokuTheme() call here: <HadokuThemePicker> reads the context and\n  // throws its own actionable error when the app root was never wrapped, so a\n  // second read would only duplicate that.\n  return (\n    <header className={`app-header ${className}`.trim()}>\n      {typeof title === 'string' ? (\n        <h1 className=\"app-header__title\">{title}</h1>\n      ) : (\n        <div className=\"app-header__title\">{title}</div>\n      )}\n      <div className=\"app-header__actions\">\n        {status}\n        <HadokuThemePicker />\n        <ConnectedSettings {...settingsProps} appTabs={appTabs}>\n          {children}\n        </ConnectedSettings>\n      </div>\n    </header>\n  )\n}\n"],"names":[],"mappings":";;;AAqEO,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AACd,GAAmB;AAIjB,8BACG,UAAA,EAAO,WAAW,cAAc,SAAS,GAAG,QAC1C,UAAA;AAAA,IAAA,OAAO,UAAU,WAChB,oBAAC,MAAA,EAAG,WAAU,qBAAqB,UAAA,MAAA,CAAM,IAEzC,oBAAC,OAAA,EAAI,WAAU,qBAAqB,UAAA,OAAM;AAAA,IAE5C,qBAAC,OAAA,EAAI,WAAU,uBACZ,UAAA;AAAA,MAAA;AAAA,0BACA,mBAAA,EAAkB;AAAA,MACnB,oBAAC,mBAAA,EAAmB,GAAG,eAAe,SACnC,SAAA,CACH;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;"}

package/dist/components/ConnectedSettings.d.ts

@@ -8,6 +8,10 @@
  *   - global content-visibility level (tiered pill → PUT /prefs/api/v1/content-level)
  *   - switch key (an inline sign-in form, on the site's own sign-in client)
  *
+ * Those are grouped into tabs (Profile, Content, Account), followed by the
+ * app's own: `children` as one "App" tab, `appTabs` as one tab each. The open
+ * tab is remembered per user and per app (useSettingsTab, @wolffm/themes).
+ *
  * "Connected" (parallel to ConnectedThemePicker): it self-wires to the
  * hadoku.me edge-router via same-origin fetches (see lib/settingsClient), so
  * dropping `<ConnectedSettings />` into any app under hadoku.me needs zero
@@ -41,14 +45,23 @@ export interface ConnectedSettingsProps {
     name?: string | null;
     /** Notify the host (e.g. a "Signed in as …" label) of a rename. */
     onNameChange?: (name: string | null) => void;
-    /** App-specific settings rendered as a final section in the same popout, so
-     *  an app with its own preferences keeps ONE unified gear instead of a second
-     *  control. Shown under an "App preferences" divider.
+    /** App-specific settings as ONE tab, labelled "App", after the site's own
+     *  tabs — so an app with its own preferences keeps one unified gear instead
+     *  of a second control. For more than one section, use `appTabs`.
      *
      *  This slot is deliberately unconstrained — put whatever the app needs in
-     *  it. The constraint is only that it lands AFTER the four canonical rows and
-     *  cannot change them. */
+     *  it. The constraint is only that it cannot change the site's tabs. */
     children?: React.ReactNode;
+    /** App-specific settings as tabs of their own, after `children`'s "App" tab
+     *  if both are given. `id` is stable and unique within the app: the last-open
+     *  tab is remembered by it. `render` runs only while its tab is open. */
+    appTabs?: AppSettingsTab[];
+}
+/** One app-contributed tab in the settings popout. */
+export interface AppSettingsTab {
+    id: string;
+    label: string;
+    render: () => React.ReactNode;
 }
-export declare function ConnectedSettings({ userType: userTypeProp, name: nameProp, onNameChange, children }: ConnectedSettingsProps): React.JSX.Element;
+export declare function ConnectedSettings({ userType: userTypeProp, name: nameProp, onNameChange, children, appTabs }: ConnectedSettingsProps): React.JSX.Element;
 //# sourceMappingURL=ConnectedSettings.d.ts.map

package/dist/components/ConnectedSettings.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConnectedSettings.d.ts","sourceRoot":"","sources":["../../src/components/ConnectedSettings.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,OAAO,KAAmD,MAAM,OAAO,CAAA;AAGvE,OAAO,EAWL,KAAK,IAAI,EACV,MAAM,uBAAuB,CAAA;AAC9B,OAAO,mBAAmB,CAAA;AAE1B,MAAM,WAAW,sBAAsB;IACrC;;;;;;+EAM2E;IAC3E,QAAQ,CAAC,EAAE,IAAI,CAAA;IACf,uEAAuE;IACvE,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,mEAAmE;IACnE,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IAC5C;;;;;;8BAM0B;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AA0ED,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,EAAE,YAAY,EACtB,IAAI,EAAE,QAAQ,EACd,YAAY,EACZ,QAAQ,EACT,EAAE,sBAAsB,qBAmpBxB"}
+{"version":3,"file":"ConnectedSettings.d.ts","sourceRoot":"","sources":["../../src/components/ConnectedSettings.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,OAAO,KAA0D,MAAM,OAAO,CAAA;AAI9E,OAAO,EAWL,KAAK,IAAI,EACV,MAAM,uBAAuB,CAAA;AAC9B,OAAO,mBAAmB,CAAA;AAE1B,MAAM,WAAW,sBAAsB;IACrC;;;;;;+EAM2E;IAC3E,QAAQ,CAAC,EAAE,IAAI,CAAA;IACf,uEAAuE;IACvE,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,mEAAmE;IACnE,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IAC5C;;;;;4EAKwE;IACxE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B;;6EAEyE;IACzE,OAAO,CAAC,EAAE,cAAc,EAAE,CAAA;CAC3B;AAED,sDAAsD;AACtD,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,KAAK,CAAC,SAAS,CAAA;CAC9B;AAmID,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,EAAE,YAAY,EACtB,IAAI,EAAE,QAAQ,EACd,YAAY,EACZ,QAAQ,EACR,OAAO,EACR,EAAE,sBAAsB,qBAswBxB"}