@lablup/ui-common 0.1.0-alpha.9 → 0.2.0-alpha.15

package/dist/forks/Tour/Tour.js

@@ -0,0 +1,55 @@
+"use client";
+import { TourContext as e } from "./TourContext.js";
+import { useCallback as t, useEffect as n, useMemo as r, useState as i } from "react";
+import { jsx as a } from "react/jsx-runtime";
+//#region src/forks/Tour/Tour.tsx
+function o({ isActive: o, children: s, onDismiss: c, hasBackdrop: l = !1, isStepCountShown: u = !1 }) {
+	let [d, f] = i([]), [p, m] = i(0), h = t((e) => (f((t) => t.includes(e) ? t : [...t, e]), () => {
+		f((t) => t.filter((t) => t !== e));
+	}), []);
+	n(() => {
+		o || m(0);
+	}, [o]);
+	let g = d.length, _ = t(() => {
+		if (p < g - 1) {
+			m(p + 1);
+			return;
+		}
+		c("complete");
+	}, [
+		p,
+		g,
+		c
+	]), v = t(() => {
+		m((e) => e > 0 ? e - 1 : e);
+	}, []), y = o ? d[p] ?? null : null, b = r(() => ({
+		registerStep: h,
+		activeStepId: y,
+		activeStepIndex: p,
+		stepCount: g,
+		isStepCountShown: u,
+		hasBackdrop: l,
+		onNext: _,
+		onPrevious: v,
+		onDismiss: c
+	}), [
+		h,
+		y,
+		p,
+		g,
+		u,
+		l,
+		_,
+		v,
+		c
+	]);
+	return /* @__PURE__ */ a(e.Provider, {
+		value: b,
+		children: s
+	});
+}
+o.displayName = "Tour";
+//#endregion
+export { o as Tour };
+
+//# sourceMappingURL=Tour.js.map

package/dist/forks/Tour/Tour.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tour.js","names":[],"sources":["../../../src/forks/Tour/Tour.tsx"],"sourcesContent":["// Copyright (c) Meta Platforms, Inc. and affiliates.\n//\n// Forked from @astryxdesign/lab 0.6.2-canary.c9fb1ad, src/Tour/Tour.tsx\n// (MIT; see NOTICE). Unchanged: forked with TourStep, whose context it provides.\n// Provenance and the drift guard: src/forks/provenance.json.\n\n\"use client\";\n\n/**\n * @file Tour.tsx\n * @input Uses React state/refs, TourContext\n * @output Exports Tour controller component and TourProps\n * @position Lab experiment (facebook/astryx#4239); controller consumed by index.ts\n *\n * Tour is the controller for a product-tour / NUX walkthrough. It renders no\n * visible chrome of its own — it owns the tour state (active step, advance /\n * retreat / complete / dismiss) and shares it with declaratively-nested\n * `<TourStep>` children through context. Steps register on mount, so the step\n * ORDER is taken from the children in document order (no step array to keep in\n * sync with the markup).\n *\n * The behavior (a controller plus spotlight feature steps, an `isActive`\n * switch, dismiss-with-reason, and step progress) is composed from Astryx\n * primitives. Each step anchors its callout via Popover and draws its own\n * highlight/backdrop (see TourStep) — the controller owns no chrome.\n *\n * SYNC: When modified, update these files to stay in sync:\n * - /packages/lab/src/Tour/TourStep.tsx\n * - /packages/lab/src/Tour/TourContext.ts\n * - /packages/lab/src/Tour/useTour.ts\n * - /packages/lab/src/Tour/Tour.doc.mjs (props table, features)\n * - /packages/lab/src/Tour/Tour.test.tsx (tests for new/changed behavior)\n * - /packages/lab/src/Tour/index.ts (exports if types change)\n */\n\nimport { useCallback, useEffect, useMemo, useState, type ReactNode } from \"react\";\nimport {\n  TourContext,\n  type TourDismissSource,\n  type TourContextValue,\n} from \"./TourContext\";\n\nexport interface TourProps {\n  /**\n   * Whether the tour is running. When false, nothing renders and step state\n   * resets — the tour restarts from the first step next time it becomes active.\n   * (Controlled: the consumer owns \"has this user seen the tour?\".)\n   */\n  isActive: boolean;\n  /**\n   * The tour's steps — `<TourStep>` elements. Step order is taken from their\n   * order here; only the active step renders its callout.\n   */\n  children?: ReactNode;\n  /**\n   * Called when the tour is dismissed, with the reason. Fires for every exit,\n   * including completing the last step (`source === 'complete'`). The consumer\n   * flips `isActive` to false in response, and can branch on the source to tell\n   * a successful finish apart from an early skip/backdrop/escape.\n   */\n  onDismiss: (source: TourDismissSource) => void;\n  /**\n   * Dim the page around the active step's target (a spotlight cutout — the\n   * target stays lit, everything else darkens). Use for modal-style steps that\n   * demand focus; leave off for a lightweight coachmark that only rings the\n   * target.\n   * @default false\n   */\n  hasBackdrop?: boolean;\n  /**\n   * Show the step count (\"2 of 5\") in each step.\n   * @default false\n   */\n  isStepCountShown?: boolean;\n}\n\n/**\n * Controller for a guided product tour. Renders no chrome; coordinates the\n * active step among its `<TourStep>` children.\n *\n * @example\n * ```\n * const [isActive, setIsActive] = useState(true);\n * const saveRef = useRef(null);\n * const shareRef = useRef(null);\n * <Tour isActive={isActive} hasBackdrop isStepCountShown onDismiss={() => setIsActive(false)}>\n *   <TourStep targetRef={saveRef} heading=\"Save your work\">\n *     Changes save automatically to the cloud.\n *   </TourStep>\n *   <TourStep targetRef={shareRef} heading=\"Share it\">\n *     Invite teammates from here.\n *   </TourStep>\n * </Tour>\n * ```\n */\nexport function Tour({\n  isActive,\n  children,\n  onDismiss,\n  hasBackdrop = false,\n  isStepCountShown = false,\n}: TourProps) {\n  // Steps register on mount; insertion order (document order) defines the\n  // sequence. A plain array keeps registration order deterministic.\n  const [stepIds, setStepIds] = useState<string[]>([]);\n  const [activeStepIndex, setActiveStepIndex] = useState(0);\n\n  const registerStep = useCallback((id: string) => {\n    setStepIds((prev) => (prev.includes(id) ? prev : [...prev, id]));\n    return () => {\n      setStepIds((prev) => prev.filter((stepId) => stepId !== id));\n    };\n  }, []);\n\n  // Reset to the first step whenever the tour is (re)started, so a dismissed\n  // tour begins from the top next time isActive flips back on.\n  useEffect(() => {\n    if (!isActive) {\n      setActiveStepIndex(0);\n    }\n  }, [isActive]);\n\n  const stepCount = stepIds.length;\n\n  const onNext = useCallback(() => {\n    // Runs from a click/imperative call (never during render), so branch on the\n    // current index directly rather than inside a state updater — calling\n    // onDismiss from within setState triggers a \"setState while rendering\"\n    // warning.\n    if (activeStepIndex < stepCount - 1) {\n      setActiveStepIndex(activeStepIndex + 1);\n      return;\n    }\n    // Past the last step → complete. onDismiss carries the reason so a\n    // consumer can branch on 'complete' vs an early exit.\n    onDismiss(\"complete\");\n  }, [activeStepIndex, stepCount, onDismiss]);\n\n  const onPrevious = useCallback(() => {\n    setActiveStepIndex((prev) => (prev > 0 ? prev - 1 : prev));\n  }, []);\n\n  const activeStepId = isActive ? (stepIds[activeStepIndex] ?? null) : null;\n\n  const contextValue = useMemo<TourContextValue>(\n    () => ({\n      registerStep,\n      activeStepId,\n      activeStepIndex,\n      stepCount,\n      isStepCountShown,\n      hasBackdrop,\n      onNext,\n      onPrevious,\n      onDismiss,\n    }),\n    [\n      registerStep,\n      activeStepId,\n      activeStepIndex,\n      stepCount,\n      isStepCountShown,\n      hasBackdrop,\n      onNext,\n      onPrevious,\n      onDismiss,\n    ],\n  );\n\n  return <TourContext.Provider value={contextValue}>{children}</TourContext.Provider>;\n}\n\nTour.displayName = \"Tour\";\n"],"mappings":";;;;;AA+FA,SAAgB,EAAK,EACnB,aACA,aACA,cACA,iBAAc,IACd,sBAAmB,MACP;CAGZ,IAAM,CAAC,GAAS,KAAc,EAAmB,CAAC,CAAC,GAC7C,CAAC,GAAiB,KAAsB,EAAS,CAAC,GAElD,IAAe,GAAa,OAChC,GAAY,MAAU,EAAK,SAAS,CAAE,IAAI,IAAO,CAAC,GAAG,GAAM,CAAE,CAAE,SAClD;EACX,GAAY,MAAS,EAAK,QAAQ,MAAW,MAAW,CAAE,CAAC;CAC7D,IACC,CAAC,CAAC;CAIL,QAAgB;EACd,AAAK,KACH,EAAmB,CAAC;CAExB,GAAG,CAAC,CAAQ,CAAC;CAEb,IAAM,IAAY,EAAQ,QAEpB,IAAS,QAAkB;EAK/B,IAAI,IAAkB,IAAY,GAAG;GACnC,EAAmB,IAAkB,CAAC;GACtC;EACF;EAGA,EAAU,UAAU;CACtB,GAAG;EAAC;EAAiB;EAAW;CAAS,CAAC,GAEpC,IAAa,QAAkB;EACnC,GAAoB,MAAU,IAAO,IAAI,IAAO,IAAI,CAAK;CAC3D,GAAG,CAAC,CAAC,GAEC,IAAe,IAAY,EAAQ,MAAoB,OAAQ,MAE/D,IAAe,SACZ;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,IACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAEA,OAAO,kBAAC,EAAY,UAAb;EAAsB,OAAO;EAAe;CAA+B,CAAA;AACpF;AAEA,EAAK,cAAc"}

package/dist/forks/Tour/TourContext.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Why a tour was dismissed. Lets a consumer distinguish "finished the whole
+ * tour" from the various early exits, so it can persist "has seen this tour"
+ * appropriately.
+ * - `backdrop`: clicked the dimmed background
+ * - `escape`: pressed Escape at any step
+ * - `close`: pressed the step's close (X) control
+ * - `skip`: chose "skip"/"maybe later" on the first step
+ * - `complete`: advanced past the final step
+ */
+export type TourDismissSource = "backdrop" | "escape" | "close" | "skip" | "complete";
+/**
+ * Value shared from the Tour controller to its steps. Steps register
+ * themselves on mount (so the controller learns the step order from the
+ * children, in document order) and read whether they are the active step.
+ */
+export interface TourContextValue {
+    /** Register a step by its stable id; returns an unregister cleanup. */
+    registerStep: (id: string) => () => void;
+    /** The id of the step that is currently active, or null when none. */
+    activeStepId: string | null;
+    /** Zero-based index of the active step among registered steps. */
+    activeStepIndex: number;
+    /** Total number of registered steps. */
+    stepCount: number;
+    /** Whether the tour's step count should be shown in each step. */
+    isStepCountShown: boolean;
+    /** Whether a dimmed background is shown behind the active step. */
+    hasBackdrop: boolean;
+    /** Advance to the next step (or complete on the last step). */
+    onNext: () => void;
+    /** Return to the previous step (no-op on the first step). */
+    onPrevious: () => void;
+    /** Dismiss the tour with a reason. */
+    onDismiss: (source: TourDismissSource) => void;
+}
+export declare const TourContext: import('react').Context<TourContextValue | null>;

package/dist/forks/Tour/TourContext.js

@@ -0,0 +1,8 @@
+"use client";
+import { createContext as e } from "react";
+//#region src/forks/Tour/TourContext.ts
+var t = e(null);
+//#endregion
+export { t as TourContext };
+
+//# sourceMappingURL=TourContext.js.map

package/dist/forks/Tour/TourContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TourContext.js","names":[],"sources":["../../../src/forks/Tour/TourContext.ts"],"sourcesContent":["// Copyright (c) Meta Platforms, Inc. and affiliates.\n//\n// Forked from @astryxdesign/lab 0.6.2-canary.c9fb1ad, src/Tour/TourContext.ts\n// (MIT; see NOTICE). Unchanged: forked with TourStep, which reads it.\n// Provenance and the drift guard: src/forks/provenance.json.\n\n\"use client\";\n\n/**\n * @file TourContext.ts\n * @input Uses React createContext\n * @output Exports TourContext, TourContextValue, TourDismissSource\n * @position Internal context; provided by Tour, consumed by TourStep + useTour\n *\n * SYNC: When modified, update these files to stay in sync:\n * - /packages/lab/src/Tour/Tour.tsx\n * - /packages/lab/src/Tour/TourStep.tsx\n * - /packages/lab/src/Tour/useTour.ts\n * - /packages/lab/src/Tour/Tour.doc.mjs\n */\n\nimport { createContext } from \"react\";\n\n/**\n * Why a tour was dismissed. Lets a consumer distinguish \"finished the whole\n * tour\" from the various early exits, so it can persist \"has seen this tour\"\n * appropriately.\n * - `backdrop`: clicked the dimmed background\n * - `escape`: pressed Escape at any step\n * - `close`: pressed the step's close (X) control\n * - `skip`: chose \"skip\"/\"maybe later\" on the first step\n * - `complete`: advanced past the final step\n */\nexport type TourDismissSource = \"backdrop\" | \"escape\" | \"close\" | \"skip\" | \"complete\";\n\n/**\n * Value shared from the Tour controller to its steps. Steps register\n * themselves on mount (so the controller learns the step order from the\n * children, in document order) and read whether they are the active step.\n */\nexport interface TourContextValue {\n  /** Register a step by its stable id; returns an unregister cleanup. */\n  registerStep: (id: string) => () => void;\n  /** The id of the step that is currently active, or null when none. */\n  activeStepId: string | null;\n  /** Zero-based index of the active step among registered steps. */\n  activeStepIndex: number;\n  /** Total number of registered steps. */\n  stepCount: number;\n  /** Whether the tour's step count should be shown in each step. */\n  isStepCountShown: boolean;\n  /** Whether a dimmed background is shown behind the active step. */\n  hasBackdrop: boolean;\n  /** Advance to the next step (or complete on the last step). */\n  onNext: () => void;\n  /** Return to the previous step (no-op on the first step). */\n  onPrevious: () => void;\n  /** Dismiss the tour with a reason. */\n  onDismiss: (source: TourDismissSource) => void;\n}\n\nexport const TourContext = createContext<TourContextValue | null>(null);\n"],"mappings":";;;AA6DA,IAAa,IAAc,EAAuC,IAAI"}

package/dist/forks/Tour/TourStep.d.ts

@@ -0,0 +1,43 @@
+import { ReactNode } from 'react';
+import { LayerAlignment, LayerPlacement } from '@astryxdesign/core/Layer';
+export interface TourStepProps {
+    /**
+     * Ref to the element this step points at. The callout anchors to it (like a
+     * Popover trigger); it must be a `<button>` or `[role="button"]` element,
+     * matching Popover's `anchorRef` contract. Accepts a ref to any HTMLElement
+     * subtype (e.g. `useRef<HTMLButtonElement>(null)`).
+     */
+    targetRef: React.RefObject<HTMLElement | null>;
+    /** Step heading. */
+    heading: ReactNode;
+    /** Step body content. */
+    children?: ReactNode;
+    /**
+     * Which side of the target the callout sits on.
+     * @default 'below'
+     */
+    placement?: LayerPlacement;
+    /**
+     * How the callout aligns along the placement side — e.g. with `placement="below"`,
+     * `start` left-aligns it under the target, `center` centers it, `end` right-aligns it.
+     * @default 'start'
+     */
+    alignment?: LayerAlignment;
+    /** Test id applied to the callout content. */
+    "data-testid"?: string;
+}
+/**
+ * A single spotlight step within a `<Tour>`. Renders its callout only while
+ * active.
+ *
+ * @example
+ * ```
+ * <TourStep targetRef={saveRef} heading="Save your work">
+ *   Changes save automatically.
+ * </TourStep>
+ * ```
+ */
+export declare function TourStep({ targetRef, heading, children, placement, alignment, "data-testid": testId, }: TourStepProps): import("react").JSX.Element | null;
+export declare namespace TourStep {
+    var displayName: string;
+}

package/dist/forks/Tour/TourStep.js

@@ -0,0 +1,134 @@
+"use client";
+import { compiledStyles as e } from "../compiled.js";
+import { TourContext as t } from "./TourContext.js";
+import { styles as n } from "./TourStep.styles.js";
+import { useContext as r, useEffect as i, useId as a, useLayoutEffect as o, useRef as s, useState as c } from "react";
+import { Button as l } from "@astryxdesign/core/Button";
+import { Heading as u } from "@astryxdesign/core/Heading";
+import { HStack as d, VStack as f } from "@astryxdesign/core/Layout";
+import { Text as p } from "@astryxdesign/core/Text";
+import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
+import { Popover as _ } from "@astryxdesign/core/Popover";
+//#region src/forks/Tour/TourStep.tsx
+var v = typeof window < "u" ? o : i, y = 4, b = e(n), x = {
+	coachmark: "xixxii4 x10a8y8t x1ghz6dp x1717udv xc342km xng3xce xjbqb8w x1rea2x4 x47corl",
+	backdrop: "xixxii4 x10a8y8t x1ghz6dp x1717udv xc342km xng3xce xjbqb8w x1rea2x4 x67bb7w"
+};
+function S(e, t) {
+	return e ? t ? "x10l6tqk x47corl x1gfj591 xuedmi6 xlr8y92 xefcaua xg01cxk" : "x10l6tqk x47corl x1gfj591 xuedmi6 xlr8y92 xefcaua" : t ? "x10l6tqk x47corl xr5mita x1gfj591 xuedmi6 xlr8y92 xg01cxk" : "x10l6tqk x47corl xr5mita x1gfj591 xuedmi6 xlr8y92";
+}
+var C = "x78zum5 xdt5ytf xjcht0a x1va8c73", w = {
+	below: b.calloutGapBelow,
+	above: b.calloutGapAbove,
+	start: b.calloutGapStart,
+	end: b.calloutGapEnd
+};
+function T({ rect: e, hasBackdrop: t, onBackdropClick: n }) {
+	let r = s(null);
+	return v(() => {
+		let e = r.current;
+		e != null && typeof e.showPopover == "function" && (e.matches(":popover-open") || e.showPopover());
+	}, []), /* @__PURE__ */ h("div", {
+		ref: r,
+		popover: "manual",
+		"data-testid": t ? "tour-backdrop" : void 0,
+		"aria-hidden": "true",
+		onClick: t ? n : void 0,
+		className: t ? x.backdrop : x.coachmark,
+		children: /* @__PURE__ */ h("div", {
+			"data-testid": "tour-highlight",
+			className: S(t, e == null),
+			style: e == null ? void 0 : {
+				top: e.top - y,
+				left: e.left - y,
+				width: e.width + 8,
+				height: e.height + 8,
+				borderRadius: e.radius
+			}
+		})
+	});
+}
+function E({ targetRef: e, heading: n, children: o, placement: s = "below", alignment: v = "start", "data-testid": y }) {
+	let x = r(t), S = a(), E = x != null && x.activeStepId === S, [D, O] = c(null);
+	if (i(() => {
+		if (x != null) return x.registerStep(S);
+	}, [x, S]), i(() => {
+		let t = e.current;
+		if (t == null || !E) {
+			O(null);
+			return;
+		}
+		let n = () => {
+			let e = t.getBoundingClientRect();
+			O({
+				top: e.top,
+				left: e.left,
+				width: e.width,
+				height: e.height,
+				radius: getComputedStyle(t).borderRadius || "0px"
+			});
+		};
+		return n(), window.addEventListener("scroll", n, !0), window.addEventListener("resize", n), () => {
+			window.removeEventListener("scroll", n, !0), window.removeEventListener("resize", n), O(null);
+		};
+	}, [e, E]), x == null || !E) return null;
+	let { activeStepIndex: k, stepCount: A, isStepCountShown: j, hasBackdrop: M, onNext: N, onPrevious: P, onDismiss: F } = x, I = k <= 0, L = A > 0 && k === A - 1, R = /* @__PURE__ */ g("div", {
+		className: C,
+		"data-testid": y,
+		children: [/* @__PURE__ */ g(f, {
+			gap: 1,
+			children: [/* @__PURE__ */ h(u, {
+				level: 4,
+				children: n
+			}), o != null && /* @__PURE__ */ h(p, {
+				type: "body",
+				children: o
+			})]
+		}), /* @__PURE__ */ g(d, {
+			gap: 2,
+			xstyle: b.footer,
+			children: [j && A > 0 ? /* @__PURE__ */ h(p, {
+				type: "supporting",
+				color: "secondary",
+				children: `${k + 1} of ${A}`
+			}) : /* @__PURE__ */ h("span", {}), /* @__PURE__ */ g(d, {
+				gap: 2,
+				children: [!I && /* @__PURE__ */ h(l, {
+					variant: "ghost",
+					size: "sm",
+					label: "Back",
+					onClick: P
+				}), /* @__PURE__ */ h(l, {
+					variant: "primary",
+					size: "sm",
+					label: L ? "Done" : "Next",
+					onClick: N
+				})]
+			})]
+		})]
+	});
+	return /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h(T, {
+		rect: D,
+		hasBackdrop: M,
+		onBackdropClick: () => F("backdrop")
+	}), /* @__PURE__ */ h(_, {
+		anchorRef: e,
+		isOpen: !0,
+		onOpenChange: (e) => {
+			e || F("close");
+		},
+		placement: s,
+		alignment: v,
+		width: "fit-content",
+		xstyle: w[s],
+		label: typeof n == "string" ? n : "Tour step",
+		hasCloseButton: !0,
+		closeButtonLabel: "Close tour",
+		content: R
+	})] });
+}
+E.displayName = "TourStep";
+//#endregion
+export { E as TourStep };
+
+//# sourceMappingURL=TourStep.js.map

package/dist/forks/Tour/TourStep.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TourStep.js","names":[],"sources":["../../../src/forks/Tour/TourStep.tsx"],"sourcesContent":["// Copyright (c) Meta Platforms, Inc. and affiliates.\n// Modifications copyright (c) Lablup Inc.\n//\n// Forked from @astryxdesign/lab 0.6.2-canary.c9fb1ad, src/Tour/TourStep.tsx\n// (MIT; see NOTICE). Provenance and the drift guard: src/forks/provenance.json.\n\n\"use client\";\n\n/**\n * TourStep, ui-common's copy of Astryx lab's, with one fix applied (not yet\n * upstream): the highlight overlay is promoted into the top layer exactly\n * once and never hidden and re-shown. Top-layer order is promotion order, so\n * the re-promotion React StrictMode's double-invoked effect caused moved the\n * overlay ABOVE the callout and painted the spotlight dim over it. Detaching\n * the node takes it out of the top layer, so no cleanup is needed.\n *\n * `Tour`, `TourContext` and `useTour` are forked unchanged with it, since the\n * step reads the controller's context. Everything else is upstream's. Its\n * style namespace is Astryx's compiled output (src/forks/compiled.ts).\n *\n * Delete this fork, and its exports.exclude.json entry, once lab ships the\n * fix (CONTRIBUTING, \"Forks of Astryx components\").\n */\n\n/*\n * Upstream's file notes, kept:\n *\n * A TourStep highlights a target element and renders a callout anchored to it,\n * with a heading, body, optional step progress (\"2 of 5\"), and back / next /\n * close controls. It registers with the parent `<Tour>` on mount (so step\n * order follows the children) and only renders its callout while it is the\n * active step. Anchoring + the callout surface reuse the core `Popover`\n * (`anchorRef` → the step's target), so positioning, top-layer rendering, and\n * dismiss semantics come from the existing layer system rather than a bespoke\n * implementation.\n *\n * The highlight is drawn as a separate overlay tracking the target's box — the\n * consumer's element is never restyled, so there is no cascade fight with the\n * target's own styles. That overlay is promoted into the browser TOP LAYER\n * (via the popover API, like the rest of the layer system) so it sits above\n * page content without any hardcoded z-index; the callout is promoted after\n * it, so the callout stays above the highlight. Because it is promoted in\n * place (not portaled out of the tree), it stays inside the consumer's Theme\n * subtree and inherits theme tokens — including a scoped/nested theme's accent\n * for the ring. Dimming is an opt-in spotlight cutout (dims around the target,\n * not over it) rather than a flat scrim.\n */\n\nimport {\n  useContext,\n  useEffect,\n  useId,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type ReactNode,\n} from \"react\";\nimport { Popover } from \"@astryxdesign/core/Popover\";\nimport type { LayerAlignment, LayerPlacement } from \"@astryxdesign/core/Layer\";\nimport { Button } from \"@astryxdesign/core/Button\";\nimport { Text } from \"@astryxdesign/core/Text\";\nimport { Heading } from \"@astryxdesign/core/Heading\";\nimport { VStack, HStack } from \"@astryxdesign/core/Layout\";\n\nimport { compiledStyles } from \"../compiled\";\nimport * as compiled from \"./TourStep.styles\";\nimport { TourContext } from \"./TourContext\";\n\n// Client-only layout effect (SSR renders no overlay, so this only runs on the\n// client). Kept local since core does not export its isomorphic variant.\nconst useClientLayoutEffect =\n  typeof window !== \"undefined\" ? useLayoutEffect : useEffect;\n\n// Gap between the target's edge and the highlight ring, in px.\nconst HIGHLIGHT_PADDING = 4;\n\ninterface TargetRect {\n  top: number;\n  left: number;\n  width: number;\n  height: number;\n  radius: string;\n}\n\n// @astryxdesign/lab dist/Tour/TourStep.js `styles`.\nconst styles = compiledStyles(compiled.styles);\n\n// Upstream's `overlayRoot`/`overlayInteractive`, `highlight`/`cutout`/`hidden`\n// and `content` styles, which its compiler folded into these class lists\n// (dist/Tour/TourStep.js).\nconst OVERLAY_CLASS_NAME = {\n  coachmark:\n    \"xixxii4 x10a8y8t x1ghz6dp x1717udv xc342km xng3xce xjbqb8w x1rea2x4 x47corl\",\n  backdrop:\n    \"xixxii4 x10a8y8t x1ghz6dp x1717udv xc342km xng3xce xjbqb8w x1rea2x4 x67bb7w\",\n};\nfunction highlightClassName(hasBackdrop: boolean, isHidden: boolean): string {\n  if (hasBackdrop) {\n    return isHidden\n      ? \"x10l6tqk x47corl x1gfj591 xuedmi6 xlr8y92 xefcaua xg01cxk\"\n      : \"x10l6tqk x47corl x1gfj591 xuedmi6 xlr8y92 xefcaua\";\n  }\n  return isHidden\n    ? \"x10l6tqk x47corl xr5mita x1gfj591 xuedmi6 xlr8y92 xg01cxk\"\n    : \"x10l6tqk x47corl xr5mita x1gfj591 xuedmi6 xlr8y92\";\n}\nconst CONTENT_CLASS_NAME = \"x78zum5 xdt5ytf xjcht0a x1va8c73\";\n\nconst calloutGapStyles = {\n  below: styles.calloutGapBelow,\n  above: styles.calloutGapAbove,\n  start: styles.calloutGapStart,\n  end: styles.calloutGapEnd,\n} as const;\n\n/**\n * The highlight overlay: a top-layer box sized to the target, plus an optional\n * spotlight-cutout dim. Rendered inline (not portaled) so it stays inside the\n * consumer's Theme subtree and inherits theme tokens — the popover API promotes\n * it into the top layer in place. Rendered before the callout so the callout\n * promotes on top of it; promoted once (never re-promoted) so that ordering\n * holds across re-measures.\n */\nfunction TourHighlight({\n  rect,\n  hasBackdrop,\n  onBackdropClick,\n}: {\n  rect: TargetRect | null;\n  hasBackdrop: boolean;\n  onBackdropClick: () => void;\n}) {\n  const ref = useRef<HTMLDivElement>(null);\n\n  useClientLayoutEffect(() => {\n    const el = ref.current;\n    if (el == null || typeof el.showPopover !== \"function\") {\n      return;\n    }\n    // ui-common: promote exactly once, and never hide-then-reshow: top-layer\n    // order is promotion order, so a re-promotion (React StrictMode's dev\n    // double-invoke of this effect) would move the overlay ABOVE the callout\n    // and paint the spotlight dim over it. Detaching the node drops it from\n    // the top layer.\n    if (!el.matches(\":popover-open\")) {\n      el.showPopover();\n    }\n  }, []);\n\n  return (\n    <div\n      ref={ref}\n      popover=\"manual\"\n      data-testid={hasBackdrop ? \"tour-backdrop\" : undefined}\n      aria-hidden=\"true\"\n      onClick={hasBackdrop ? onBackdropClick : undefined}\n      className={\n        hasBackdrop ? OVERLAY_CLASS_NAME.backdrop : OVERLAY_CLASS_NAME.coachmark\n      }\n    >\n      <div\n        data-testid=\"tour-highlight\"\n        className={highlightClassName(hasBackdrop, rect == null)}\n        style={\n          rect != null\n            ? {\n                top: rect.top - HIGHLIGHT_PADDING,\n                left: rect.left - HIGHLIGHT_PADDING,\n                width: rect.width + HIGHLIGHT_PADDING * 2,\n                height: rect.height + HIGHLIGHT_PADDING * 2,\n                borderRadius: rect.radius,\n              }\n            : undefined\n        }\n      />\n    </div>\n  );\n}\n\nexport interface TourStepProps {\n  /**\n   * Ref to the element this step points at. The callout anchors to it (like a\n   * Popover trigger); it must be a `<button>` or `[role=\"button\"]` element,\n   * matching Popover's `anchorRef` contract. Accepts a ref to any HTMLElement\n   * subtype (e.g. `useRef<HTMLButtonElement>(null)`).\n   */\n  targetRef: React.RefObject<HTMLElement | null>;\n  /** Step heading. */\n  heading: ReactNode;\n  /** Step body content. */\n  children?: ReactNode;\n  /**\n   * Which side of the target the callout sits on.\n   * @default 'below'\n   */\n  placement?: LayerPlacement;\n  /**\n   * How the callout aligns along the placement side — e.g. with `placement=\"below\"`,\n   * `start` left-aligns it under the target, `center` centers it, `end` right-aligns it.\n   * @default 'start'\n   */\n  alignment?: LayerAlignment;\n  /** Test id applied to the callout content. */\n  \"data-testid\"?: string;\n}\n\n/**\n * A single spotlight step within a `<Tour>`. Renders its callout only while\n * active.\n *\n * @example\n * ```\n * <TourStep targetRef={saveRef} heading=\"Save your work\">\n *   Changes save automatically.\n * </TourStep>\n * ```\n */\nexport function TourStep({\n  targetRef,\n  heading,\n  children,\n  placement = \"below\",\n  alignment = \"start\",\n  \"data-testid\": testId,\n}: TourStepProps) {\n  const tour = useContext(TourContext);\n  const id = useId();\n  const isActiveStep = tour != null && tour.activeStepId === id;\n\n  // The active target's viewport box, tracked so the highlight overlay can sit\n  // exactly over it. null until measured (or when inactive).\n  const [rect, setRect] = useState<TargetRect | null>(null);\n\n  // Register with the controller on mount so the tour learns this step (and\n  // its position among siblings). Unregister on unmount.\n  useEffect(() => {\n    if (tour == null) {\n      return;\n    }\n    return tour.registerStep(id);\n  }, [tour, id]);\n\n  // Track the target's box while this step is active. Re-measure on\n  // scroll/resize so the highlight stays glued to the target.\n  useEffect(() => {\n    const el = targetRef.current;\n    if (el == null || !isActiveStep) {\n      setRect(null);\n      return;\n    }\n    const measure = () => {\n      const box = el.getBoundingClientRect();\n      setRect({\n        top: box.top,\n        left: box.left,\n        width: box.width,\n        height: box.height,\n        radius: getComputedStyle(el).borderRadius || \"0px\",\n      });\n    };\n    measure();\n    window.addEventListener(\"scroll\", measure, true);\n    window.addEventListener(\"resize\", measure);\n    return () => {\n      window.removeEventListener(\"scroll\", measure, true);\n      window.removeEventListener(\"resize\", measure);\n      setRect(null);\n    };\n  }, [targetRef, isActiveStep]);\n\n  // Outside a <Tour>, or when this isn't the active step, render nothing.\n  if (tour == null || !isActiveStep) {\n    return null;\n  }\n\n  const {\n    activeStepIndex,\n    stepCount,\n    isStepCountShown,\n    hasBackdrop,\n    onNext,\n    onPrevious,\n    onDismiss,\n  } = tour;\n\n  const isFirstStep = activeStepIndex <= 0;\n  const isLastStep = stepCount > 0 && activeStepIndex === stepCount - 1;\n\n  const content = (\n    <div className={CONTENT_CLASS_NAME} data-testid={testId}>\n      <VStack gap={1}>\n        <Heading level={4}>{heading}</Heading>\n        {children != null && <Text type=\"body\">{children}</Text>}\n      </VStack>\n      <HStack gap={2} xstyle={styles.footer}>\n        {isStepCountShown && stepCount > 0 ? (\n          <Text type=\"supporting\" color=\"secondary\">\n            {`${activeStepIndex + 1} of ${stepCount}`}\n          </Text>\n        ) : (\n          <span />\n        )}\n        <HStack gap={2}>\n          {!isFirstStep && (\n            <Button variant=\"ghost\" size=\"sm\" label=\"Back\" onClick={onPrevious} />\n          )}\n          <Button\n            variant=\"primary\"\n            size=\"sm\"\n            label={isLastStep ? \"Done\" : \"Next\"}\n            onClick={onNext}\n          />\n        </HStack>\n      </HStack>\n    </div>\n  );\n\n  return (\n    <>\n      {/* Rendered before the callout so the callout promotes above it in the\n          top layer (callout > highlight > page). */}\n      <TourHighlight\n        rect={rect}\n        hasBackdrop={hasBackdrop}\n        onBackdropClick={() => onDismiss(\"backdrop\")}\n      />\n      <Popover\n        // Popover types anchorRef as RefObject<HTMLElement>; TourStep accepts a\n        // nullable ref for ergonomics (useRef<HTMLButtonElement>(null)). Popover\n        // guards a null `.current` internally, so this widening is safe.\n        anchorRef={targetRef as React.RefObject<HTMLElement>}\n        isOpen\n        onOpenChange={(open) => {\n          // Popover reports close from light-dismiss (backdrop) or Escape.\n          // Route it to the tour as a dismissal so the whole tour ends, not\n          // just this step's popover. Escape and outside-click both surface\n          // here.\n          if (!open) {\n            onDismiss(\"close\");\n          }\n        }}\n        placement={placement}\n        alignment={alignment}\n        // Size the callout to its content instead of matching the target's\n        // width (Popover's default minWidth: anchor-size(width) makes it span a\n        // wide target); the content's own maxWidth caps it.\n        width=\"fit-content\"\n        // Push the callout clear of the highlight ring so the ring is never\n        // covered (placement-aware; adds to Popover's own anchor gap).\n        xstyle={calloutGapStyles[placement]}\n        label={typeof heading === \"string\" ? heading : \"Tour step\"}\n        hasCloseButton\n        closeButtonLabel=\"Close tour\"\n        content={content}\n      />\n    </>\n  );\n}\n\nTourStep.displayName = \"TourStep\";\n"],"mappings":"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"}

package/dist/forks/Tour/TourStep.styles.d.ts

@@ -0,0 +1,23 @@
+export declare const styles: {
+    footer: {
+        kGNEyG: string;
+        kjj79g: string;
+        $$css: boolean;
+    };
+    calloutGapBelow: {
+        keoZOQ: string;
+        $$css: boolean;
+    };
+    calloutGapAbove: {
+        k1K539: string;
+        $$css: boolean;
+    };
+    calloutGapStart: {
+        k71WvV: string;
+        $$css: boolean;
+    };
+    calloutGapEnd: {
+        keTefX: string;
+        $$css: boolean;
+    };
+};

package/dist/forks/Tour/TourStep.styles.js

@@ -0,0 +1,28 @@
+//#region src/forks/Tour/TourStep.styles.ts
+var e = {
+	footer: {
+		kGNEyG: "x6s0dn4",
+		kjj79g: "x1qughib",
+		$$css: !0
+	},
+	calloutGapBelow: {
+		keoZOQ: "xtbrsbv",
+		$$css: !0
+	},
+	calloutGapAbove: {
+		k1K539: "x1p37lm5",
+		$$css: !0
+	},
+	calloutGapStart: {
+		k71WvV: "x1pezmd8",
+		$$css: !0
+	},
+	calloutGapEnd: {
+		keTefX: "x1cmpsy9",
+		$$css: !0
+	}
+};
+//#endregion
+export { e as styles };
+
+//# sourceMappingURL=TourStep.styles.js.map

package/dist/forks/Tour/TourStep.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TourStep.styles.js","names":[],"sources":["../../../src/forks/Tour/TourStep.styles.ts"],"sourcesContent":["/* eslint-disable */\n// @ts-nocheck\n// @generated by scripts/sync-forks.mjs. Do not edit.\n//\n// Compiled StyleX from @astryxdesign/lab 0.6.2-canary.c9fb1ad, reused by the\n// Tour fork so it renders with upstream's own class names\n// (src/forks/compiled.ts). Copyright (c) Meta Platforms, Inc. and\n// affiliates; MIT, see NOTICE.\n\n// dist/Tour/TourStep.js\nexport const styles = {\n  footer: {\n    kGNEyG: \"x6s0dn4\",\n    kjj79g: \"x1qughib\",\n    $$css: true,\n  },\n  calloutGapBelow: {\n    keoZOQ: \"xtbrsbv\",\n    $$css: true,\n  },\n  calloutGapAbove: {\n    k1K539: \"x1p37lm5\",\n    $$css: true,\n  },\n  calloutGapStart: {\n    k71WvV: \"x1pezmd8\",\n    $$css: true,\n  },\n  calloutGapEnd: {\n    keTefX: \"x1cmpsy9\",\n    $$css: true,\n  },\n};\n"],"mappings":";AAUA,IAAa,IAAS;CACpB,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,iBAAiB;EACf,QAAQ;EACR,OAAO;CACT;CACA,iBAAiB;EACf,QAAQ;EACR,OAAO;CACT;CACA,iBAAiB;EACf,QAAQ;EACR,OAAO;CACT;CACA,eAAe;EACb,QAAQ;EACR,OAAO;CACT;AACF"}

package/dist/forks/Tour/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * ui-common's copy of Astryx lab's Tour, exported from
+ * `@lablup/ui-common/lab` in place of lab's (exports.exclude.json).
+ */
+export { Tour } from './Tour';
+export type { TourProps } from './Tour';
+export { TourStep } from './TourStep';
+export type { TourStepProps } from './TourStep';
+export { useTour } from './useTour';
+export type { UseTourReturn } from './useTour';
+export type { TourDismissSource } from './TourContext';

package/dist/forks/Tour/index.js

@@ -0,0 +1,4 @@
+import { Tour as e } from "./Tour.js";
+import { TourStep as t } from "./TourStep.js";
+import { useTour as n } from "./useTour.js";
+export { e as Tour, t as TourStep, n as useTour };

package/dist/forks/Tour/useTour.d.ts

@@ -0,0 +1,26 @@
+import { TourDismissSource } from './TourContext';
+/**
+ * Read-only view of the active Tour's state, for custom step UIs or
+ * instrumentation. Returns `null` when called outside a `<Tour>`.
+ */
+export interface UseTourReturn {
+    /** Zero-based index of the active step. */
+    activeStepIndex: number;
+    /** Total number of registered steps. */
+    stepCount: number;
+    /** Whether the active step is the first one. */
+    isFirstStep: boolean;
+    /** Whether the active step is the last one. */
+    isLastStep: boolean;
+    /** Advance to the next step (or complete on the last step). */
+    next: () => void;
+    /** Return to the previous step. */
+    previous: () => void;
+    /** Dismiss the tour with a reason. */
+    dismiss: (source: TourDismissSource) => void;
+}
+/**
+ * Access the current Tour controller state. Must be used inside a `<Tour>`;
+ * returns `null` otherwise so callers can guard.
+ */
+export declare function useTour(): UseTourReturn | null;

package/dist/forks/Tour/useTour.js

@@ -0,0 +1,20 @@
+"use client";
+import { TourContext as e } from "./TourContext.js";
+import { useContext as t } from "react";
+//#region src/forks/Tour/useTour.ts
+function n() {
+	let n = t(e);
+	return n == null ? null : {
+		activeStepIndex: n.activeStepIndex,
+		stepCount: n.stepCount,
+		isFirstStep: n.activeStepIndex <= 0,
+		isLastStep: n.stepCount > 0 && n.activeStepIndex === n.stepCount - 1,
+		next: n.onNext,
+		previous: n.onPrevious,
+		dismiss: n.onDismiss
+	};
+}
+//#endregion
+export { n as useTour };
+
+//# sourceMappingURL=useTour.js.map

package/dist/forks/Tour/useTour.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTour.js","names":[],"sources":["../../../src/forks/Tour/useTour.ts"],"sourcesContent":["// Copyright (c) Meta Platforms, Inc. and affiliates.\n//\n// Forked from @astryxdesign/lab 0.6.2-canary.c9fb1ad, src/Tour/useTour.ts\n// (MIT; see NOTICE). Unchanged: forked with TourStep, whose context it reads.\n// Provenance and the drift guard: src/forks/provenance.json.\n\n\"use client\";\n\n/**\n * @file useTour.ts\n * @input Uses React useContext, TourContext\n * @output Exports useTour hook and UseTourReturn type\n * @position Public hook; reads the nearest Tour controller's state\n *\n * SYNC: When modified, update these files to stay in sync:\n * - /packages/lab/src/Tour/TourContext.ts\n * - /packages/lab/src/Tour/Tour.doc.mjs\n */\n\nimport { useContext } from \"react\";\nimport { TourContext, type TourDismissSource } from \"./TourContext\";\n\n/**\n * Read-only view of the active Tour's state, for custom step UIs or\n * instrumentation. Returns `null` when called outside a `<Tour>`.\n */\nexport interface UseTourReturn {\n  /** Zero-based index of the active step. */\n  activeStepIndex: number;\n  /** Total number of registered steps. */\n  stepCount: number;\n  /** Whether the active step is the first one. */\n  isFirstStep: boolean;\n  /** Whether the active step is the last one. */\n  isLastStep: boolean;\n  /** Advance to the next step (or complete on the last step). */\n  next: () => void;\n  /** Return to the previous step. */\n  previous: () => void;\n  /** Dismiss the tour with a reason. */\n  dismiss: (source: TourDismissSource) => void;\n}\n\n/**\n * Access the current Tour controller state. Must be used inside a `<Tour>`;\n * returns `null` otherwise so callers can guard.\n */\nexport function useTour(): UseTourReturn | null {\n  const ctx = useContext(TourContext);\n  if (ctx == null) {\n    return null;\n  }\n  return {\n    activeStepIndex: ctx.activeStepIndex,\n    stepCount: ctx.stepCount,\n    isFirstStep: ctx.activeStepIndex <= 0,\n    isLastStep: ctx.stepCount > 0 && ctx.activeStepIndex === ctx.stepCount - 1,\n    next: ctx.onNext,\n    previous: ctx.onPrevious,\n    dismiss: ctx.onDismiss,\n  };\n}\n"],"mappings":";;;;AA+CA,SAAgB,IAAgC;CAC9C,IAAM,IAAM,EAAW,CAAW;CAIlC,OAHI,KAAO,OACF,OAEF;EACL,iBAAiB,EAAI;EACrB,WAAW,EAAI;EACf,aAAa,EAAI,mBAAmB;EACpC,YAAY,EAAI,YAAY,KAAK,EAAI,oBAAoB,EAAI,YAAY;EACzE,MAAM,EAAI;EACV,UAAU,EAAI;EACd,SAAS,EAAI;CACf;AACF"}

package/dist/forks/compiled.d.ts

@@ -0,0 +1,5 @@
+import { StyleXStyles } from '@stylexjs/stylex';
+/** One compiled StyleX namespace entry: `{ <property key>: "<classes>", $$css: true }`. */
+export type CompiledStyle = Readonly<Record<string, string | boolean>>;
+/** Types a compiled namespace for `stylex.props` and `xstyle`. */
+export declare function compiledStyles<K extends string>(styles: Record<K, CompiledStyle>): Record<K, StyleXStyles>;

package/dist/forks/compiled.js

@@ -0,0 +1,8 @@
+//#region src/forks/compiled.ts
+function e(e) {
+	return e;
+}
+//#endregion
+export { e as compiledStyles };
+
+//# sourceMappingURL=compiled.js.map

package/dist/forks/compiled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"compiled.js","names":[],"sources":["../../src/forks/compiled.ts"],"sourcesContent":["/**\n * The forks under src/forks/ are Astryx source with upstream fixes applied.\n * ui-common has no StyleX compile step, so a fork does not run\n * `stylex.create`: each of its style namespaces is the object Astryx's own\n * build compiled for the same pinned version, copied from the package's\n * `dist/`. Its atomic class names are therefore exactly upstream's, and their\n * rules already reach the page through `@lablup/ui-common/astryx.css` (core)\n * and `@lablup/ui-common/lab/lab.css` (lab), in Astryx's own layer. A fork\n * adds no CSS of its own and cannot drift from the component it replaces\n * while the pin holds; `forks.test.ts` fails when the pin moves.\n */\nimport type { StyleXStyles } from \"@stylexjs/stylex\";\n\n/** One compiled StyleX namespace entry: `{ <property key>: \"<classes>\", $$css: true }`. */\nexport type CompiledStyle = Readonly<Record<string, string | boolean>>;\n\n/** Types a compiled namespace for `stylex.props` and `xstyle`. */\nexport function compiledStyles<K extends string>(\n  styles: Record<K, CompiledStyle>,\n): Record<K, StyleXStyles> {\n  return styles as unknown as Record<K, StyleXStyles>;\n}\n"],"mappings":";AAiBA,SAAgB,EACd,GACyB;CACzB,OAAO;AACT"}

package/dist/i18n/catalog.d.ts

@@ -0,0 +1,12 @@
+import { Catalog, MessageEntry } from '@astryxdesign/core/i18n';
+/**
+ * A catalog key: `uic.<Component>.<key>`, or `uic.common.<key>` for a word
+ * every component shares (`./common.messages.ts`).
+ */
+export type UicMessageKey = `uic.${string}.${string}`;
+/**
+ * Type-checks a component's messages. Keys must be `uic.<Component>.<key>` or
+ * `uic.common.<key>`.
+ */
+export declare function defineMessages<const T extends Record<UicMessageKey, MessageEntry>>(messages: T): T;
+export declare const uiCommonCatalog: Catalog;

package/dist/i18n/catalog.js

@@ -0,0 +1,46 @@
+import { booleanTokenMessages as e } from "../components/BooleanToken/BooleanToken.messages.js";
+import { bulkEditFormItemMessages as t } from "../components/BulkEditFormItem/BulkEditFormItem.messages.js";
+import { bulkErrorModalMessages as n } from "../components/BulkErrorModal/BulkErrorModal.messages.js";
+import { colorPickerMessages as r } from "../components/ColorPicker/ColorPicker.messages.js";
+import { dataGridMessages as i } from "../components/DataGrid/DataGrid.messages.js";
+import { deleteConfirmModalMessages as a } from "../components/DeleteConfirmModal/DeleteConfirmModal.messages.js";
+import { formMessages as o } from "../components/Form/Form.messages.js";
+import { notificationStackMessages as s } from "../components/NotificationStack/NotificationStack.messages.js";
+import { pageHeaderMessages as c } from "../components/PageHeader/PageHeader.messages.js";
+import { pagedSelectorMessages as l } from "../components/PagedSelector/PagedSelector.messages.js";
+import { selectionLabelMessages as u } from "../components/SelectionLabel/SelectionLabel.messages.js";
+import { skeletonMessages as d } from "../components/Skeleton/Skeleton.messages.js";
+import { statisticMessages as f } from "../components/Statistic/Statistic.messages.js";
+import { numberStepperMessages as p } from "../components/StepNumberInput/NumberStepper.messages.js";
+import { tokenRowMessages as m } from "../components/TokenRow/TokenRow.messages.js";
+import { uncontrolledInputMessages as h } from "../components/UncontrolledInput/UncontrolledInput.messages.js";
+import { unitGridMessages as g } from "../components/UnitGrid/UnitGrid.messages.js";
+import { commonMessages as _ } from "./common.messages.js";
+//#region src/i18n/catalog.ts
+function v(e) {
+	return e;
+}
+var y = {
+	..._,
+	...e,
+	...t,
+	...n,
+	...r,
+	...i,
+	...a,
+	...o,
+	...s,
+	...p,
+	...c,
+	...l,
+	...u,
+	...d,
+	...f,
+	...m,
+	...h,
+	...g
+};
+//#endregion
+export { v as defineMessages, y as uiCommonCatalog };
+
+//# sourceMappingURL=catalog.js.map

package/dist/i18n/catalog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"catalog.js","names":[],"sources":["../../src/i18n/catalog.ts"],"sourcesContent":["/**\n * ui-common's message catalog: every built-in string a custom component\n * shows, with its English text.\n *\n * English lives in code, as `defaultMessage`. Translations live in\n * `./locales/<locale>.json`, one file per Astryx locale name (`ko-KR.json`,\n * `ja-JP.json`, ...), holding the same keys. The build writes `en.json` from\n * this catalog and ships every file at\n * `@lablup/ui-common/ui-common-locales/<locale>.json`.\n *\n * Adding strings for a component:\n *\n *   // src/components/Foo/Foo.messages.ts\n *   export const fooMessages = defineMessages({\n *     \"uic.Foo.expand\": { defaultMessage: \"Expand\", description: \"...\" },\n *   });\n *\n * then spread `fooMessages` into `uiCommonCatalog` below. Generic action\n * words (OK, Cancel, Confirm, Retry, ...) are `uic.common.*` keys in\n * `./common.messages.ts`; use those instead of a key of your own. Keep message\n * files free of React and CSS imports: the build reads this catalog.\n */\nimport type { Catalog, MessageEntry } from \"@astryxdesign/core/i18n\";\n\n// These modules import `defineMessages` back from here. The cycle is safe:\n// it is a function declaration, so it is bound before either module runs.\nimport { booleanTokenMessages } from \"../components/BooleanToken/BooleanToken.messages\";\nimport { bulkEditFormItemMessages } from \"../components/BulkEditFormItem/BulkEditFormItem.messages\";\nimport { bulkErrorModalMessages } from \"../components/BulkErrorModal/BulkErrorModal.messages\";\nimport { colorPickerMessages } from \"../components/ColorPicker/ColorPicker.messages\";\nimport { dataGridMessages } from \"../components/DataGrid/DataGrid.messages\";\nimport { deleteConfirmModalMessages } from \"../components/DeleteConfirmModal/DeleteConfirmModal.messages\";\nimport { formMessages } from \"../components/Form/Form.messages\";\nimport { notificationStackMessages } from \"../components/NotificationStack/NotificationStack.messages\";\nimport { pageHeaderMessages } from \"../components/PageHeader/PageHeader.messages\";\nimport { pagedSelectorMessages } from \"../components/PagedSelector/PagedSelector.messages\";\nimport { selectionLabelMessages } from \"../components/SelectionLabel/SelectionLabel.messages\";\nimport { skeletonMessages } from \"../components/Skeleton/Skeleton.messages\";\nimport { statisticMessages } from \"../components/Statistic/Statistic.messages\";\nimport { numberStepperMessages } from \"../components/StepNumberInput/NumberStepper.messages\";\nimport { tokenRowMessages } from \"../components/TokenRow/TokenRow.messages\";\nimport { uncontrolledInputMessages } from \"../components/UncontrolledInput/UncontrolledInput.messages\";\nimport { unitGridMessages } from \"../components/UnitGrid/UnitGrid.messages\";\nimport { commonMessages } from \"./common.messages\";\n\n/**\n * A catalog key: `uic.<Component>.<key>`, or `uic.common.<key>` for a word\n * every component shares (`./common.messages.ts`).\n */\nexport type UicMessageKey = `uic.${string}.${string}`;\n\n/**\n * Type-checks a component's messages. Keys must be `uic.<Component>.<key>` or\n * `uic.common.<key>`.\n */\nexport function defineMessages<const T extends Record<UicMessageKey, MessageEntry>>(\n  messages: T,\n): T {\n  return messages;\n}\n\nexport const uiCommonCatalog: Catalog = {\n  ...commonMessages,\n  ...booleanTokenMessages,\n  ...bulkEditFormItemMessages,\n  ...bulkErrorModalMessages,\n  ...colorPickerMessages,\n  ...dataGridMessages,\n  ...deleteConfirmModalMessages,\n  ...formMessages,\n  ...notificationStackMessages,\n  ...numberStepperMessages,\n  ...pageHeaderMessages,\n  ...pagedSelectorMessages,\n  ...selectionLabelMessages,\n  ...skeletonMessages,\n  ...statisticMessages,\n  ...tokenRowMessages,\n  ...uncontrolledInputMessages,\n  ...unitGridMessages,\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAuDA,SAAgB,EACd,GACG;CACH,OAAO;AACT;AAEA,IAAa,IAA2B;CACtC,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;AACL"}

package/dist/i18n/common.messages.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Words whose translation does not depend on the component that shows them:
+ * the generic action labels. Components use these instead of a key of their
+ * own, so "Cancel" is translated once. See CONTRIBUTING.md, "Strings".
+ */
+export declare const commonMessages: {
+    readonly "uic.common.ok": {
+        readonly defaultMessage: "OK";
+        readonly description: "Generic label of a primary action button that accepts";
+    };
+    readonly "uic.common.cancel": {
+        readonly defaultMessage: "Cancel";
+        readonly description: "Generic label of a button that backs out of an action or stops a task";
+    };
+    readonly "uic.common.confirm": {
+        readonly defaultMessage: "Confirm";
+        readonly description: "Generic label of a button that confirms an action";
+    };
+    readonly "uic.common.apply": {
+        readonly defaultMessage: "Apply";
+        readonly description: "Generic label of a button that applies the changes made in a dialog";
+    };
+    readonly "uic.common.delete": {
+        readonly defaultMessage: "Delete";
+        readonly description: "Generic label of a button that deletes something";
+    };
+    readonly "uic.common.retry": {
+        readonly defaultMessage: "Retry";
+        readonly description: "Generic label of a button that retries a failed action or load";
+    };
+};

package/dist/i18n/common.messages.js

@@ -0,0 +1,32 @@
+import { defineMessages as e } from "./catalog.js";
+//#region src/i18n/common.messages.ts
+var t = e({
+	"uic.common.ok": {
+		defaultMessage: "OK",
+		description: "Generic label of a primary action button that accepts"
+	},
+	"uic.common.cancel": {
+		defaultMessage: "Cancel",
+		description: "Generic label of a button that backs out of an action or stops a task"
+	},
+	"uic.common.confirm": {
+		defaultMessage: "Confirm",
+		description: "Generic label of a button that confirms an action"
+	},
+	"uic.common.apply": {
+		defaultMessage: "Apply",
+		description: "Generic label of a button that applies the changes made in a dialog"
+	},
+	"uic.common.delete": {
+		defaultMessage: "Delete",
+		description: "Generic label of a button that deletes something"
+	},
+	"uic.common.retry": {
+		defaultMessage: "Retry",
+		description: "Generic label of a button that retries a failed action or load"
+	}
+});
+//#endregion
+export { t as commonMessages };
+
+//# sourceMappingURL=common.messages.js.map