@digilogiclabs/saas-factory-ui 1.33.2 → 1.34.1

package/dist/index.d.mts

@@ -4987,9 +4987,9 @@ interface RandomPlayerPickerProps {
      * Visual intensity preset. Default "normal".
      *   - "subtle" / "normal": current behavior — shorter spins, standard
      *     ease-out curve.
-     *   - "dramatic": physics-like spin — 1.5× duration, ease-out-quart
+     *   - "dramatic": physics-like spin — 2.5× duration, inertia-style
      *     curve so motion continues through the full duration with a slow
-     *     winding-down tail, +4 extra revolutions, plus more
+     *     winding-down tail, +12 extra revolutions, plus more
      *     particles/glow/shake on reveal.
      */
     intensity?: RandomPlayerIntensity;
@@ -5074,6 +5074,40 @@ interface HeroBannerCta {
 interface HeroBannerSlide {
     /** Background image URL. */
     image?: string;
+    /**
+     * Render this slide's image as a real `<img>` (with `fetchpriority="high"`,
+     * `loading="eager"`, `decoding="async"`) instead of a CSS `background-image`.
+     *
+     * Set this on the first slide to make it a reliable LCP target. CSS
+     * backgrounds are valid LCP candidates but the browser discovers them
+     * later (after CSS parse), and `<link rel="preload">` connects to real
+     * `<img>` elements far more reliably than to `background-image` URLs.
+     *
+     * Only the slide with `priority: true` swaps to `<img>`; all other slides
+     * stay on CSS `background-image` (cheaper to cycle). The `imageFilter`,
+     * `bgColor`, overlays, and accent layers all still apply.
+     */
+    priority?: boolean;
+    /**
+     * Optional alt text for the priority `<img>`. Defaults to empty (decorative)
+     * — appropriate when the slide already carries semantic text via headline /
+     * kicker.
+     */
+    imageAlt?: string;
+    /**
+     * Optional intrinsic width of the priority image (in pixels). When set with
+     * `imageHeight`, emitted as the `<img>` `width` HTML attribute. Lets the
+     * browser compute aspect ratio for the preload connection without waiting
+     * for image headers. Has no layout effect when the parent already sizes
+     * the image via absolute positioning (the default). Ignored unless
+     * `priority` is true.
+     */
+    imageWidth?: number;
+    /**
+     * Optional intrinsic height of the priority image (in pixels). Companion
+     * to `imageWidth`. See `imageWidth` for usage notes.
+     */
+    imageHeight?: number;
     /** CSS gradient string (e.g. `"linear-gradient(135deg,#0f172a,#0f4c75)"`). */
     gradient?: string;
     /** Fallback solid background color. */

package/dist/index.d.ts

@@ -4987,9 +4987,9 @@ interface RandomPlayerPickerProps {
      * Visual intensity preset. Default "normal".
      *   - "subtle" / "normal": current behavior — shorter spins, standard
      *     ease-out curve.
-     *   - "dramatic": physics-like spin — 1.5× duration, ease-out-quart
+     *   - "dramatic": physics-like spin — 2.5× duration, inertia-style
      *     curve so motion continues through the full duration with a slow
-     *     winding-down tail, +4 extra revolutions, plus more
+     *     winding-down tail, +12 extra revolutions, plus more
      *     particles/glow/shake on reveal.
      */
     intensity?: RandomPlayerIntensity;
@@ -5074,6 +5074,40 @@ interface HeroBannerCta {
 interface HeroBannerSlide {
     /** Background image URL. */
     image?: string;
+    /**
+     * Render this slide's image as a real `<img>` (with `fetchpriority="high"`,
+     * `loading="eager"`, `decoding="async"`) instead of a CSS `background-image`.
+     *
+     * Set this on the first slide to make it a reliable LCP target. CSS
+     * backgrounds are valid LCP candidates but the browser discovers them
+     * later (after CSS parse), and `<link rel="preload">` connects to real
+     * `<img>` elements far more reliably than to `background-image` URLs.
+     *
+     * Only the slide with `priority: true` swaps to `<img>`; all other slides
+     * stay on CSS `background-image` (cheaper to cycle). The `imageFilter`,
+     * `bgColor`, overlays, and accent layers all still apply.
+     */
+    priority?: boolean;
+    /**
+     * Optional alt text for the priority `<img>`. Defaults to empty (decorative)
+     * — appropriate when the slide already carries semantic text via headline /
+     * kicker.
+     */
+    imageAlt?: string;
+    /**
+     * Optional intrinsic width of the priority image (in pixels). When set with
+     * `imageHeight`, emitted as the `<img>` `width` HTML attribute. Lets the
+     * browser compute aspect ratio for the preload connection without waiting
+     * for image headers. Has no layout effect when the parent already sizes
+     * the image via absolute positioning (the default). Ignored unless
+     * `priority` is true.
+     */
+    imageWidth?: number;
+    /**
+     * Optional intrinsic height of the priority image (in pixels). Companion
+     * to `imageWidth`. See `imageWidth` for usage notes.
+     */
+    imageHeight?: number;
     /** CSS gradient string (e.g. `"linear-gradient(135deg,#0f172a,#0f4c75)"`). */
     gradient?: string;
     /** Fallback solid background color. */

package/dist/index.js

@@ -10,8 +10,8 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
 var __esm = (fn, res) => function __init() {
   return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
 };
-var __commonJS = (cb, mod) => function __require() {
-  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+var __commonJS = (cb, mod2) => function __require() {
+  return mod2 || (0, cb[__getOwnPropNames(cb)[0]])((mod2 = { exports: {} }).exports, mod2), mod2.exports;
 };
 var __export = (target, all) => {
   for (var name in all)
@@ -25,15 +25,15 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+var __toESM = (mod2, isNodeMode, target) => (target = mod2 != null ? __create(__getProtoOf(mod2)) : {}, __copyProps(
   // If the importer is in node compatibility mode or this is not an ESM
   // file that has been converted to a CommonJS file using a Babel-
   // compatible transform (i.e. "__esModule" has not been set), then set
   // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
+  isNodeMode || !mod2 || !mod2.__esModule ? __defProp(target, "default", { value: mod2, enumerable: true }) : target,
+  mod2
 ));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __toCommonJS = (mod2) => __copyProps(__defProp({}, "__esModule", { value: true }), mod2);
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 
 // src/config/constants.ts
@@ -27747,15 +27747,6 @@ var SortIcon = ({ size = 13 }) => /* @__PURE__ */ (0, import_jsx_runtime110.jsxs
     ]
   }
 );
-var STYLE_ID = "dll-news-ticker-styles";
-function ensureStylesInjected() {
-  if (typeof document === "undefined") return;
-  if (document.getElementById(STYLE_ID)) return;
-  const el = document.createElement("style");
-  el.id = STYLE_ID;
-  el.textContent = NEWS_TICKER_CSS;
-  document.head.appendChild(el);
-}
 function NewsTicker({
   items,
   speed = 40,
@@ -27784,9 +27775,6 @@ function NewsTicker({
   const inputRef = React85.useRef(null);
   const filterRef = React85.useRef(null);
   const [trackWidth, setTrackWidth] = React85.useState(0);
-  React85.useEffect(() => {
-    ensureStylesInjected();
-  }, []);
   const hasFiltersOrSort = filters.length > 0 || sorts.length > 0;
   const activeFilterCount = Object.values(activeFilters).filter((v) => v && v.length > 0).length + (activeSort ? 1 : 0);
   React85.useEffect(() => {
@@ -27872,6 +27860,7 @@ function NewsTicker({
       className: `ticker-root ${variantClass} ${className}`,
       style: { ["--ticker-h"]: `${height}px` },
       children: [
+        /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("style", { href: "dll-news-ticker-styles", precedence: "default", children: NEWS_TICKER_CSS }),
         /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("div", { className: "ticker-controls", children: [
           /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
             "button",
@@ -28643,15 +28632,6 @@ function useDebouncedValue(value, ms) {
   }, [value, ms]);
   return debounced;
 }
-var STYLE_ID2 = "dll-filterable-grid-styles";
-function ensureStylesInjected2() {
-  if (typeof document === "undefined") return;
-  if (document.getElementById(STYLE_ID2)) return;
-  const el = document.createElement("style");
-  el.id = STYLE_ID2;
-  el.textContent = FILTERABLE_GRID_CSS;
-  document.head.appendChild(el);
-}
 function FilterSidebar({
   open,
   onClose,
@@ -28986,9 +28966,6 @@ function FilterableGrid({
   labels: labelOverrides,
   className = ""
 }) {
-  React86.useEffect(() => {
-    ensureStylesInjected2();
-  }, []);
   const labels = React86.useMemo(
     () => ({ ...DEFAULT_LABELS, ...labelOverrides }),
     [labelOverrides]
@@ -29243,6 +29220,7 @@ function FilterableGrid({
   const showEmpty = displayed.length === 0 && !loading;
   const currentState = stateRef.current;
   return /* @__PURE__ */ (0, import_jsx_runtime111.jsxs)("div", { className: `fg-root ${className}`.trim(), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime111.jsx)("style", { href: "dll-filterable-grid-styles", precedence: "default", children: FILTERABLE_GRID_CSS }),
     /* @__PURE__ */ (0, import_jsx_runtime111.jsx)("div", { className: "fg-sr-only", "aria-live": "polite", "aria-atomic": "true", children: announcement }),
     showSearch && /* @__PURE__ */ (0, import_jsx_runtime111.jsx)("div", { className: "fg-search-row", children: /* @__PURE__ */ (0, import_jsx_runtime111.jsxs)("div", { className: "fg-search", children: [
       /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(SearchIcon2, { size: 16 }),
@@ -29999,7 +29977,6 @@ var STAGGER_STEP_MS = 35;
 var STAGGER_CAP = 14;
 var TILT_MAX_DEG = 12;
 var SCALE_HOVER = 1.04;
-var STYLE_ID3 = "dll-tilt-card-styles";
 var TILT_CARD_CSS = `
 .tc-root {
   --tc-accent: #3b82f6;
@@ -30304,14 +30281,6 @@ var TILT_CARD_CSS = `
   }
 }
 `;
-function ensureStylesInjected3() {
-  if (typeof document === "undefined") return;
-  if (document.getElementById(STYLE_ID3)) return;
-  const el = document.createElement("style");
-  el.id = STYLE_ID3;
-  el.textContent = TILT_CARD_CSS;
-  document.head.appendChild(el);
-}
 function TiltCard({
   accent,
   accentSecondary,
@@ -30335,7 +30304,6 @@ function TiltCard({
   const uid = (0, import_react67.useId)().replace(/:/g, "");
   const rootRef = (0, import_react67.useRef)(null);
   const [hovered, setHovered] = (0, import_react67.useState)(false);
-  ensureStylesInjected3();
   const handleMove = (0, import_react67.useCallback)(
     (e) => {
       if (disableTilt && disableShine) return;
@@ -30440,8 +30408,9 @@ function TiltCard({
     "aria-pressed": as === "button" ? selected : void 0,
     "data-hovered": hovered || void 0
   };
+  const stylesheet = /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("style", { href: "dll-tilt-card-styles", precedence: "default", children: TILT_CARD_CSS });
   if (as === "button") {
-    return /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)(
       "button",
       {
         ...commonProps,
@@ -30449,11 +30418,14 @@ function TiltCard({
         disabled: selected,
         onClick: handleClick,
         onKeyDown: handleKey,
-        children: content
+        children: [
+          stylesheet,
+          content
+        ]
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)(
     "div",
     {
       ...commonProps,
@@ -30462,7 +30434,10 @@ function TiltCard({
       "aria-disabled": selected || void 0,
       onClick: handleClick,
       onKeyDown: handleKey,
-      children: content
+      children: [
+        stylesheet,
+        content
+      ]
     }
   );
 }
@@ -33326,8 +33301,8 @@ var WEDGE_PALETTE = [
   "#14b8a6",
   "#f97316"
 ];
-var DEFAULT_EASING = "cubic-bezier(0.12, 0.78, 0.22, 1)";
-var DRAMATIC_EASING = "cubic-bezier(0.22, 1, 0.36, 1)";
+var DEFAULT_EASING = "cubic-bezier(0.25, 0.46, 0.45, 0.94)";
+var DRAMATIC_EASING = "cubic-bezier(0.39, 0.575, 0.565, 1)";
 var INTENSITY_CONFIG = {
   subtle: {
     particles: 14,
@@ -33352,9 +33327,9 @@ var INTENSITY_CONFIG = {
     shakePeak: 10,
     glowMult: 1.45,
     pulseStroke: 8,
-    durationMult: 1.5,
+    durationMult: 2.5,
     easing: DRAMATIC_EASING,
-    revsBoost: 4
+    revsBoost: 12
   }
 };
 function polar(cx, cy, r, a) {
@@ -33380,6 +33355,20 @@ function weightedIndex(pool) {
   }
   return pool.length - 1;
 }
+function mod(value, divisor) {
+  return (value % divisor + divisor) % divisor;
+}
+function wheelIndexAtPointer(rotation, count2) {
+  if (count2 < 1) return -1;
+  const wedgeDeg = 360 / count2;
+  const localDegAtPointer = mod(-rotation, 360);
+  return Math.min(count2 - 1, Math.floor(localDegAtPointer / wedgeDeg));
+}
+function reelIndexAtCenter(reelY, centerOffsetPx, rowHeight, count2) {
+  if (count2 < 1) return -1;
+  const centerRow = Math.round((reelY + centerOffsetPx) / rowHeight);
+  return mod(centerRow, count2);
+}
 function ReelStage({
   pool,
   winner,
@@ -33807,7 +33796,9 @@ function RandomPlayerPicker({
     const winnerIdx = weightedIndex(pool);
     const minRev = minRevolutions + intensityCfg.revsBoost;
     const maxRev = maxRevolutions + intensityCfg.revsBoost;
-    const revolutions = minRev + Math.random() * (maxRev - minRev);
+    const minFullRevs = Math.ceil(minRev);
+    const maxFullRevs = Math.max(minFullRevs, Math.floor(maxRev));
+    const revolutions = minFullRevs + Math.floor(Math.random() * (maxFullRevs - minFullRevs + 1));
     const wedgeMidRad = winnerIdx * anglePerWedge + anglePerWedge / 2;
     const wedgeMidDeg = wedgeMidRad * 180 / Math.PI;
     const wheelWobble = (Math.random() - 0.5) * (anglePerWedge * 180 / Math.PI) * 0.6;
@@ -33821,10 +33812,12 @@ function RandomPlayerPicker({
     const currentCenterRow = Math.round(
       (reelY + centerOffsetPx) / reelRowHeight
     );
-    const currentCenterMod = (currentCenterRow % n + n) % n;
+    const currentCenterMod = mod(currentCenterRow, n);
     const targetRowOffset = (winnerIdx - currentCenterMod + n) % n;
     const reelRevRows = Math.round(revolutions * n);
     const finalReelY = reelY + (reelRevRows + targetRowOffset) * reelRowHeight;
+    const settledWinnerIdx = mode === "reel" ? reelIndexAtCenter(finalReelY, centerOffsetPx, reelRowHeight, n) : wheelIndexAtPointer(finalRotation, n);
+    const finalWinnerIdx = settledWinnerIdx >= 0 && settledWinnerIdx < pool.length ? settledWinnerIdx : winnerIdx;
     const effectiveDuration = reducedMotion ? 250 : Math.round(spinDuration * intensityCfg.durationMult);
     setSpinning(true);
     setWinner(null);
@@ -33869,7 +33862,7 @@ function RandomPlayerPicker({
       schedule();
     }
     winnerTimer.current = setTimeout(() => {
-      const picked = pool[winnerIdx];
+      const picked = pool[finalWinnerIdx];
       if (!picked) {
         setSpinning(false);
         return;
@@ -33916,7 +33909,7 @@ function RandomPlayerPicker({
       }
       if (removeWinners) {
         popTimer.current = setTimeout(() => {
-          setPool((p) => p.filter((_, i) => i !== winnerIdx));
+          setPool((p) => p.filter((_, i) => i !== finalWinnerIdx));
           setWinner(null);
           setRotation(0);
           setReelY(0);
@@ -35061,23 +35054,46 @@ function DynamicHeroBanner({
           const filter = IMAGE_FILTERS[slide.imageFilter ?? imageFilter] ?? IMAGE_FILTERS.cinematic;
           const slideOverlayOpacity = slide.overlayOpacity ?? overlayOpacity;
           const slideAlign = slide.textAlign ?? textAlign;
+          const usePriorityImg = slide.priority === true && !!slide.image;
+          const bgDivStyle = usePriorityImg ? {
+            position: "absolute",
+            inset: 0,
+            backgroundColor: slide.bgColor ?? "#0c0e14",
+            transform: isCurrent ? "scale(1)" : "scale(1.06)",
+            transition: reducedMotion ? "none" : `transform ${autoPlayInterval}ms linear`
+          } : {
+            position: "absolute",
+            inset: 0,
+            backgroundImage: slide.image ? `url(${slide.image})` : slide.gradient ?? "none",
+            backgroundColor: slide.bgColor ?? "#0c0e14",
+            backgroundSize: "cover",
+            backgroundPosition: "center",
+            filter,
+            transform: isCurrent ? "scale(1)" : "scale(1.06)",
+            transition: reducedMotion ? "none" : `transform ${autoPlayInterval}ms linear`
+          };
           return /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)("div", { style: bgStyle(i), "aria-hidden": !isCurrent, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
-              "div",
+            /* @__PURE__ */ (0, import_jsx_runtime118.jsx)("div", { style: bgDivStyle, children: usePriorityImg && /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
+              "img",
               {
+                src: slide.image,
+                alt: slide.imageAlt ?? "",
+                width: slide.imageWidth && slide.imageHeight ? slide.imageWidth : void 0,
+                height: slide.imageWidth && slide.imageHeight ? slide.imageHeight : void 0,
+                fetchPriority: "high",
+                loading: "eager",
+                decoding: "async",
                 style: {
                   position: "absolute",
                   inset: 0,
-                  backgroundImage: slide.image ? `url(${slide.image})` : slide.gradient ?? "none",
-                  backgroundColor: slide.bgColor ?? "#0c0e14",
-                  backgroundSize: "cover",
-                  backgroundPosition: "center",
-                  filter,
-                  transform: isCurrent ? "scale(1)" : "scale(1.06)",
-                  transition: reducedMotion ? "none" : `transform ${autoPlayInterval}ms linear`
+                  width: "100%",
+                  height: "100%",
+                  objectFit: "cover",
+                  objectPosition: "center",
+                  filter
                 }
               }
-            ),
+            ) }),
             /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
               "div",
               {
@@ -37192,10 +37208,10 @@ var DEFAULT_LAYOUT = {
   cardH: 56,
   detailMaxW: 320
 };
-var STYLE_ID4 = "dll-flow-tree-styles";
+var STYLE_ID = "dll-flow-tree-styles";
 function FlowTreeStyles() {
   const reactHostingProps = {
-    href: STYLE_ID4,
+    href: STYLE_ID,
     precedence: "default"
   };
   return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
@@ -37206,11 +37222,11 @@ function FlowTreeStyles() {
     }
   );
 }
-function ensureStylesInjected4() {
+function ensureStylesInjected() {
   if (typeof document === "undefined") return;
-  if (document.getElementById(STYLE_ID4)) return;
+  if (document.getElementById(STYLE_ID)) return;
   const el = document.createElement("style");
-  el.id = STYLE_ID4;
+  el.id = STYLE_ID;
   el.textContent = FLOW_TREE_CSS;
   document.head.appendChild(el);
 }
@@ -37698,7 +37714,7 @@ function FlowTree({
   autoCyclePaths
 }) {
   React87.useEffect(() => {
-    ensureStylesInjected4();
+    ensureStylesInjected();
   }, []);
   const opts = React87.useMemo(
     () => ({ ...DEFAULT_LAYOUT, ...layoutOptions ?? {} }),
@@ -41594,7 +41610,6 @@ Scoreboard.displayName = "Scoreboard";
 // src/components/ui/step-wizard/index.tsx
 var import_react79 = require("react");
 var import_jsx_runtime128 = require("react/jsx-runtime");
-var STYLE_ID5 = "dll-step-wizard-styles";
 var STEP_WIZARD_CSS = `
 .sw-root {
   --sw-accent: var(--primary, #3b82f6);
@@ -41752,27 +41767,19 @@ var STEP_WIZARD_CSS = `
   box-shadow: 0 4px 20px rgba(34, 197, 94, 0.25);
 }
 `;
-function ensureStylesInjected5() {
-  if (typeof document === "undefined") return;
-  if (document.getElementById(STYLE_ID5)) return;
-  const el = document.createElement("style");
-  el.id = STYLE_ID5;
-  el.textContent = STEP_WIZARD_CSS;
-  document.head.appendChild(el);
-}
 function StepProgress({
   steps,
   current,
   onJump,
   className = ""
 }) {
-  ensureStylesInjected5();
   const currentIdx = Math.max(
     0,
     steps.findIndex((s) => s.key === current)
   );
   const pct = steps.length <= 1 ? 100 : currentIdx / (steps.length - 1) * 100;
   return /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { className: `sw-progress ${className}`.trim(), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("style", { href: "dll-step-wizard-styles", precedence: "default", children: STEP_WIZARD_CSS }),
     /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("div", { className: "sw-progress-row", children: steps.map((s, i) => {
       const state = i === currentIdx ? "active" : i < currentIdx ? "done" : "todo";
       const clickable = state === "done" && !!onJump;
@@ -41822,7 +41829,6 @@ function StepWizard({
   nextLabel = "Continue",
   className = ""
 }) {
-  ensureStylesInjected5();
   const currentIdx = steps.findIndex((s) => s.key === current);
   const safeIdx = currentIdx < 0 ? 0 : currentIdx;
   const isFirst = safeIdx === 0;
@@ -41853,6 +41859,7 @@ function StepWizard({
     return () => window.removeEventListener("keydown", onKey);
   }, [goBack, isFirst]);
   return /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { className: `sw-root ${className}`.trim(), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("style", { href: "dll-step-wizard-styles", precedence: "default", children: STEP_WIZARD_CSS }),
     !hideProgress && /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(StepProgress, { steps, current, onJump: onChange }),
     banner && /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("div", { className: "sw-banner", children: banner }),
     /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("div", { className: "sw-content", children: renderStep(current) }, current),
@@ -41887,7 +41894,6 @@ function StepWizard({
 
 // src/components/ui/pill-toggle/index.tsx
 var import_jsx_runtime129 = require("react/jsx-runtime");
-var STYLE_ID6 = "dll-pill-toggle-styles";
 var PILL_TOGGLE_CSS = `
 .pt-root {
   --pt-accent: var(--primary, #3b82f6);
@@ -41936,16 +41942,7 @@ var PILL_TOGGLE_CSS = `
   line-height: 1;
 }
 `;
-function ensureStylesInjected6() {
-  if (typeof document === "undefined") return;
-  if (document.getElementById(STYLE_ID6)) return;
-  const el = document.createElement("style");
-  el.id = STYLE_ID6;
-  el.textContent = PILL_TOGGLE_CSS;
-  document.head.appendChild(el);
-}
 function PillToggle(props) {
-  ensureStylesInjected6();
   const { options, ariaLabel, className = "" } = props;
   const isActive = (value) => {
     if (props.multi) return props.value.includes(value);
@@ -41965,31 +41962,34 @@ function PillToggle(props) {
     }
     props.onChange(value);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(
     "div",
     {
       role: props.multi ? "group" : "radiogroup",
       "aria-label": ariaLabel,
       className: `pt-root ${className}`.trim(),
-      children: options.map((opt) => {
-        const active = isActive(opt.value);
-        return /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(
-          "button",
-          {
-            type: "button",
-            className: "pt-pill",
-            "data-active": active,
-            onClick: () => handleToggle(opt.value),
-            role: props.multi ? "checkbox" : "radio",
-            "aria-checked": active,
-            children: [
-              opt.icon && /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("span", { className: "pt-icon", children: opt.icon }),
-              /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("span", { children: opt.label })
-            ]
-          },
-          opt.value
-        );
-      })
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("style", { href: "dll-pill-toggle-styles", precedence: "default", children: PILL_TOGGLE_CSS }),
+        options.map((opt) => {
+          const active = isActive(opt.value);
+          return /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(
+            "button",
+            {
+              type: "button",
+              className: "pt-pill",
+              "data-active": active,
+              onClick: () => handleToggle(opt.value),
+              role: props.multi ? "checkbox" : "radio",
+              "aria-checked": active,
+              children: [
+                opt.icon && /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("span", { className: "pt-icon", children: opt.icon }),
+                /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("span", { children: opt.label })
+              ]
+            },
+            opt.value
+          );
+        })
+      ]
     }
   );
 }
@@ -41997,7 +41997,6 @@ function PillToggle(props) {
 // src/components/ui/tag-input/index.tsx
 var import_react80 = require("react");
 var import_jsx_runtime130 = require("react/jsx-runtime");
-var STYLE_ID7 = "dll-tag-input-styles";
 var TAG_INPUT_CSS = `
 .ti-root {
   --ti-accent: var(--primary, #3b82f6);
@@ -42106,14 +42105,6 @@ var TAG_INPUT_CSS = `
   font-variant-numeric: tabular-nums;
 }
 `;
-function ensureStylesInjected7() {
-  if (typeof document === "undefined") return;
-  if (document.getElementById(STYLE_ID7)) return;
-  const el = document.createElement("style");
-  el.id = STYLE_ID7;
-  el.textContent = TAG_INPUT_CSS;
-  document.head.appendChild(el);
-}
 var defaultNormalize = (raw) => {
   const trimmed = raw.trim();
   if (!trimmed) return "";
@@ -42133,7 +42124,6 @@ function TagInput({
   onInputChange,
   className = ""
 }) {
-  ensureStylesInjected7();
   const [internalInput, setInternalInput] = (0, import_react80.useState)("");
   const isControlled = inputValue !== void 0;
   const input = isControlled ? inputValue : internalInput;
@@ -42181,6 +42171,7 @@ function TagInput({
     if (filteredSuggestions.length >= maxVisibleSuggestions) break;
   }
   return /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { className: `ti-root ${className}`.trim(), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("style", { href: "dll-tag-input-styles", precedence: "default", children: TAG_INPUT_CSS }),
     /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { className: "ti-row", children: [
       /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
         "input",
@@ -42248,7 +42239,7 @@ function TagInput({
 // src/components/ui/sectioned-list-editor/index.tsx
 var import_react81 = require("react");
 var import_jsx_runtime131 = require("react/jsx-runtime");
-var STYLE_ID8 = "dll-sectioned-list-editor-styles";
+var STYLE_ID2 = "dll-sectioned-list-editor-styles";
 var SECTIONED_LIST_CSS = `
 .sle-root {
   --sle-accent: var(--primary, #3b82f6);
@@ -42461,11 +42452,11 @@ var SECTIONED_LIST_CSS = `
   font-variant-numeric: tabular-nums;
 }
 `;
-function ensureStylesInjected8() {
+function ensureStylesInjected2() {
   if (typeof document === "undefined") return;
-  if (document.getElementById(STYLE_ID8)) return;
+  if (document.getElementById(STYLE_ID2)) return;
   const el = document.createElement("style");
-  el.id = STYLE_ID8;
+  el.id = STYLE_ID2;
   el.textContent = SECTIONED_LIST_CSS;
   document.head.appendChild(el);
 }
@@ -42479,7 +42470,7 @@ function SectionedListEditor({
   renderSummary,
   className = ""
 }) {
-  ensureStylesInjected8();
+  ensureStylesInjected2();
   const [activeKey, setActiveKey] = (0, import_react81.useState)(sections[0]?.key ?? "");
   const [input, setInput] = (0, import_react81.useState)("");
   const [customName, setCustomName] = (0, import_react81.useState)("");