@octabits-io/nuxt-ui-kit 0.17.0 → 0.17.2

package/dist/index.d.ts

@@ -242,9 +242,19 @@ interface HelpPanel {
   currentActions: ComputedRef<HelpPanelAction[]>;
   /** Whether the active tab has any help actions */
   hasActions: ComputedRef<boolean>;
-  /** Register help actions for a tab */
-  register(tabValue: string, actions: HelpPanelAction[]): void;
-  /** Unregister help actions for a tab */
+  /**
+   * Register help actions for a tab. Returns a disposer that removes *this*
+   * registration and no other — safe to call after the tab has been claimed by
+   * a later component, where it is a no-op.
+   */
+  register(tabValue: string, actions: HelpPanelAction[]): () => void;
+  /**
+   * Unregister help actions for a tab.
+   *
+   * Only the component that registered the tab can remove it (see the
+   * ownership note on `useHelpPanel`). Registrations made outside a component
+   * have no owner and are removed unconditionally.
+   */
   unregister(tabValue: string): void;
   /** Set the currently active tab */
   setActiveTab(tabValue: string): void;
@@ -265,6 +275,12 @@ interface HelpPanelOptions {
  * localStorage; switching to a tab without actions auto-closes the panel.
  *
  * Provide it per page: `provide(HELP_PANEL_KEY, useHelpPanel())`.
+ *
+ * **A registration belongs to the component that made it.** Where one registry
+ * is shared across routes, two components routinely share a tab value, and
+ * teardown of the old one interleaves with setup of the new — so removal is
+ * owner-checked rather than by key alone. Prefer the disposer `register`
+ * returns; `unregister(tab)` is equivalent and stays for existing callers.
  */
 declare function useHelpPanel(options?: HelpPanelOptions): HelpPanel;
 //#endregion

package/dist/index.js

@@ -1,4 +1,4 @@
-import { computed, reactive, ref, watch } from "vue";
+import { computed, getCurrentInstance, reactive, ref, watch } from "vue";
 //#region src/org/orgStore.ts
 /**
 * Reactive granted-organizations state + switching — the setup body of an
@@ -177,6 +177,12 @@ const HELP_PANEL_KEY = Symbol("help-panel");
 * localStorage; switching to a tab without actions auto-closes the panel.
 *
 * Provide it per page: `provide(HELP_PANEL_KEY, useHelpPanel())`.
+*
+* **A registration belongs to the component that made it.** Where one registry
+* is shared across routes, two components routinely share a tab value, and
+* teardown of the old one interleaves with setup of the new — so removal is
+* owner-checked rather than by key alone. Prefer the disposer `register`
+* returns; `unregister(tab)` is equivalent and stays for existing callers.
 */
 function useHelpPanel(options = {}) {
 	const storageKey = options.storageKey ?? "help-panel-open";
@@ -189,11 +195,34 @@ function useHelpPanel(options = {}) {
 		return registrations.get(activeTabValue.value)?.actions ?? [];
 	});
 	const hasActions = computed(() => currentActions.value.length > 0);
+	/**
+	* Which component owns each tab's registration.
+	*
+	* Consumers key registrations by *surface*, so several pages legitimately
+	* share one tab value (an admin console where every flat page registers
+	* `'detail'` is the motivating case). On a client-side navigation Vue runs
+	* the INCOMING component's `setup()` before the outgoing one's
+	* `onUnmounted`, so the calls arrive as: new registers, old unregisters. A
+	* delete-by-key therefore let a departing component remove its successor's
+	* registration, and the help trigger vanished for the rest of the session —
+	* every arrival wiped by the page it had just replaced.
+	*/
+	const owners = /* @__PURE__ */ new Map();
+	function remove(tabValue, caller) {
+		if (owners.has(tabValue) && owners.get(tabValue) !== caller) return;
+		owners.delete(tabValue);
+		registrations.delete(tabValue);
+	}
 	function register(tabValue, actions) {
+		const owner = getCurrentInstance();
+		if (owner) owners.set(tabValue, owner);
 		registrations.set(tabValue, { actions });
+		return () => {
+			remove(tabValue, owner);
+		};
 	}
 	function unregister(tabValue) {
-		registrations.delete(tabValue);
+		remove(tabValue, getCurrentInstance());
 	}
 	function setActiveTab(tabValue) {
 		activeTabValue.value = tabValue;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@octabits-io/nuxt-ui-kit",
-  "version": "0.17.0",
+  "version": "0.17.2",
   "description": "Frontend kit for Nuxt/Vue admin SPAs: OIDC session harness (oidc-client-ts), API-client seams (base URL + OIDC bearer), auth/org store cores, and a route-guard builder — factory-style seams the app wires into its own plugins, stores, and middleware",
   "license": "MIT",
   "type": "module",
@@ -73,7 +73,9 @@
     "url": "https://github.com/octabits-io/platform/issues"
   },
   "devDependencies": {
+    "@vue/test-utils": "^2.4.6",
     "date-fns": "^4.4.0",
+    "happy-dom": "^15.11.7",
     "oidc-client-ts": "^3.5.0",
     "vitest": "^4.1.11",
     "vue": "^3.5.41",

package/src/components/PageActions.vue

@@ -177,6 +177,21 @@ const menuGroups = computed<DropdownMenuItem[][]>(() => {
 const hasUtilityRegion = computed(() =>
   inlineUtilityItems.value.length > 0 || (showHelp.value && !utilitiesCollapsed.value),
 );
+
+/**
+ * Is there anything to the LEFT of the utility region for the separator to
+ * separate it from? Everything the template renders before it, in order:
+ * the inline actions, the AI cluster, and the overflow menu (which draws
+ * nothing when its group list is empty).
+ *
+ * Without this the rule is drawn against the start of the cluster. A record
+ * route that declares no actions — only the help registry — renders a bar
+ * whose entire content is a vertical line and the Help button beside it, the
+ * line dividing Help from nothing.
+ */
+const hasLeadingContent = computed(() =>
+  inlineEntries.value.length > 0 || inlineAiItems.value.length > 0 || menuGroups.value.length > 0,
+);
 </script>
 
 <template>
@@ -251,7 +266,7 @@ const hasUtilityRegion = computed(() =>
   </UDropdownMenu>
   <PageActionMenu :items="menuGroups" />
   <template v-if="hasUtilityRegion">
-    <USeparator orientation="vertical" class="h-5 mx-1" />
+    <USeparator v-if="hasLeadingContent" orientation="vertical" class="h-5 mx-1" />
     <PageAction
       v-for="item in inlineUtilityItems"
       :key="item.key"

package/src/components/PageHeader.vue

@@ -117,11 +117,21 @@ const titleClass = computed(() => props.density === 'compact' ? 'font-display te
  * that was stacking.
  */
 const inlineHeading = computed(() => props.density === 'compact' && !slots.title)
+/**
+ * No wrapping, and a subtitle that shrinks before anything else does.
+ *
+ * The wrapper is `flex-wrap`, so without `min-w-0` + `truncate` a long
+ * subtitle keeps its min-content width, wins the line, and pushes the action
+ * cluster onto a second row — a compact band that ends up TALLER than the
+ * stacked one it replaced (observed on the places page: 101px against 85).
+ * Truncating is the right degradation here: `compact` promises one row, and a
+ * subtitle long enough to truncate is help-panel material, not chrome.
+ */
 const headingClass = computed(() => inlineHeading.value
-  ? 'flex min-w-0 flex-wrap items-baseline gap-x-2'
+  ? 'flex min-w-0 items-baseline gap-x-2'
   : 'min-w-0')
 const subtitleClass = computed(() => inlineHeading.value
-  ? 'text-sm text-muted min-w-0'
+  ? 'text-sm text-muted min-w-0 truncate'
   : 'text-sm text-muted mt-1')
 </script>
 

package/src/components/SubSidebar.vue

@@ -66,8 +66,13 @@ watch(
       row down, on fixed chrome that never scrolls away). That is a visual
       economy, not a semantic one: the page still has a name, and with nothing
       selected the detail column has no heading of its own to stand in for it.
+
+      `headerless` only: without it the rail draws its own visible heading, and
+      a second, invisible one for the same shell is noise. The settings layout
+      nests one of each, which is how that showed up — "Settings" announced
+      twice before "Places".
     -->
-    <h1 class="sr-only">{{ title }}</h1>
+    <h1 v-if="headerless" class="sr-only">{{ title }}</h1>
 
     <!-- Page header zone: rendered once (unlike #sidebar), full width above both columns -->
     <div v-if="$slots.header" class="shrink-0">