@octabits-io/nuxt-ui-kit 0.16.0 → 0.17.1

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.16.0",
+  "version": "0.17.1",
   "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/PageHeader.vue

@@ -2,7 +2,7 @@
 // Shipped as source: the consumer's Vite compiles this SFC. All imports are
 // explicit — no reliance on the consumer's auto-import configuration.
 // i18n key contract: pageChrome.back (+ PageActionMenu/PageUtilityActions keys).
-import { computed, onBeforeUnmount, onMounted, provide, ref } from 'vue'
+import { computed, onBeforeUnmount, onMounted, provide, ref, useSlots } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter, type RouteLocationRaw } from 'vue-router'
 import UButton from '@nuxt/ui/components/Button.vue'
@@ -43,7 +43,12 @@ const props = withDefaults(defineProps<{
   loading?: boolean
   /**
    * `default` = full-width top-of-page header with padding.
-   * `compact` = sits inside a detail panel / sidebar; smaller title + thinner divider.
+   * `compact` = sits inside a detail panel / sidebar; ONE row, and it means it —
+   *             smaller title, the subtitle beside it rather than under it, and
+   *             padding sized to the action buttons instead of to two text
+   *             lines. It used to differ from `default` only in title size and
+   *             still spent `py-4` on a stacked title/subtitle, which on a
+   *             split-pane view is 85px of chrome that never scrolls away.
    * `flush`   = no padding/border (caller wraps it).
    */
   density?: 'default' | 'compact' | 'flush'
@@ -61,6 +66,7 @@ const props = withDefaults(defineProps<{
 
 const { t } = useI18n()
 const router = useRouter()
+const slots = useSlots()
 
 // Measured content width for PageActions' collapse decision. null until the
 // first observation (treated as wide — the flex-wrap fallback covers it).
@@ -89,7 +95,7 @@ function onBack() {
 const wrapperClass = computed(() => {
   switch (props.density) {
     case 'compact':
-      return 'flex items-center gap-2 flex-wrap border-b border-default px-6 py-4'
+      return 'flex items-center gap-2 flex-wrap border-b border-default px-6 py-2.5'
     case 'flush':
       return 'flex items-center gap-2 flex-wrap'
     case 'default':
@@ -98,7 +104,35 @@ const wrapperClass = computed(() => {
   }
 })
 
-const titleClass = computed(() => props.density === 'compact' ? 'font-display text-lg font-semibold tracking-tight' : 'font-display text-2xl font-semibold tracking-tight')
+const titleClass = computed(() => props.density === 'compact' ? 'font-display text-base font-semibold tracking-tight' : 'font-display text-2xl font-semibold tracking-tight')
+
+/**
+ * Title and subtitle side by side, on `compact` only, and only when this
+ * component is the one rendering them.
+ *
+ * A `#title` slot carries its own layout — the CMS detail panels put an icon
+ * beside a two-line block — and a baseline-aligned flex row would re-align it
+ * against text it does not contain. Slot users keep the plain wrapper they
+ * were laid out against; the change is for the prop path, which is the one
+ * 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 items-baseline gap-x-2'
+  : 'min-w-0')
+const subtitleClass = computed(() => inlineHeading.value
+  ? 'text-sm text-muted min-w-0 truncate'
+  : 'text-sm text-muted mt-1')
 </script>
 
 <template>
@@ -113,12 +147,15 @@ const titleClass = computed(() => props.density === 'compact' ? 'font-display te
       @click="onBack"
     />
 
-    <div class="min-w-0">
+    <!-- Skipped entirely when there is nothing to head with: a compact band
+         may legitimately carry actions alone (the page title is already in the
+         breadcrumb), and an empty box here would still take the `gap-2`. -->
+    <div v-if="$slots.title || title || subtitle || loading" :class="headingClass">
       <slot name="title">
         <USkeleton v-if="loading" class="h-7 w-40" />
         <h1 v-else-if="title" :class="titleClass">{{ title }}</h1>
       </slot>
-      <p v-if="subtitle && !loading" class="text-sm text-muted mt-1">{{ subtitle }}</p>
+      <p v-if="subtitle && !loading" :class="subtitleClass">{{ subtitle }}</p>
     </div>
 
     <div v-if="$slots.badges" class="flex items-center gap-2">

package/src/components/SubSidebar.vue

@@ -58,6 +58,22 @@ watch(
 
 <template>
   <div class="flex h-full w-full flex-col overflow-hidden">
+    <!--
+      The page's name, for anyone not looking at the breadcrumb.
+
+      A split view names itself in the chrome above it, so the header slot no
+      longer repeats the title (it was the breadcrumb's string verbatim, one
+      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 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">
       <slot name="header" />