@eifi1/ui-kit 0.51.4 → 0.51.5

package/src/tour/tour.tsx

@@ -597,7 +597,8 @@ export function TourProvider({
       }
       // The step awaiting it, or the first later one: the record is saved, so the fields
       // between are passed over.
-      const awaiting = s[i]?.awaitGate === signal.key ? i : s.findIndex((st, k) => k > i && st.awaitGate === signal.key);
+      const awaiting =
+        s[i]?.awaitGate === signal.key ? i : s.findIndex((st, k) => k > i && st.awaitGate === signal.key);
       if (awaiting < 0) return;
       const to = forward(s, awaiting + 1, "next");
       if (to < 0) finish();
@@ -681,7 +682,8 @@ function resolveAt(steps: TourStep[], at: TourAt): number {
   const anchor = `data-tour="${at}"`;
   const found = steps.findIndex((step) => step.target?.includes(anchor));
   if (found >= 0) return found;
-  if (devWarnings()) console.warn(`[ui-kit] A tour was started at "${at}", but no step targets [${anchor}]: it starts at 0.`);
+  if (devWarnings())
+    console.warn(`[ui-kit] A tour was started at "${at}", but no step targets [${anchor}]: it starts at 0.`);
   return 0;
 }
 
@@ -778,7 +780,7 @@ function spotRectOf(el: Element, step: TourStep): Rect {
   let bottom = own.top + own.height;
   const reach = (step.padding ?? 8) + RING_BAND;
   // Grow until nothing more is in reach: a hint under the field, then an error under it.
-  for (let grew = true; grew; ) {
+  for (let grew = true; grew;) {
     grew = false;
     for (let i = lines.length - 1; i >= 0; i--) {
       const r = lines[i];
@@ -1119,7 +1121,7 @@ function TourOverlay({
     if (!ready || !step.optional || step.gate || !devWarnings()) return;
     console.warn(
       `[ui-kit] Tour step "${step.title}" is \`optional\` without a \`gate\`: it shows the Optional chip ` +
-        "and a plain Next. \"Leave empty\" needs a gate to compare.",
+        'and a plain Next. "Leave empty" needs a gate to compare.',
     );
   }, [ready, step]);
 
@@ -1302,7 +1304,12 @@ function TourOverlay({
       // On an interactive step a key pressed in the target, or in a layer it opened (the
       // number pad's Escape, a menu's arrows), is the page's. The card's and the bare
       // page's (focus on <body>) stay the tour's.
-      if (interactive && e.target instanceof Node && e.target !== document.body && !rootRef.current?.contains(e.target)) {
+      if (
+        interactive &&
+        e.target instanceof Node &&
+        e.target !== document.body &&
+        !rootRef.current?.contains(e.target)
+      ) {
         return;
       }
       // Escape is the tour's Escape layer's (above) once the step is shown; while it is
@@ -1479,7 +1486,11 @@ function SpotlightShields({ spot }: { spot: Rect }) {
   const bottom = spot.top + spot.height;
   return (
     <>
-      <div data-tour-shield="" className={shield} style={{ top: 0, left: 0, right: 0, height: Math.max(0, spot.top) }} />
+      <div
+        data-tour-shield=""
+        className={shield}
+        style={{ top: 0, left: 0, right: 0, height: Math.max(0, spot.top) }}
+      />
       <div data-tour-shield="" className={shield} style={{ top: bottom, left: 0, right: 0, bottom: 0 }} />
       <div
         data-tour-shield=""
@@ -1688,7 +1699,16 @@ function TourCard({
     }
     setEdge(null);
     setStyle(
-      placeCard(rect, card.offsetWidth, card.offsetHeight, window.innerWidth, window.innerHeight, 12, step.placement, dir),
+      placeCard(
+        rect,
+        card.offsetWidth,
+        card.offsetHeight,
+        window.innerWidth,
+        window.innerHeight,
+        12,
+        step.placement,
+        dir,
+      ),
     );
   }, [ref, rect, index, step.placement, step.target, dir, docked, bandTick]);
 
@@ -1728,11 +1748,7 @@ function TourCard({
       {step.action && <div className="mt-3">{step.action}</div>}
       <div className="mt-4 space-y-2">
         <div className="flex items-center justify-between gap-2">
-          <button
-            type="button"
-            onClick={onSkip}
-            className="text-xs text-placeholder hover:text-secondary"
-          >
+          <button type="button" onClick={onSkip} className="text-xs text-placeholder hover:text-secondary">
             {labels.skip}
           </button>
           <div className="flex items-center gap-2">

package/src/tour/use-tour-progress.ts

@@ -197,7 +197,10 @@ function fromRecord(value: unknown): TourCompletions | undefined {
  * The record, and whether the text was READ (empty, the kit's shape, or a shape `migrate`
  * knows) rather than dropped: a write over an unread text would lose it (B-1).
  */
-function parse(raw: string | null, migrate: UseTourProgressOptions["migrate"]): { value: TourCompletions; readable: boolean } {
+function parse(
+  raw: string | null,
+  migrate: UseTourProgressOptions["migrate"],
+): { value: TourCompletions; readable: boolean } {
   if (raw === null || raw.trim() === "") return { value: EMPTY, readable: true };
   let value: unknown = raw;
   try {
@@ -294,7 +297,10 @@ function devWarn(message: string) {
  * Remember `account` for `key` if it is the first one, and return the key's account.
  * @internal Not part of the barrel; `TourProvider` registers its `progress` with it.
  */
-export function rememberAccount(key: string, account: TourProgressAccount | undefined): TourProgressAccount | undefined {
+export function rememberAccount(
+  key: string,
+  account: TourProgressAccount | undefined,
+): TourProgressAccount | undefined {
   if (account && !accounts.has(key)) {
     accounts.set(key, account);
     if (account.adopt && account.adopt.storageKey === key) {

package/src/tour/use-tour-url-sync.ts

@@ -58,7 +58,9 @@ function navigationInFlight(history: Navigator | undefined, dataRouter: DataRout
   const live = state?.location ?? (history as (Navigator & { location?: Partial<Place> }) | undefined)?.location;
   if (!live) return false;
   return (
-    live.pathname !== rendered.pathname || (live.search ?? "") !== rendered.search || (live.hash ?? "") !== rendered.hash
+    live.pathname !== rendered.pathname ||
+    (live.search ?? "") !== rendered.search ||
+    (live.hash ?? "") !== rendered.hash
   );
 }
 

package/src/vite-env.d.ts

@@ -19,8 +19,5 @@ interface ImportMeta {
    * prop, which is the kind of guard the consumer app writes with `readFileSync`
    * and cannot be written that way here.
    */
-  glob<T = unknown>(
-    pattern: string,
-    options?: { query?: string; import?: string; eager?: boolean },
-  ): Record<string, T>;
+  glob<T = unknown>(pattern: string, options?: { query?: string; import?: string; eager?: boolean }): Record<string, T>;
 }

package/src/wizard/stepper-nav.tsx

@@ -226,14 +226,8 @@ export function StepperNav<TData extends Record<string, unknown>>({
     <div className={cn("flex flex-col gap-6", className)}>
       {(title || description) && (
         <div>
-          {title && (
-            <h1 className="text-2xl font-bold tracking-tight text-primary">
-              {title}
-            </h1>
-          )}
-          {description && (
-            <p className="mt-1 text-sm text-muted">{description}</p>
-          )}
+          {title && <h1 className="text-2xl font-bold tracking-tight text-primary">{title}</h1>}
+          {description && <p className="mt-1 text-sm text-muted">{description}</p>}
         </div>
       )}
 
@@ -262,14 +256,10 @@ export function StepperNav<TData extends Record<string, unknown>>({
                   <span
                     className={cn(
                       "flex size-8 shrink-0 items-center justify-center rounded-full border-2 text-xs font-semibold transition-colors",
-                      status === "completed" &&
-                        "border-brand bg-brand text-brand-contrast",
-                      status === "active" &&
-                        "border-brand bg-surface text-brand",
-                      status === "upcoming" &&
-                        "border-subtle bg-surface text-placeholder",
-                      status === "skipped" &&
-                        "border-subtle bg-surface-2 text-muted",
+                      status === "completed" && "border-brand bg-brand text-brand-contrast",
+                      status === "active" && "border-brand bg-surface text-brand",
+                      status === "upcoming" && "border-subtle bg-surface text-placeholder",
+                      status === "skipped" && "border-subtle bg-surface-2 text-muted",
                     )}
                   >
                     {status === "completed" ? <Check className="size-4" /> : index + 1}
@@ -278,9 +268,7 @@ export function StepperNav<TData extends Record<string, unknown>>({
                   <span
                     className={cn(
                       "hidden text-xs font-medium md:block",
-                      status === "active" || status === "completed"
-                        ? "text-primary"
-                        : "text-muted",
+                      status === "active" || status === "completed" ? "text-primary" : "text-muted",
                     )}
                   >
                     {step.label}
@@ -290,10 +278,7 @@ export function StepperNav<TData extends Record<string, unknown>>({
                 {/* Connector line */}
                 {!isLast && (
                   <div
-                    className={cn(
-                      "mx-2 h-0.5 flex-1",
-                      status === "completed" ? "bg-brand" : "bg-[var(--border)]",
-                    )}
+                    className={cn("mx-2 h-0.5 flex-1", status === "completed" ? "bg-brand" : "bg-[var(--border)]")}
                   />
                 )}
               </li>
@@ -317,13 +302,7 @@ export function StepperNav<TData extends Record<string, unknown>>({
 
       {/* Submit error */}
       {wizard.error && (
-        <div
-          role="alert"
-          className={cn(
-            "text-sm text-danger",
-            alertFrameClass("danger"),
-          )}
-        >
+        <div role="alert" className={cn("text-sm text-danger", alertFrameClass("danger"))}>
           {wizard.error}
         </div>
       )}
@@ -347,11 +326,7 @@ export function StepperNav<TData extends Record<string, unknown>>({
             </Button>
           )}
           {wizard.currentStep.optional && !wizard.isLastStep && !wizard.isCommitStep && (
-            <Button
-              variant="ghost"
-              onClick={wizard.skip}
-              disabled={wizard.nextBlocked || wizard.isValidating}
-            >
+            <Button variant="ghost" onClick={wizard.skip} disabled={wizard.nextBlocked || wizard.isValidating}>
               {l.skip}
             </Button>
           )}

package/src/wizard/types.ts

@@ -119,7 +119,6 @@ export interface UseWizardOptions<TData extends Record<string, unknown>> {
 
 export type StepStatus = "upcoming" | "active" | "completed" | "skipped";
 
-
 /** What `finish` resolves to at run time (0.50): whether the commit went through, and the
  *  error's message when `onComplete` threw. `undefined` when there was nothing to run. */
 export interface WizardFinishResult {
@@ -168,9 +167,7 @@ export interface UseWizardReturn<TData extends Record<string, unknown>> {
   /** Leave after the post-commit steps: drops the URL param, then calls `onDone`. */
   done: () => void;
   /** Register a validator for the mounted step (used by useRhfWizardStep). */
-  registerStepValidate: (
-    fn: () => ValidateResult | Promise<ValidateResult>,
-  ) => () => void;
+  registerStepValidate: (fn: () => ValidateResult | Promise<ValidateResult>) => () => void;
   /** True when the mounted step has blocked forward navigation (Next/Skip disabled). */
   nextBlocked: boolean;
   /** Set by the active step (via useWizardNextGate) to disable/enable Next+Skip. */

package/src/wizard/use-wizard.ts

@@ -50,10 +50,7 @@ function isAfterCommit(state: { currentStepIndex: number; committedStepIndex: nu
 }
 
 /** Whether `index` is on the far side of a commit the wizard has already moved past. */
-function crossesCommit(
-  state: { currentStepIndex: number; committedStepIndex: number | null },
-  index: number,
-) {
+function crossesCommit(state: { currentStepIndex: number; committedStepIndex: number | null }, index: number) {
   return isAfterCommit(state) && index <= (state.committedStepIndex as number);
 }
 
@@ -74,10 +71,7 @@ type WizardAction<TData> =
   | { type: "SHOW_CANCEL_DIALOG"; show: boolean };
 
 function createReducer<TData>(stepCount: number) {
-  return function reducer(
-    state: WizardState<TData>,
-    action: WizardAction<TData>,
-  ): WizardState<TData> {
+  return function reducer(state: WizardState<TData>, action: WizardAction<TData>): WizardState<TData> {
     switch (action.type) {
       case "GO_NEXT": {
         if (action.from !== state.currentStepIndex) return state;
@@ -187,27 +181,20 @@ export function useWizard<TData extends Record<string, unknown>>(
   // step's validators are present — each unregisters on unmount. `goNext` and
   // `finish` run them (via `runStepValidators`) alongside the step config's own
   // `validate`.
-  const validatorsRef = useRef(
-    new Map<symbol, () => ValidateResult | Promise<ValidateResult>>(),
-  );
-  const registerStepValidate = useCallback(
-    (fn: () => ValidateResult | Promise<ValidateResult>) => {
-      const token = Symbol();
-      validatorsRef.current.set(token, fn);
-      return () => {
-        validatorsRef.current.delete(token);
-      };
-    },
-    [],
-  );
+  const validatorsRef = useRef(new Map<symbol, () => ValidateResult | Promise<ValidateResult>>());
+  const registerStepValidate = useCallback((fn: () => ValidateResult | Promise<ValidateResult>) => {
+    const token = Symbol();
+    validatorsRef.current.set(token, fn);
+    return () => {
+      validatorsRef.current.delete(token);
+    };
+  }, []);
 
   // Chosen once, at mount: a hook may not be called conditionally, but it may be
   // chosen once and then called unconditionally on every render — which is what
   // makes `urlSync: false` work with no router above the wizard at all.
   const [useStepUrl] = useState(() => (urlSync === false ? useNoStepUrl : useSearchParamStepUrl));
-  const [urlParam] = useState(() =>
-    typeof urlSync === "object" && urlSync.param ? urlSync.param : "step",
-  );
+  const [urlParam] = useState(() => (typeof urlSync === "object" && urlSync.param ? urlSync.param : "step"));
   // The wizard's entered `data` and `completedSteps` are NOT persisted across a
   // reload / deep-link (the reducer re-inits to empty defaults on every mount).
   // Restoring a later step index from `?step=N` would therefore leave the wizard
@@ -234,10 +221,7 @@ export function useWizard<TData extends Record<string, unknown>>(
   // state is invalid (e.g. tenant shares != 100%). Defaults to false, so
   // wizards that never call setNextBlocked behave exactly as before.
   const [nextBlocked, setNextBlockedState] = useState(false);
-  const setNextBlocked = useCallback(
-    (blocked: boolean) => setNextBlockedState(blocked),
-    [],
-  );
+  const setNextBlocked = useCallback((blocked: boolean) => setNextBlockedState(blocked), []);
 
   // Sync step index to URL (a no-op under `urlSync: false`). `clearStepUrl` drops
   // the param when the wizard is left through the kit, and stops the sync writing
@@ -259,14 +243,9 @@ export function useWizard<TData extends Record<string, unknown>>(
   // been walked through (completed or skipped). Guards against a restored/last-step
   // index submitting a payload built from empty defaults.
   const canFinish = steps.every(
-    (_, index) =>
-      index >= commitStepIndex ||
-      state.completedSteps.has(index) ||
-      state.skippedSteps.has(index),
+    (_, index) => index >= commitStepIndex || state.completedSteps.has(index) || state.skippedSteps.has(index),
   );
-  const canGoBack =
-    (!isFirstStep || onExit !== undefined) &&
-    !crossesCommit(state, state.currentStepIndex - 1);
+  const canGoBack = (!isFirstStep || onExit !== undefined) && !crossesCommit(state, state.currentStepIndex - 1);
   const canCancel = cancellable && !afterCommit;
   const canDone = isLastStep && afterCommit && onDone !== undefined;
 
@@ -551,18 +530,24 @@ function useSearchParamStepUrl(param: string, index: number): () => void {
   const leftRef = useRef(false);
   useEffect(() => {
     if (leftRef.current) return;
-    setUrlParams((prev) => {
-      prev.set(param, String(index));
-      return prev;
-    }, { replace: true });
+    setUrlParams(
+      (prev) => {
+        prev.set(param, String(index));
+        return prev;
+      },
+      { replace: true },
+    );
   }, [param, index, setUrlParams]);
   return useCallback(() => {
     if (leftRef.current) return;
     leftRef.current = true;
-    setUrlParams((prev) => {
-      prev.delete(param);
-      return prev;
-    }, { replace: true });
+    setUrlParams(
+      (prev) => {
+        prev.delete(param);
+        return prev;
+      },
+      { replace: true },
+    );
   }, [param, setUrlParams]);
 }
 

package/src/wizard/validation.ts

@@ -26,11 +26,7 @@ export function requiredFieldsValidator<T extends Record<string, unknown>>(
   const errors: FieldErrors = {};
   for (const f of fields) {
     const v = data[f.key];
-    const ok = f.valid
-      ? f.valid(v, data)
-      : typeof v === "string"
-        ? v.trim() !== ""
-        : v != null;
+    const ok = f.valid ? f.valid(v, data) : typeof v === "string" ? v.trim() !== "" : v != null;
     if (!ok) errors[String(f.key)] = f.message ?? defaultMessage;
   }
   return { ok: Object.keys(errors).length === 0, errors };

package/src/wizard/wizard-context.tsx

@@ -9,9 +9,7 @@ export interface WizardContextValue {
    * AND-combining the results — this replaces the per-page `useRef` +
    * `validate: () => ref.current?.()` bridge each RHF step used to wire.
    */
-  registerStepValidate: (
-    fn: () => ValidateResult | Promise<ValidateResult>,
-  ) => () => void;
+  registerStepValidate: (fn: () => ValidateResult | Promise<ValidateResult>) => () => void;
   /** Lets the mounted step disable Next/Skip (e.g. invalid tenant shares). */
   setNextBlocked: (blocked: boolean) => void;
 }
@@ -52,9 +50,7 @@ export function useOptionalWizardContext(): WizardContextValue | null {
  * `<StepperNav>`, like {@link useWizardContext}: a validator with nothing to run it is
  * a bug to hear about.
  */
-export function useWizardStepValidate(
-  validate: () => ValidateResult | Promise<ValidateResult>,
-): void {
+export function useWizardStepValidate(validate: () => ValidateResult | Promise<ValidateResult>): void {
   const { registerStepValidate } = useWizardContext();
   const ref = useRef(validate);
   useEffect(() => {

package/src/wizard/wizard-step.tsx

@@ -34,14 +34,7 @@ const HEADING = { 2: "h2", 3: "h3", 4: "h4" } as const;
 /** The vertical rhythm one wizard step's content sits on. A component rather
  *  than a class string so every step in every app spaces its fields the same —
  *  and, with `title` / `description`, heads them the same. */
-export function WizardStep({
-  children,
-  className,
-  title,
-  description,
-  headingLevel = 3,
-  actions,
-}: WizardStepProps) {
+export function WizardStep({ children, className, title, description, headingLevel = 3, actions }: WizardStepProps) {
   const hasTitle = title !== undefined && title !== null && title !== false && title !== "";
   const hasDescription =
     description !== undefined && description !== null && description !== false && description !== "";

package/src/wizard/wizard-summary.tsx

@@ -68,14 +68,10 @@ export function WizardSummary({
             <dl className="grid gap-2 text-sm">
               {section.items.map((item, iIdx) => (
                 <div key={iIdx}>
-                  {iIdx > 0 && (
-                    <div className="mb-2 border-t border-subtle" role="presentation" />
-                  )}
+                  {iIdx > 0 && <div className="mb-2 border-t border-subtle" role="presentation" />}
                   <div className="flex items-start justify-between gap-4">
                     <dt className="text-muted">{item.label}</dt>
-                    <dd className="text-end font-medium text-primary">
-                      {item.value}
-                    </dd>
+                    <dd className="text-end font-medium text-primary">{item.value}</dd>
                   </div>
                 </div>
               ))}