@dumiflex/wp-kit 0.3.0 → 0.4.0

package/src/WpTabs.vue

@@ -1,188 +1,188 @@
-<script setup lang="ts" generic="T extends string">
-/**
- * Tabs: a row of tabs that switch the panel under them. Works on the canvas
- * (`size="sm"`) and in the manager (`md`, the default).
- *
- * Keyboard follows the APG tabs pattern with automatic activation: only the
- * current tab is in the Tab order, the arrow keys move to the next enabled
- * tab and select it, Home/End jump to the ends. A row too wide for its box
- * scrolls sideways and keeps the current tab in view.
- *
- *   <WpTabs v-model="tab" :tabs="[{ id: 'options', label: 'Options', count: 12 }]" aria-label="Editor sections">
- *     <template #panel="{ id }">…</template>
- *   </WpTabs>
- *
- * Leave out `#panel` when the panels live elsewhere; give them
- * `:id="panelId(tab)"`-style wiring yourself or let the tabs stand alone.
- */
-import { nextTick, ref, useId, useSlots } from "vue";
-
-export interface TabItem<I extends string = string> {
-  id: I;
-  label: string;
-  /** A PrimeIcons class, e.g. `pi-list`. */
-  icon?: string | undefined;
-  disabled?: boolean | undefined;
-  /** A small count after the label (rows, errors…). */
-  count?: number | string | undefined;
-  /** Colour of the count: `success` for all good, `warn` for problems. */
-  tone?: "neutral" | "success" | "warn" | "danger" | undefined;
-}
-
-const props = withDefaults(defineProps<{
-  modelValue: T;
-  tabs: TabItem<T>[];
-  size?: "sm" | "md" | undefined;
-  ariaLabel?: string | undefined;
-  /** `data-test` of each tab is `<testPrefix>-<id>`. */
-  testPrefix?: string | undefined;
-}>(), { size: "md" });
-
-const emit = defineEmits<{ (e: "update:modelValue", id: T): void }>();
-const slots = useSlots();
-
-const uid = `wp-tabs-${useId()}`;
-const tabId = (id: string): string => `${uid}-tab-${id}`;
-const panelId = (id: string): string => `${uid}-panel-${id}`;
-const listEl = ref<HTMLElement | null>(null);
-
-function select(id: T): void {
-  if (id !== props.modelValue) emit("update:modelValue", id);
-}
-
-function focusTab(id: string): void {
-  void nextTick(() => {
-    const i = props.tabs.findIndex((t) => t.id === id);
-    const el = listEl.value?.querySelectorAll<HTMLElement>("[role=tab]")[i];
-    el?.focus();
-    el?.scrollIntoView?.({ block: "nearest", inline: "nearest" });
-  });
-}
-
-/** The tab that takes Tab focus: the current one, else the first enabled. */
-function tabStop(): T | undefined {
-  const enabled = props.tabs.filter((t) => !t.disabled);
-  return (enabled.find((t) => t.id === props.modelValue) ?? enabled[0])?.id;
-}
-
-function onKeydown(ev: KeyboardEvent): void {
-  const enabled = props.tabs.filter((t) => !t.disabled);
-  if (!enabled.length) return;
-  const at = enabled.findIndex((t) => t.id === props.modelValue);
-  let next: number;
-  switch (ev.key) {
-    case "ArrowRight": next = (at + 1) % enabled.length; break;
-    case "ArrowLeft": next = at < 0 ? enabled.length - 1 : (at - 1 + enabled.length) % enabled.length; break;
-    case "Home": next = 0; break;
-    case "End": next = enabled.length - 1; break;
-    default: return;
-  }
-  ev.preventDefault();
-  const id = enabled[next].id;
-  select(id);
-  focusTab(id);
-}
-</script>
-
-<template>
-  <div class="wp-tabset" :data-size="size">
-    <div
-      ref="listEl"
-      class="wp-tabset__list"
-      role="tablist"
-      :aria-label="ariaLabel"
-    >
-      <button
-        v-for="t in tabs"
-        :id="tabId(t.id)"
-        :key="t.id"
-        type="button"
-        role="tab"
-        class="wp-tabset__tab"
-        :aria-selected="t.id === modelValue"
-        :aria-controls="slots.panel ? panelId(t.id) : undefined"
-        :tabindex="t.id === tabStop() ? 0 : -1"
-        :disabled="t.disabled"
-        :data-active="t.id === modelValue"
-        :data-test="testPrefix ? `${testPrefix}-${t.id}` : undefined"
-        @click="select(t.id)"
-        @keydown="onKeydown"
-      >
-        <slot name="tab" :tab="t" :active="t.id === modelValue">
-          <i v-if="t.icon" class="pi" :class="t.icon" aria-hidden="true" />
-          <span>{{ t.label }}</span>
-          <span v-if="t.count !== undefined" class="wp-tabset__count" :data-tone="t.tone">{{ t.count }}</span>
-        </slot>
-      </button>
-    </div>
-    <div
-      v-if="slots.panel"
-      :id="panelId(modelValue)"
-      class="wp-tabset__panel"
-      role="tabpanel"
-      :aria-labelledby="tabId(modelValue)"
-      tabindex="0"
-    >
-      <slot :id="modelValue" name="panel" />
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.wp-tabset { display: flex; flex-direction: column; min-width: 0; }
-.wp-tabset__list {
-  display: flex;
-  gap: 2px;
-  border-bottom: 1px solid var(--wp-border);
-  overflow-x: auto;
-  scrollbar-width: thin;
-  scrollbar-color: var(--wp-scrollbar-thumb) transparent;
-}
-.wp-tabset__tab {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  flex: none;
-  height: var(--wp-control-h-md);
-  margin: 0 0 -1px;
-  padding: 0 var(--wp-space-5);
-  border: 0;
-  border-bottom: 2px solid transparent;
-  background: none;
-  color: var(--wp-text-muted);
-  font: 500 var(--wp-text-sm)/1 var(--wp-font-sans);
-  white-space: nowrap;
-  cursor: pointer;
-  transition: color var(--wp-motion-hover), border-color var(--wp-motion-hover);
-}
-.wp-tabset[data-size="sm"] .wp-tabset__tab {
-  height: var(--wp-control-h-sm);
-  padding: 0 var(--wp-space-4);
-  font-size: var(--wp-text-xs);
-  gap: 4px;
-}
-.wp-tabset__tab:hover:not(:disabled) { color: var(--wp-text); }
-.wp-tabset__tab[data-active="true"] { color: var(--wp-text); border-bottom-color: var(--wp-accent-400); }
-.wp-tabset__tab:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--wp-border-focus); border-radius: var(--wp-radius-sm); }
-.wp-tabset__tab:disabled { opacity: 0.45; cursor: not-allowed; }
-.wp-tabset__tab .pi { font-size: 0.95em; }
-.wp-tabset__count {
-  min-width: 16px;
-  padding: 1px 5px;
-  border-radius: var(--wp-radius-cap, 999px);
-  background: var(--wp-bg-3);
-  color: var(--wp-text-muted);
-  font-size: var(--wp-text-xs);
-  font-variant-numeric: tabular-nums;
-  text-align: center;
-}
-.wp-tabset__tab[data-active="true"] .wp-tabset__count { background: var(--wp-accent-glow); color: var(--wp-accent-text); }
-.wp-tabset__count[data-tone="success"] { background: color-mix(in srgb, var(--wp-success) 16%, transparent); color: var(--wp-success); }
-.wp-tabset__count[data-tone="warn"] { background: color-mix(in srgb, var(--wp-warn) 16%, transparent); color: var(--wp-warn); }
-.wp-tabset__count[data-tone="danger"] { background: color-mix(in srgb, var(--wp-danger) 16%, transparent); color: var(--wp-danger); }
-.wp-tabset__panel { min-width: 0; }
-.wp-tabset__panel:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--wp-border-focus); border-radius: var(--wp-radius-sm); }
-@media (prefers-reduced-motion: reduce) {
-  .wp-tabset__tab { transition: none; }
-}
-</style>
+<script setup lang="ts" generic="T extends string">
+/**
+ * Tabs: a row of tabs that switch the panel under them. Works on the canvas
+ * (`size="sm"`) and in the manager (`md`, the default).
+ *
+ * Keyboard follows the APG tabs pattern with automatic activation: only the
+ * current tab is in the Tab order, the arrow keys move to the next enabled
+ * tab and select it, Home/End jump to the ends. A row too wide for its box
+ * scrolls sideways and keeps the current tab in view.
+ *
+ *   <WpTabs v-model="tab" :tabs="[{ id: 'options', label: 'Options', count: 12 }]" aria-label="Editor sections">
+ *     <template #panel="{ id }">…</template>
+ *   </WpTabs>
+ *
+ * Leave out `#panel` when the panels live elsewhere; give them
+ * `:id="panelId(tab)"`-style wiring yourself or let the tabs stand alone.
+ */
+import { nextTick, ref, useId, useSlots } from "vue";
+
+export interface TabItem<I extends string = string> {
+  id: I;
+  label: string;
+  /** A PrimeIcons class, e.g. `pi-list`. */
+  icon?: string | undefined;
+  disabled?: boolean | undefined;
+  /** A small count after the label (rows, errors…). */
+  count?: number | string | undefined;
+  /** Colour of the count: `success` for all good, `warn` for problems. */
+  tone?: "neutral" | "success" | "warn" | "danger" | undefined;
+}
+
+const props = withDefaults(defineProps<{
+  modelValue: T;
+  tabs: TabItem<T>[];
+  size?: "sm" | "md" | undefined;
+  ariaLabel?: string | undefined;
+  /** `data-test` of each tab is `<testPrefix>-<id>`. */
+  testPrefix?: string | undefined;
+}>(), { size: "md" });
+
+const emit = defineEmits<{ (e: "update:modelValue", id: T): void }>();
+const slots = useSlots();
+
+const uid = `wp-tabs-${useId()}`;
+const tabId = (id: string): string => `${uid}-tab-${id}`;
+const panelId = (id: string): string => `${uid}-panel-${id}`;
+const listEl = ref<HTMLElement | null>(null);
+
+function select(id: T): void {
+  if (id !== props.modelValue) emit("update:modelValue", id);
+}
+
+function focusTab(id: string): void {
+  void nextTick(() => {
+    const i = props.tabs.findIndex((t) => t.id === id);
+    const el = listEl.value?.querySelectorAll<HTMLElement>("[role=tab]")[i];
+    el?.focus();
+    el?.scrollIntoView?.({ block: "nearest", inline: "nearest" });
+  });
+}
+
+/** The tab that takes Tab focus: the current one, else the first enabled. */
+function tabStop(): T | undefined {
+  const enabled = props.tabs.filter((t) => !t.disabled);
+  return (enabled.find((t) => t.id === props.modelValue) ?? enabled[0])?.id;
+}
+
+function onKeydown(ev: KeyboardEvent): void {
+  const enabled = props.tabs.filter((t) => !t.disabled);
+  if (!enabled.length) return;
+  const at = enabled.findIndex((t) => t.id === props.modelValue);
+  let next: number;
+  switch (ev.key) {
+    case "ArrowRight": next = (at + 1) % enabled.length; break;
+    case "ArrowLeft": next = at < 0 ? enabled.length - 1 : (at - 1 + enabled.length) % enabled.length; break;
+    case "Home": next = 0; break;
+    case "End": next = enabled.length - 1; break;
+    default: return;
+  }
+  ev.preventDefault();
+  const id = enabled[next].id;
+  select(id);
+  focusTab(id);
+}
+</script>
+
+<template>
+  <div class="wp-tabset" :data-size="size">
+    <div
+      ref="listEl"
+      class="wp-tabset__list"
+      role="tablist"
+      :aria-label="ariaLabel"
+    >
+      <button
+        v-for="t in tabs"
+        :id="tabId(t.id)"
+        :key="t.id"
+        type="button"
+        role="tab"
+        class="wp-tabset__tab"
+        :aria-selected="t.id === modelValue"
+        :aria-controls="slots.panel ? panelId(t.id) : undefined"
+        :tabindex="t.id === tabStop() ? 0 : -1"
+        :disabled="t.disabled"
+        :data-active="t.id === modelValue"
+        :data-test="testPrefix ? `${testPrefix}-${t.id}` : undefined"
+        @click="select(t.id)"
+        @keydown="onKeydown"
+      >
+        <slot name="tab" :tab="t" :active="t.id === modelValue">
+          <i v-if="t.icon" class="pi" :class="t.icon" aria-hidden="true" />
+          <span>{{ t.label }}</span>
+          <span v-if="t.count !== undefined" class="wp-tabset__count" :data-tone="t.tone">{{ t.count }}</span>
+        </slot>
+      </button>
+    </div>
+    <div
+      v-if="slots.panel"
+      :id="panelId(modelValue)"
+      class="wp-tabset__panel"
+      role="tabpanel"
+      :aria-labelledby="tabId(modelValue)"
+      tabindex="0"
+    >
+      <slot :id="modelValue" name="panel" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.wp-tabset { display: flex; flex-direction: column; min-width: 0; }
+.wp-tabset__list {
+  display: flex;
+  gap: 2px;
+  border-bottom: 1px solid var(--wp-border);
+  overflow-x: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--wp-scrollbar-thumb) transparent;
+}
+.wp-tabset__tab {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  flex: none;
+  height: var(--wp-control-h-md);
+  margin: 0 0 -1px;
+  padding: 0 var(--wp-space-5);
+  border: 0;
+  border-bottom: 2px solid transparent;
+  background: none;
+  color: var(--wp-text-muted);
+  font: 500 var(--wp-text-sm)/1 var(--wp-font-sans);
+  white-space: nowrap;
+  cursor: pointer;
+  transition: color var(--wp-motion-hover), border-color var(--wp-motion-hover);
+}
+.wp-tabset[data-size="sm"] .wp-tabset__tab {
+  height: var(--wp-control-h-sm);
+  padding: 0 var(--wp-space-4);
+  font-size: var(--wp-text-xs);
+  gap: 4px;
+}
+.wp-tabset__tab:hover:not(:disabled) { color: var(--wp-text); }
+.wp-tabset__tab[data-active="true"] { color: var(--wp-text); border-bottom-color: var(--wp-accent-400); }
+.wp-tabset__tab:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--wp-border-focus); border-radius: var(--wp-radius-sm); }
+.wp-tabset__tab:disabled { opacity: 0.45; cursor: not-allowed; }
+.wp-tabset__tab .pi { font-size: 0.95em; }
+.wp-tabset__count {
+  min-width: 16px;
+  padding: 1px 5px;
+  border-radius: var(--wp-radius-cap, 999px);
+  background: var(--wp-bg-3);
+  color: var(--wp-text-muted);
+  font-size: var(--wp-text-xs);
+  font-variant-numeric: tabular-nums;
+  text-align: center;
+}
+.wp-tabset__tab[data-active="true"] .wp-tabset__count { background: var(--wp-accent-glow); color: var(--wp-accent-text); }
+.wp-tabset__count[data-tone="success"] { background: color-mix(in srgb, var(--wp-success) 16%, transparent); color: var(--wp-success); }
+.wp-tabset__count[data-tone="warn"] { background: color-mix(in srgb, var(--wp-warn) 16%, transparent); color: var(--wp-warn); }
+.wp-tabset__count[data-tone="danger"] { background: color-mix(in srgb, var(--wp-danger) 16%, transparent); color: var(--wp-danger); }
+.wp-tabset__panel { min-width: 0; }
+.wp-tabset__panel:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--wp-border-focus); border-radius: var(--wp-radius-sm); }
+@media (prefers-reduced-motion: reduce) {
+  .wp-tabset__tab { transition: none; }
+}
+</style>

package/src/_modal-motion.css

@@ -1,33 +1,33 @@
-/* Shared modal open/close transition — drives every consumer that
- * wraps its modal in `<Transition name="wp-modal">`. Two simultaneous
- * legs:
- *   1. Overlay: opacity fade across `--wp-motion-swap` (200ms).
- *   2. Panel:   transform scale 0.96 → 1.0 with the decel curve so
- *               the dialog grows into place.
- *
- * Selector for the panel is `> *` (immediate child of the overlay
- * element). Works for ModalShell's `.wp-modal-wrapper`, ConfirmDialog's
- * `.wp-confirm`, InjectorBindingModal's `.ibm`, and any future modal
- * that follows the overlay-with-one-child layout.
- *
- * Imported globally via ContextWidget's unscoped style block — class
- * names are namespaced (`wp-modal-*` for the transition, scoped per
- * Vue's named-transition convention) so no leakage.
- */
-.wp-modal-enter-active,
-.wp-modal-leave-active {
-  transition: opacity var(--wp-motion-swap) ease;
-}
-.wp-modal-enter-from,
-.wp-modal-leave-to {
-  opacity: 0;
-}
-.wp-modal-enter-active > *,
-.wp-modal-leave-active > * {
-  transition: transform var(--wp-motion-swap) var(--wp-motion-curve-flip);
-  transform-origin: center;
-}
-.wp-modal-enter-from > *,
-.wp-modal-leave-to > * {
-  transform: scale(0.96);
-}
+/* Shared modal open/close transition — drives every consumer that
+ * wraps its modal in `<Transition name="wp-modal">`. Two simultaneous
+ * legs:
+ *   1. Overlay: opacity fade across `--wp-motion-swap` (200ms).
+ *   2. Panel:   transform scale 0.96 → 1.0 with the decel curve so
+ *               the dialog grows into place.
+ *
+ * Selector for the panel is `> *` (immediate child of the overlay
+ * element). Works for ModalShell's `.wp-modal-wrapper`, ConfirmDialog's
+ * `.wp-confirm`, InjectorBindingModal's `.ibm`, and any future modal
+ * that follows the overlay-with-one-child layout.
+ *
+ * Imported globally via ContextWidget's unscoped style block — class
+ * names are namespaced (`wp-modal-*` for the transition, scoped per
+ * Vue's named-transition convention) so no leakage.
+ */
+.wp-modal-enter-active,
+.wp-modal-leave-active {
+  transition: opacity var(--wp-motion-swap) ease;
+}
+.wp-modal-enter-from,
+.wp-modal-leave-to {
+  opacity: 0;
+}
+.wp-modal-enter-active > *,
+.wp-modal-leave-active > * {
+  transition: transform var(--wp-motion-swap) var(--wp-motion-curve-flip);
+  transform-origin: center;
+}
+.wp-modal-enter-from > *,
+.wp-modal-leave-to > * {
+  transform: scale(0.96);
+}

package/src/_skeleton.css

@@ -1,50 +1,50 @@
-/* Skeleton loading frames.
- *
- * Used by modals + widgets that surface async API loads (bundle picker,
- * module picker). The flat base background is token-driven so the
- * frames track theme changes; a moving highlight gradient overlays
- * via the `::after` pseudo so consumers don't need to mark up two
- * elements. Animation loops on `--wp-motion-shimmer` (1400ms).
- *
- * Imported by each consumer's scoped style block — the `wp-skel`
- * class names are intentionally global so a parent's scoped wrapper
- * (`wp-bp__skel-row` etc.) can lay out the shapes while the base
- * `wp-skel` rules drive the look. `prefers-reduced-motion` kills the
- * sweep so reduced-motion users still get a flat placeholder.
- */
-.wp-skel {
-  background: var(--wp-bg2);
-  border-radius: min(4px, var(--wp-radius-cap, 999px));
-  position: relative;
-  overflow: hidden;
-}
-.wp-skel::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(
-    90deg,
-    transparent 0%,
-    color-mix(in srgb, var(--wp-text) 8%, transparent) 50%,
-    transparent 100%
-  );
-  transform: translateX(-100%);
-  animation: wp-skel-shimmer var(--wp-motion-shimmer) ease-in-out infinite;
-}
-.wp-skel--text {
-  height: 11px;
-}
-.wp-skel--circle {
-  border-radius: 50%; /* round: stands in for an avatar */
-}
-.wp-skel--pill {
-  border-radius: var(--wp-radius-cap, 999px);
-}
-
-@keyframes wp-skel-shimmer {
-  100% { transform: translateX(100%); }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .wp-skel::after { animation: none; }
-}
+/* Skeleton loading frames.
+ *
+ * Used by modals + widgets that surface async API loads (bundle picker,
+ * module picker). The flat base background is token-driven so the
+ * frames track theme changes; a moving highlight gradient overlays
+ * via the `::after` pseudo so consumers don't need to mark up two
+ * elements. Animation loops on `--wp-motion-shimmer` (1400ms).
+ *
+ * Imported by each consumer's scoped style block — the `wp-skel`
+ * class names are intentionally global so a parent's scoped wrapper
+ * (`wp-bp__skel-row` etc.) can lay out the shapes while the base
+ * `wp-skel` rules drive the look. `prefers-reduced-motion` kills the
+ * sweep so reduced-motion users still get a flat placeholder.
+ */
+.wp-skel {
+  background: var(--wp-bg2);
+  border-radius: min(4px, var(--wp-radius-cap, 999px));
+  position: relative;
+  overflow: hidden;
+}
+.wp-skel::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    color-mix(in srgb, var(--wp-text) 8%, transparent) 50%,
+    transparent 100%
+  );
+  transform: translateX(-100%);
+  animation: wp-skel-shimmer var(--wp-motion-shimmer) ease-in-out infinite;
+}
+.wp-skel--text {
+  height: 11px;
+}
+.wp-skel--circle {
+  border-radius: 50%; /* round: stands in for an avatar */
+}
+.wp-skel--pill {
+  border-radius: var(--wp-radius-cap, 999px);
+}
+
+@keyframes wp-skel-shimmer {
+  100% { transform: translateX(100%); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .wp-skel::after { animation: none; }
+}

package/src/axis-color.ts

@@ -1,42 +1,42 @@
-/**
- * Per-axis sub-category colours — one source of truth for the wildcard
- * editor pills, the option-row tag chips, and the pool palette, so a tag
- * reads with the same colour on every surface.
- *
- * Each sub-category GROUP (axis) gets a distinct hue by its position among
- * its siblings. The old per-component copies shared TWO failings that both
- * produced "two groups, same colour": the palette held two near-identical
- * purples (`#a78bfa` and `#a970ff`), and assignment wrapped with
- * `% length`, repeating once there were more groups than hues. This palette
- * is de-duplicated and ordered for maximum separation between consecutive
- * axes; past it, a golden-angle hue keeps every additional group distinct.
- */
-
-/** Neutral hue for ungrouped / "other" tags. */
-export const UNGROUPED_HUE = "var(--wp-text-dim, var(--wp-text3))";
-
-/** Curated distinct hues (no two similar), ordered so consecutive axes land
- *  far apart on the wheel. Theme tokens where they exist, hex otherwise. */
-const AXIS_HUES = [
-  "var(--wp-kind-wildcard, #a78bfa)", // purple
-  "var(--wp-teal, #33d6c6)", // teal
-  "var(--wp-status-modified, #fb923c)", // orange
-  "#60a5fa", // blue
-  "var(--wp-success, #22c55e)", // green
-  "#fb7185", // rose
-  "#fbbf24", // amber
-  "#e879f9", // magenta
-];
-
-/**
- * Distinct, non-repeating hue for the sub-category group (axis) at `index`
- * among its siblings. `index < 0` (ungrouped) → the neutral token. Past the
- * curated palette, a golden-angle hue keeps additional groups distinct
- * rather than wrapping back onto an earlier colour.
- */
-export function axisHueAt(index: number): string {
-  if (index < 0) return UNGROUPED_HUE;
-  if (index < AXIS_HUES.length) return AXIS_HUES[index];
-  const hue = ((index * 137.508) % 360).toFixed(1);
-  return `hsl(${hue} 68% 66%)`;
-}
+/**
+ * Per-axis sub-category colours — one source of truth for the wildcard
+ * editor pills, the option-row tag chips, and the pool palette, so a tag
+ * reads with the same colour on every surface.
+ *
+ * Each sub-category GROUP (axis) gets a distinct hue by its position among
+ * its siblings. The old per-component copies shared TWO failings that both
+ * produced "two groups, same colour": the palette held two near-identical
+ * purples (`#a78bfa` and `#a970ff`), and assignment wrapped with
+ * `% length`, repeating once there were more groups than hues. This palette
+ * is de-duplicated and ordered for maximum separation between consecutive
+ * axes; past it, a golden-angle hue keeps every additional group distinct.
+ */
+
+/** Neutral hue for ungrouped / "other" tags. */
+export const UNGROUPED_HUE = "var(--wp-text-dim, var(--wp-text3))";
+
+/** Curated distinct hues (no two similar), ordered so consecutive axes land
+ *  far apart on the wheel. Theme tokens where they exist, hex otherwise. */
+const AXIS_HUES = [
+  "var(--wp-kind-wildcard, #a78bfa)", // purple
+  "var(--wp-teal, #33d6c6)", // teal
+  "var(--wp-status-modified, #fb923c)", // orange
+  "#60a5fa", // blue
+  "var(--wp-success, #22c55e)", // green
+  "#fb7185", // rose
+  "#fbbf24", // amber
+  "#e879f9", // magenta
+];
+
+/**
+ * Distinct, non-repeating hue for the sub-category group (axis) at `index`
+ * among its siblings. `index < 0` (ungrouped) → the neutral token. Past the
+ * curated palette, a golden-angle hue keeps additional groups distinct
+ * rather than wrapping back onto an earlier colour.
+ */
+export function axisHueAt(index: number): string {
+  if (index < 0) return UNGROUPED_HUE;
+  if (index < AXIS_HUES.length) return AXIS_HUES[index];
+  const hue = ((index * 137.508) % 360).toFixed(1);
+  return `hsl(${hue} 68% 66%)`;
+}