npm - @signal9/era-ui - Versions diffs - 22.0.0 → 23.0.0 - Mend

@signal9/era-ui 22.0.0 → 23.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (93) hide show

package/dist/ui/provider/axis-relay.svelte.js ADDED Viewed

@@ -0,0 +1,109 @@
+import { getContext, hasContext, setContext } from 'svelte';
+import { axisKeys, axisRegistry } from './axes.js';
+/*
+ * CARRYING THE AXES ACROSS A PORTAL.
+ *
+ * Eight components render their content through a Portal, which moves it to
+ * document.body. Everything era styles with is inherited — the density ladder
+ * and the roundness scale are custom properties on `*`, surfaces re-baseline a
+ * token contract, the font axis publishes an inherited stack — so content that
+ * leaves its subtree stops inheriting from it and starts inheriting from :root.
+ *
+ * The consequence was not subtle and it was not theoretical. A dialog opened
+ * from inside a `data-surface="bevel"` panel rendered flat. A dropdown inside a
+ * pinned-dense sidebar rendered at the page's density, so its rows were the
+ * wrong tier and every concentric gap inside it was computed against heights it
+ * did not have. A menu inside a scoped theme rendered the page's colours. The
+ * library's answer was the `onHtml: true` flag in the axis registry — "must be
+ * set on <html> so portalled content inherits it" — which is not a fix, it is
+ * the instruction to give up subtree scoping for these eight components. And it
+ * is not always available: signalnine.org scopes `data-surface` to five app
+ * surfaces precisely so its marketing pages are NOT bevelled, so hoisting to
+ * <html> would have been a worse bug than the one it fixed.
+ *
+ * WHY A RELAY RATHER THAN READING AT THE CONTENT. The content cannot answer the
+ * question itself: by the time it exists it is already a child of <body>, and
+ * every ancestor it can see is the wrong one. The value has to be captured from
+ * a node that is still in the subtree, and handed across.
+ *
+ * The trigger is that node. It is a real element, it lives exactly where the
+ * content logically belongs, and it is present for every component here. The
+ * root sets up the channel (era owns Root for all eight now — it did not, which
+ * is why there was nowhere to put this), the trigger fills it from its own DOM
+ * position, and the content spreads it onto itself.
+ *
+ * WHAT IT DOES NOT DO. A trigger-less flow — a dialog driven purely by
+ * `bind:open` with no Trigger rendered — has nothing to capture from, and the
+ * content falls back to inheriting from :root exactly as it does today. That is
+ * unchanged behaviour rather than a regression, and the relay is written so the
+ * absence is a null, not a crash.
+ */
+const KEY = Symbol('era.axis-relay');
+/** The axis attributes, plus the theme pair, which is not in the axis registry. */
+const THEME_ATTR = 'data-theme';
+const SCHEME_CLASSES = ['dark', 'light'];
+export class AxisRelay {
+    /** Attributes to stamp on portalled content. Empty until a capture runs. */
+    attrs = $state({});
+    /** `dark` / `light` when a scoped one is in force, else undefined. */
+    scheme = $state(undefined);
+    /** The trigger's element — the last node still inside the subtree. */
+    #anchor = null;
+    /** Called by the Trigger once it has an element. */
+    register(el) {
+        this.#anchor = el ?? null;
+    }
+    /**
+     * Read the axes in force at the anchor and remember them.
+     *
+     * CALLED WHEN THE CONTENT OPENS, not when the trigger mounts. Capturing at
+     * mount looks equivalent and is not: an axis can change while a trigger sits
+     * there — the docs' own pickers do it on every click, and a consumer toggling
+     * a theme or pinning a panel to dense does it too — and a value read once at
+     * mount is then wrong for every subsequent open. Content is created fresh on
+     * each open, so refreshing there is both correct and self-scheduling.
+     *
+     * Nearest-ancestor per axis, INDEPENDENTLY: a subtree can override density
+     * without touching surface, and closest() answers each question separately,
+     * which is what makes the axes orthogonal in the first place.
+     */
+    refresh() {
+        const el = this.#anchor;
+        if (!el?.closest)
+            return;
+        const next = {};
+        for (const key of axisKeys) {
+            const attr = axisRegistry[key].attr;
+            const value = el.closest(`[${attr}]`)?.getAttribute(attr);
+            if (value)
+                next[attr] = value;
+        }
+        // Theme is not an axis in the registry (it has no picker contract), but it
+        // is inherited the same way and breaks across a portal the same way.
+        const theme = el.closest(`[${THEME_ATTR}]`)?.getAttribute(THEME_ATTR);
+        if (theme)
+            next[THEME_ATTR] = theme;
+        this.attrs = next;
+        // The colour-scheme pair is a CLASS, not an attribute, so it is separate.
+        const schemeHost = el.closest('.dark, .light');
+        this.scheme = SCHEME_CLASSES.find((c) => schemeHost?.classList.contains(c)) ?? undefined;
+    }
+    /** The class string portalled content should carry. */
+    get schemeClass() {
+        return this.scheme ?? '';
+    }
+}
+/** Called by era's Root for a portalling component. */
+export function setAxisRelay() {
+    const relay = new AxisRelay();
+    setContext(KEY, relay);
+    return relay;
+}
+/**
+ * Called by a Trigger or Content. Returns null outside an era Root — a consumer
+ * using bits-ui's own Root directly still gets working components, just without
+ * the relay, so this must never throw.
+ */
+export function getAxisRelay() {
+    return hasContext(KEY) ? getContext(KEY) : null;
+}

package/dist/ui/select/select-content.svelte CHANGED Viewed

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Select } from 'bits-ui';
-	import { cn, type PartProps } from '../../utils/index.js';
+	import { cn, type OwnedPartProps } from '../../utils/index.js';
 	let {
 		ref = $bindable(null),
@@ -8,7 +8,7 @@
 		class: className,
 		sideOffset = 0,
 		...restProps
-	}: PartProps<Select.ContentProps> = $props();
+	}: OwnedPartProps<Select.ContentProps> = $props();
 </script>
 <Select.Content

package/dist/ui/select/select-content.svelte.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { Select } from 'bits-ui';
-import { type PartProps } from '../../utils/index.js';
-declare const SelectContent: import("svelte").Component<PartProps<Select.ContentProps>, {}, "ref">;
+import { type OwnedPartProps } from '../../utils/index.js';
+declare const SelectContent: import("svelte").Component<OwnedPartProps<Select.ContentProps>, {}, "ref">;
 type SelectContent = ReturnType<typeof SelectContent>;
 export default SelectContent;

package/dist/ui/select/select-trigger.svelte CHANGED Viewed

@@ -1,14 +1,14 @@
 <script lang="ts">
 	import { Select } from 'bits-ui';
 	import ChevronDown from '@lucide/svelte/icons/chevron-down';
-	import { cn, type PartProps } from '../../utils/index.js';
+	import { cn, type OwnedPartProps } from '../../utils/index.js';
 	let {
 		ref = $bindable(null),
 		children,
 		class: className,
 		...restProps
-	}: PartProps<Select.TriggerProps> = $props();
+	}: OwnedPartProps<Select.TriggerProps> = $props();
 </script>
 <Select.Trigger

package/dist/ui/select/select-trigger.svelte.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { Select } from 'bits-ui';
-import { type PartProps } from '../../utils/index.js';
-declare const SelectTrigger: import("svelte").Component<PartProps<Select.TriggerProps>, {}, "ref">;
+import { type OwnedPartProps } from '../../utils/index.js';
+declare const SelectTrigger: import("svelte").Component<OwnedPartProps<Select.TriggerProps>, {}, "ref">;
 type SelectTrigger = ReturnType<typeof SelectTrigger>;
 export default SelectTrigger;

package/dist/ui/sheet/sheet-content.svelte CHANGED Viewed

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-	import { cn, tv, type PartProps } from '../../utils/index.js';
+	import { cn, tv, type OwnedPartProps } from '../../utils/index.js';
 	// A Sheet is a Dialog pinned to a screen edge — the idiomatic mobile drawer
 	// (bottom for controls, left/right for navigation). Positioning + which
@@ -36,6 +36,7 @@
 </script>
 <script lang="ts">
+	import { getAxisRelay } from '../provider/axis-relay.svelte.js';
 	import type { Snippet } from 'svelte';
 	import { Dialog } from 'bits-ui';
 	import Overlay from '../dialog/dialog-overlay.svelte';
@@ -47,18 +48,23 @@
 		header,
 		class: className,
 		...restProps
-	}: PartProps<Dialog.ContentProps> & {
+	}: OwnedPartProps<Dialog.ContentProps> & {
 		/** Screen edge the sheet is anchored to. */
 		side?: 'top' | 'right' | 'bottom' | 'left';
 		/** A top bar in the pane's grammar — pass `Sheet.Header` holding `Sheet.Title`. */
 		header?: Snippet;
 	} = $props();
+	// Sheet is a Dialog pinned to an edge — it reuses Dialog's Root and Trigger,
+	// so the relay is already open by the time this renders.
+	const relay = getAxisRelay();
 </script>
 <Dialog.Portal>
 	<Overlay />
 	<Dialog.Content
 		bind:ref
+		{...relay?.attrs}
 		class={cn(sheetVariants({ side, header: header != null }), className)}
 		{...restProps}
 	>

package/dist/ui/sheet/sheet-content.svelte.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { type PartProps } from '../../utils/index.js';
+import { type OwnedPartProps } from '../../utils/index.js';
 export declare const sheetVariants: import("tailwind-variants").TVReturnType<{
     side: {
         top: "inset-x-0 top-0 max-h-[85dvh] rounded-b-(--sheet-rd)";
@@ -56,7 +56,7 @@ export declare const sheetVariants: import("tailwind-variants").TVReturnType<{
 }, undefined>>;
 import type { Snippet } from 'svelte';
 import { Dialog } from 'bits-ui';
-type $$ComponentProps = PartProps<Dialog.ContentProps> & {
+type $$ComponentProps = OwnedPartProps<Dialog.ContentProps> & {
     /** Screen edge the sheet is anchored to. */
     side?: 'top' | 'right' | 'bottom' | 'left';
     /** A top bar in the pane's grammar — pass `Sheet.Header` holding `Sheet.Title`. */

package/dist/ui/step/step-content.svelte CHANGED Viewed

@@ -1,13 +1,13 @@
 <script lang="ts">
 	import { Collapsible } from 'bits-ui';
-	import { cn, type PartProps } from '../../utils/index.js';
+	import { cn, type OwnedPartProps } from '../../utils/index.js';
 	let {
 		ref = $bindable(null),
 		children,
 		class: className,
 		...restProps
-	}: PartProps<Collapsible.ContentProps> = $props();
+	}: OwnedPartProps<Collapsible.ContentProps> = $props();
 </script>
 <!-- Height animates on the outer (padding-free) element via era-collapse, which

package/dist/ui/step/step-content.svelte.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { Collapsible } from 'bits-ui';
-import { type PartProps } from '../../utils/index.js';
-declare const StepContent: import("svelte").Component<PartProps<Collapsible.ContentProps>, {}, "ref">;
+import { type OwnedPartProps } from '../../utils/index.js';
+declare const StepContent: import("svelte").Component<OwnedPartProps<Collapsible.ContentProps>, {}, "ref">;
 type StepContent = ReturnType<typeof StepContent>;
 export default StepContent;

package/dist/ui/step/step-summary.svelte CHANGED Viewed

@@ -5,7 +5,7 @@
 	import CircleX from '@lucide/svelte/icons/circle-x';
 	import CircleDashed from '@lucide/svelte/icons/circle-dashed';
 	import ChevronDown from '@lucide/svelte/icons/chevron-down';
-	import { cn, type PartProps } from '../../utils/index.js';
+	import { cn, type OwnedPartProps } from '../../utils/index.js';
 	import { getStepContext } from './context.js';
 	let {
@@ -13,7 +13,7 @@
 		children,
 		class: className,
 		...restProps
-	}: PartProps<Collapsible.TriggerProps> = $props();
+	}: OwnedPartProps<Collapsible.TriggerProps> = $props();
 	const step = getStepContext();
 </script>

package/dist/ui/step/step-summary.svelte.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { Collapsible } from 'bits-ui';
-import { type PartProps } from '../../utils/index.js';
-declare const StepSummary: import("svelte").Component<PartProps<Collapsible.TriggerProps>, {}, "ref">;
+import { type OwnedPartProps } from '../../utils/index.js';
+declare const StepSummary: import("svelte").Component<OwnedPartProps<Collapsible.TriggerProps>, {}, "ref">;
 type StepSummary = ReturnType<typeof StepSummary>;
 export default StepSummary;

package/dist/ui/tooltip/index.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import { Tooltip } from 'bits-ui';
 export declare const Provider: typeof Tooltip.Provider;
-export declare const Root: typeof Tooltip.Root;
+export { default as Root } from './tooltip-root.svelte';
 export declare const Portal: typeof Tooltip.Portal;
 export declare const Arrow: typeof Tooltip.Arrow;
 export { default as Trigger } from './tooltip-trigger.svelte';

package/dist/ui/tooltip/index.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { Tooltip } from 'bits-ui';
 export const Provider = Tooltip.Provider;
-export const Root = Tooltip.Root;
+export { default as Root } from './tooltip-root.svelte';
 export const Portal = Tooltip.Portal;
 export const Arrow = Tooltip.Arrow;
 export { default as Trigger } from './tooltip-trigger.svelte';

package/dist/ui/tooltip/tooltip-content.svelte CHANGED Viewed

@@ -1,6 +1,7 @@
 <script lang="ts">
+	import { getAxisRelay } from '../provider/axis-relay.svelte.js';
 	import { Tooltip } from 'bits-ui';
-	import { cn, type PartProps } from '../../utils/index.js';
+	import { cn, type OwnedPartProps } from '../../utils/index.js';
 	let {
 		ref = $bindable(null),
@@ -8,12 +9,15 @@
 		class: className,
 		sideOffset = 4,
 		...restProps
-	}: PartProps<Tooltip.ContentProps> = $props();
+	}: OwnedPartProps<Tooltip.ContentProps> = $props();
+	const relay = getAxisRelay();
 </script>
 <Tooltip.Portal>
 	<Tooltip.Content
 		bind:ref
+		{...relay?.attrs}
 		class={cn(
 			'z-overlay inline-flex h-pill items-center gap-gutter rounded-pill bg-elevated px-inset-pill text-body leading-none whitespace-nowrap text-fg shadow-lg glass-blur has-[svg]:gap-inset-pill',
 			className

package/dist/ui/tooltip/tooltip-content.svelte.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { Tooltip } from 'bits-ui';
-import { type PartProps } from '../../utils/index.js';
-declare const TooltipContent: import("svelte").Component<PartProps<Tooltip.ContentProps>, {}, "ref">;
+import { type OwnedPartProps } from '../../utils/index.js';
+declare const TooltipContent: import("svelte").Component<OwnedPartProps<Tooltip.ContentProps>, {}, "ref">;
 type TooltipContent = ReturnType<typeof TooltipContent>;
 export default TooltipContent;

package/dist/ui/tooltip/tooltip-root.svelte ADDED Viewed

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { Tooltip } from 'bits-ui';
+	import { setAxisRelay } from '../provider/axis-relay.svelte.js';
+	/*
+	 * era owns Root ONLY to open the axis channel — it renders no DOM, adds no
+	 * behaviour and forwards everything. There has to BE a component here: a
+	 * re-export (`export const Root = Tooltip.Root`) has nowhere to put a context,
+	 * which is exactly why the axes could not cross the portal before.
+	 *
+	 * `open` is re-declared bindable because a spread cannot carry a two-way
+	 * binding, so wrapping a primitive breaks `bind:open` at every call site
+	 * unless the wrapper states it.
+	 */
+	let {
+		open = $bindable(false),
+		children,
+		...restProps
+	}: Tooltip.RootProps & { children?: Snippet } = $props();
+	const relay = setAxisRelay();
+	// Capture on OPEN, not on mount: bits-ui mounts content eagerly and toggles
+	// it, so a mount-time read runs once at page load and never again.
+	$effect(() => {
+		if (open) relay.refresh();
+	});
+</script>
+<Tooltip.Root bind:open {...restProps}>
+	{@render children?.()}
+</Tooltip.Root>

package/dist/ui/tooltip/tooltip-root.svelte.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import { Tooltip } from 'bits-ui';
+type $$ComponentProps = Tooltip.RootProps & {
+    children?: Snippet;
+};
+declare const TooltipRoot: import("svelte").Component<$$ComponentProps, {}, "open">;
+type TooltipRoot = ReturnType<typeof TooltipRoot>;
+export default TooltipRoot;

package/dist/ui/tooltip/tooltip-trigger.svelte CHANGED Viewed

@@ -1,7 +1,15 @@
 <script lang="ts">
+	import { getAxisRelay } from '../provider/axis-relay.svelte.js';
 	import { Tooltip } from 'bits-ui';
 	let { ref = $bindable(null), class: className, ...restProps }: Tooltip.TriggerProps = $props();
+	// The trigger is the last node still inside the subtree, so it is the
+	// anchor the axes are read FROM when the content opens.
+	const relay = getAxisRelay();
+	$effect(() => {
+		relay?.register(ref);
+	});
 </script>
 <Tooltip.Trigger bind:ref class={className} {...restProps} />

package/dist/utils/index.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import { type ClassValue } from 'clsx';
 import type { Snippet } from 'svelte';
-import type { WithoutChildrenOrChild } from 'bits-ui';
+import type { WithoutChildren, WithoutChildrenOrChild } from 'bits-ui';
 /**
  * Merges class lists with Tailwind conflict resolution (last wins).
  * Accepts Svelte's full `ClassValue` shape (strings, arrays, objects).
@@ -9,8 +9,41 @@ export declare function cn(...inputs: ClassValue[]): string;
 /** `tv` preconfigured with this library's tailwind-merge settings. */
 export declare const tv: import("tailwind-variants").TV;
 export type { VariantProps } from 'tailwind-variants';
-/** Props for a bits-ui part wrapper that renders its own `children`. */
-export type PartProps<T> = WithoutChildrenOrChild<T> & {
+/**
+ * Props for a bits-ui part that era only RESTYLES — it forwards `children` and
+ * adds classes, and renders no markup of its own.
+ *
+ * `child` is kept. It is bits-ui's escape hatch: the snippet receives the props
+ * the part would have rendered, and the caller renders their own element with
+ * them — a Trigger as an `<a>`, a Content as a custom component. era used to
+ * strip it from every part, which made the whole library strictly less capable
+ * than the primitives it wraps, for no reason on these 18: era contributes a
+ * class string, and bits-ui hands that class straight to the `child` snippet's
+ * props, so the escape hatch keeps era's styling on the way out. It already
+ * worked at runtime — `child` rode in on restProps and bits-ui checks it before
+ * `children` — so the only thing stopping anyone was this type.
+ *
+ * A part where era renders chrome of its own takes {@link OwnedPartProps}.
+ */
+export type PartProps<T> = WithoutChildren<T> & {
+    children?: Snippet;
+};
+/**
+ * Props for a bits-ui part whose markup era OWNS — a trigger that renders its
+ * own chevron, a content that renders its own overlay, a summary with a status
+ * spinner.
+ *
+ * `child` is withheld here, and the reason is that it cannot be honoured. The
+ * snippet replaces the element era was going to render, and era's extra markup
+ * lives INSIDE that element, so taking over rendering drops the chevron, the
+ * overlay or the indicator with no error and no visual clue — era's signature
+ * failure mode. Better to refuse it in the type than to accept it and quietly
+ * render something else.
+ *
+ * If you need the underlying element, reach for the primitive directly:
+ * `import { Select } from 'bits-ui'`. era wraps, it does not replace.
+ */
+export type OwnedPartProps<T> = WithoutChildrenOrChild<T> & {
     children?: Snippet;
 };
 export { hotkeys, keys, parseKeybinding, matchKeyBindingPress, createKeybindingsHandler, formatKeybinding, isApplePlatform, modKey, type KeyBindingMap, type KeyBindingPress, type KeyBindingOptions } from './hotkeys.js';

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
 	"name": "@signal9/era-ui",
-	"version": "22.0.0",
+	"version": "23.0.0",
 	"scripts": {
 		"dev": "vite dev --host",
 		"build": "vite build && npm run prepack",