@plitzi/sdk-style 0.38.10 → 0.38.11

package/dist/components/StyleInspector/components/InspectorLabel/helpers.d.ts

@@ -0,0 +1,17 @@
+import { InheritData } from '../../../../helpers';
+import { StyleCategory } from '@plitzi/sdk-shared';
+/** Where the value a row shows comes from — what the label's colour says, from strongest to weakest. */
+export type LabelSource = 'binding' | 'variable' | 'value' | 'inherit' | 'none';
+export type LabelFlags = {
+    hasValues: boolean;
+    hasInherit: boolean;
+    hasBinding: boolean;
+    hasVariables: boolean;
+};
+export declare const labelSource: ({ hasValues, hasInherit, hasBinding, hasVariables }: LabelFlags) => LabelSource;
+/**
+ * What hovering the label tells: where its value comes from, and — when a value is set here — that a click clears it (a
+ * binding alone is not, and the label does not promise it). An inherited value names the selector and the breakpoint
+ * it comes from, the same one the control shows.
+ */
+export declare const labelHint: (source: LabelSource, resettable: boolean, keys: StyleCategory[] | undefined, inheritData: InheritData["style"] | undefined) => string | undefined;

package/dist/components/StyleInspector/components/InspectorLabel/helpers.mjs

@@ -0,0 +1,16 @@
+//#region src/components/StyleInspector/components/InspectorLabel/helpers.ts
+var e = ({ hasValues: e, hasInherit: t, hasBinding: n, hasVariables: r }) => n ? "binding" : r ? "variable" : e ? "value" : t ? "inherit" : "none", t = {
+	binding: "Bound to data",
+	variable: "Set on this selector, from a token",
+	value: "Set on this selector"
+}, n = (e, n, r, i) => {
+	if (e !== "none") {
+		if (e === "inherit") {
+			let e = r?.map((e) => i?.[e]?.[0]).find((e) => e !== void 0);
+			return e ? `Inherited from ${e.key} (${e.displayMode}): ${String(e.value)}` : "Inherited";
+		}
+		return n ? `${t[e]} — click to reset` : t[e];
+	}
+};
+//#endregion
+export { n as labelHint, e as labelSource };

package/dist/components/StyleInspector/components/InspectorSearch/InspectorSearch.d.ts

@@ -0,0 +1,7 @@
+export type InspectorSearchProps = {
+    value: string;
+    onChange: (value: string) => void;
+};
+/** Finds the category that holds a property — by its CSS name, or the category's title — and opens it. */
+declare const InspectorSearch: ({ value, onChange }: InspectorSearchProps) => import('react').JSX.Element;
+export default InspectorSearch;

package/dist/components/StyleInspector/components/InspectorSearch/InspectorSearch.mjs

@@ -0,0 +1,24 @@
+import { useCallback as e } from "react";
+import { jsx as t } from "react/jsx-runtime";
+import n from "@plitzi/plitzi-ui/Input";
+//#region src/components/StyleInspector/components/InspectorSearch/InspectorSearch.tsx
+var r = ({ value: r, onChange: i }) => {
+	let a = e((e) => {
+		e.key === "Escape" && r && (e.stopPropagation(), i(""));
+	}, [i, r]);
+	return /* @__PURE__ */ t("div", {
+		className: "border-b border-gray-200 px-2 py-1.5 dark:border-zinc-800",
+		children: /* @__PURE__ */ t(n, {
+			size: "xs",
+			value: r,
+			placeholder: "Find a property — gap, radius, shadow…",
+			clearable: !0,
+			"aria-label": "Find a style property",
+			onChange: i,
+			onKeyDown: a,
+			children: /* @__PURE__ */ t(n.Icon, { icon: "fa-solid fa-magnifying-glass" })
+		})
+	});
+};
+//#endregion
+export { r as default };

package/dist/components/StyleInspector/components/InspectorSearch/index.d.ts

@@ -0,0 +1,3 @@
+import { default as InspectorSearch } from './InspectorSearch';
+export * from './InspectorSearch';
+export default InspectorSearch;

package/dist/components/StyleInspector/components/InspectorSearch/index.mjs

@@ -0,0 +1,5 @@
+import e from "./InspectorSearch.mjs";
+//#region src/components/StyleInspector/components/InspectorSearch/index.ts
+var t = e;
+//#endregion
+export { t as default };

package/dist/components/StyleInspector/components/ShadowItem/ShadowItem.d.ts

@@ -0,0 +1,9 @@
+export type ShadowItemProps = {
+    value: string;
+    /** A box shadow's: `inset` and `spread`. A text shadow has neither. */
+    withSpread: boolean;
+    onChange: (value: string) => void;
+    onRemove: () => void;
+};
+declare const _default: import('react').MemoExoticComponent<({ value, withSpread, onChange, onRemove }: ShadowItemProps) => import('react').JSX.Element>;
+export default _default;

package/dist/components/StyleInspector/components/ShadowItem/ShadowItem.mjs

@@ -0,0 +1,110 @@
+import { asText as e } from "../../cssValues.mjs";
+import t from "../CategoryOption/index.mjs";
+import n from "../ColorSwatch/index.mjs";
+import { parseShadow as r, serializeShadow as i } from "../../shadowValue.mjs";
+import a from "../ValueListItem/index.mjs";
+import { memo as o, useCallback as s, useMemo as c, useRef as l } from "react";
+import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
+var p = o(({ value: o, withSpread: p, onChange: m, onRemove: h }) => {
+	let g = r(o), _ = l(g);
+	_.current = g;
+	let v = s((t) => (n) => {
+		let r = _.current;
+		r && m(i({
+			...r,
+			[t]: e(n)
+		}, { withSpread: p }));
+	}, [m, p]), y = s((e) => {
+		let t = _.current;
+		t && m(i({
+			...t,
+			inset: e === "inset"
+		}, { withSpread: p }));
+	}, [m, p]), b = s((t) => m(e(t)), [m]), x = c(() => [{
+		value: "outset",
+		icon: /* @__PURE__ */ d("span", {
+			className: "px-1.5 text-xs select-none",
+			children: "Outside"
+		}),
+		description: "Cast outside the box",
+		active: !g?.inset,
+		size: "custom"
+	}, {
+		value: "inset",
+		icon: /* @__PURE__ */ d("span", {
+			className: "px-1.5 text-xs select-none",
+			children: "Inside"
+		}),
+		description: "Cast inside the box",
+		active: !!g?.inset,
+		size: "custom"
+	}], [g?.inset]), S = p ? "Box shadow" : "Text shadow";
+	return /* @__PURE__ */ f(a, {
+		summary: o,
+		preview: g && /* @__PURE__ */ d(n, {
+			className: "h-4 w-4",
+			value: g.color
+		}),
+		title: S,
+		removeLabel: `Remove ${S.toLowerCase()}`,
+		onRemove: h,
+		children: [
+			!g && /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d(t, {
+				label: "Value",
+				type: "input",
+				value: o,
+				onChange: b
+			}), /* @__PURE__ */ d("p", {
+				className: "m-0 text-[11px] text-zinc-500 dark:text-zinc-400",
+				children: "Not a single shadow the editor can split into parts (a token, for one), so it is edited as written."
+			})] }),
+			g && p && /* @__PURE__ */ d(t, {
+				label: "Type",
+				type: "iconGroup",
+				items: x,
+				onChange: y
+			}),
+			g && /* @__PURE__ */ f("div", {
+				className: "grid grid-cols-2 gap-2",
+				children: [
+					/* @__PURE__ */ d(t, {
+						label: "X offset",
+						type: "metric",
+						value: g.x,
+						min: -Infinity,
+						onChange: v("x")
+					}),
+					/* @__PURE__ */ d(t, {
+						label: "Y offset",
+						type: "metric",
+						value: g.y,
+						min: -Infinity,
+						onChange: v("y")
+					}),
+					/* @__PURE__ */ d(t, {
+						label: "Blur",
+						type: "metric",
+						value: g.blur,
+						min: 0,
+						onChange: v("blur")
+					}),
+					p && /* @__PURE__ */ d(t, {
+						label: "Spread",
+						type: "metric",
+						value: g.spread,
+						min: -Infinity,
+						onChange: v("spread")
+					})
+				]
+			}),
+			g && /* @__PURE__ */ d(t, {
+				label: "Color",
+				type: "color",
+				value: g.color,
+				onChange: v("color")
+			})
+		]
+	});
+});
+//#endregion
+export { p as default };

package/dist/components/StyleInspector/components/ShadowItem/index.d.ts

@@ -0,0 +1,3 @@
+import { default as ShadowItem } from './ShadowItem';
+export * from './ShadowItem';
+export default ShadowItem;

package/dist/components/StyleInspector/components/ShadowItem/index.mjs

@@ -0,0 +1,5 @@
+import e from "./ShadowItem.mjs";
+//#region src/components/StyleInspector/components/ShadowItem/index.ts
+var t = e;
+//#endregion
+export { t as default };

package/dist/components/StyleInspector/components/TargetSummary/TargetSummary.d.ts

@@ -0,0 +1,7 @@
+export type TargetSummaryProps = {
+    selectorName?: string;
+    parts: string[];
+    onReset: () => void;
+};
+declare const _default: import('react').MemoExoticComponent<({ selectorName, parts, onReset }: TargetSummaryProps) => import('react').JSX.Element>;
+export default _default;

package/dist/components/StyleInspector/components/TargetSummary/TargetSummary.mjs

@@ -0,0 +1,24 @@
+import { memo as e } from "react";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import r from "@plitzi/plitzi-ui/Icon";
+var i = e(({ selectorName: e, parts: i, onReset: a }) => /* @__PURE__ */ n("div", {
+	className: "bg-primary-500/10 dark:bg-primary-400/10 flex items-center gap-2 rounded-md px-2 py-1 text-xs",
+	children: [
+		/* @__PURE__ */ t("span", {
+			className: "shrink-0 text-zinc-500 dark:text-zinc-400",
+			children: "Editing"
+		}),
+		/* @__PURE__ */ t("span", {
+			className: "text-primary-700 dark:text-primary-300 min-w-0 grow truncate font-medium",
+			children: [e, ...i].filter(Boolean).join(" › ")
+		}),
+		/* @__PURE__ */ t(r, {
+			className: "shrink-0 cursor-pointer text-zinc-500 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100",
+			icon: "fa-solid fa-xmark",
+			title: "Back to the selector's own rules",
+			onClick: a
+		})
+	]
+}));
+//#endregion
+export { i as default };

package/dist/components/StyleInspector/components/TargetSummary/index.d.ts

@@ -0,0 +1,3 @@
+import { default as TargetSummary } from './TargetSummary';
+export * from './TargetSummary';
+export default TargetSummary;

package/dist/components/StyleInspector/components/TargetSummary/index.mjs

@@ -0,0 +1,5 @@
+import e from "./TargetSummary.mjs";
+//#region src/components/StyleInspector/components/TargetSummary/index.ts
+var t = e;
+//#endregion
+export { t as default };

package/dist/components/StyleInspector/components/ValueList/ValueList.d.ts

@@ -0,0 +1,12 @@
+import { StyleCategory } from '@plitzi/sdk-shared';
+import { ReactNode } from 'react';
+export type ValueListProps = {
+    label: string;
+    keys: StyleCategory[];
+    /** What the add button says it adds — "Add box shadow" — its tooltip and its name for a screen reader. */
+    addLabel: string;
+    onAdd: () => void;
+    children?: ReactNode;
+};
+declare const _default: import('react').MemoExoticComponent<({ label, keys, addLabel, onAdd, children }: ValueListProps) => import('react').JSX.Element>;
+export default _default;

package/dist/components/StyleInspector/components/ValueList/ValueList.mjs

@@ -0,0 +1,25 @@
+import e from "../InspectorLabel/index.mjs";
+import { memo as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+var i = t(({ label: t, keys: i, addLabel: a, onAdd: o, children: s }) => /* @__PURE__ */ r("div", {
+	className: "flex flex-col gap-1.5",
+	children: [/* @__PURE__ */ r("div", {
+		className: "flex items-center justify-between gap-2",
+		children: [/* @__PURE__ */ n(e, {
+			keyValue: i,
+			children: t
+		}), /* @__PURE__ */ n("button", {
+			type: "button",
+			className: "focus-visible:outline-primary-500 flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded-md text-zinc-500 transition-colors duration-150 hover:bg-gray-100 hover:text-zinc-900 focus-visible:outline-2 dark:text-zinc-400 dark:hover:bg-zinc-800 dark:hover:text-zinc-100",
+			title: a,
+			"aria-label": a,
+			onClick: o,
+			children: /* @__PURE__ */ n("i", { className: "fa-solid fa-plus text-xs" })
+		})]
+	}), s && /* @__PURE__ */ n("div", {
+		className: "flex flex-col gap-1",
+		children: s
+	})]
+}));
+//#endregion
+export { i as default };

package/dist/components/StyleInspector/components/ValueList/index.d.ts

@@ -0,0 +1,3 @@
+import { default as ValueList } from './ValueList';
+export * from './ValueList';
+export default ValueList;

package/dist/components/StyleInspector/components/ValueList/index.mjs

@@ -0,0 +1,5 @@
+import e from "./ValueList.mjs";
+//#region src/components/StyleInspector/components/ValueList/index.ts
+var t = e;
+//#endregion
+export { t as default };

package/dist/components/StyleInspector/components/ValueListItem/ValueListItem.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+export type ValueListItemProps = {
+    /** The item as CSS writes it, drawn in the row. */
+    summary: string;
+    /** What sits before the summary — a swatch of the shadow's color, the layer's preview. */
+    preview?: ReactNode;
+    /** The popover's title: what kind of item it edits. */
+    title: string;
+    /** What removing says it removes — "Remove shadow". */
+    removeLabel: string;
+    onRemove: () => void;
+    /** The popover's controls. */
+    children?: ReactNode;
+};
+declare const _default: import('react').MemoExoticComponent<({ summary, preview, title, removeLabel, onRemove, children }: ValueListItemProps) => import('react').JSX.Element>;
+export default _default;

package/dist/components/StyleInspector/components/ValueListItem/ValueListItem.mjs

@@ -0,0 +1,71 @@
+import { memo as e, useCallback as t, useEffect as n, useRef as r, useState as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import s from "@plitzi/plitzi-ui/ContainerFloating";
+import c from "clsx";
+var l = e(({ summary: e, preview: l, title: u, removeLabel: d, onRemove: f, children: p }) => {
+	let [m, h] = i(!1), g = r(null);
+	n(() => {
+		if (!m) return;
+		let e = requestAnimationFrame(() => g.current?.focus({ preventScroll: !0 }));
+		return () => cancelAnimationFrame(e);
+	}, [m]);
+	let _ = t(() => h((e) => !e), []), v = t(() => h(!1), []), y = t((e) => {
+		e.stopPropagation(), e.preventDefault(), f();
+	}, [f]);
+	return /* @__PURE__ */ o(s, {
+		className: "w-full min-w-0",
+		closeOnClick: !1,
+		containerTopOffset: 4,
+		open: m,
+		onOpenChange: h,
+		children: [/* @__PURE__ */ o(s.Trigger, {
+			className: c("group flex h-7 w-full min-w-0 cursor-pointer items-center gap-2 rounded-md border px-2 text-xs transition-colors duration-150 select-none", {
+				"border-primary-500/60 bg-primary-500/5 dark:border-primary-400/60 dark:bg-primary-400/10": m,
+				"border-gray-200 bg-white hover:border-gray-300 hover:bg-gray-50 dark:border-zinc-700 dark:bg-zinc-800/50 dark:hover:border-zinc-600 dark:hover:bg-zinc-800": !m
+			}),
+			onClick: _,
+			children: [
+				l,
+				/* @__PURE__ */ a("span", {
+					className: "min-w-0 grow truncate font-mono text-[11px] text-zinc-700 dark:text-zinc-200",
+					title: e,
+					children: e
+				}),
+				/* @__PURE__ */ a("button", {
+					type: "button",
+					className: "flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center rounded text-zinc-400 transition-colors duration-150 group-hover:text-zinc-500 hover:bg-red-500/10 hover:text-red-600 dark:text-zinc-500 dark:group-hover:text-zinc-400 dark:hover:text-red-400",
+					title: d,
+					"aria-label": d,
+					onClick: y,
+					children: /* @__PURE__ */ a("i", { className: "fa-solid fa-xmark text-xs" })
+				})
+			]
+		}), /* @__PURE__ */ a(s.Content, {
+			className: "w-64",
+			children: /* @__PURE__ */ o("div", {
+				ref: g,
+				className: "flex w-full flex-col outline-none",
+				tabIndex: -1,
+				children: [/* @__PURE__ */ o("div", {
+					className: "flex items-center justify-between gap-2 border-b border-gray-200 px-3 py-2 dark:border-zinc-700",
+					children: [/* @__PURE__ */ a("span", {
+						className: "text-xs font-semibold text-zinc-800 dark:text-zinc-100",
+						children: u
+					}), /* @__PURE__ */ a("button", {
+						type: "button",
+						className: "flex h-5 w-5 cursor-pointer items-center justify-center rounded text-zinc-400 hover:bg-gray-100 hover:text-zinc-900 dark:text-zinc-500 dark:hover:bg-zinc-800 dark:hover:text-zinc-100",
+						title: "Close",
+						"aria-label": "Close",
+						onClick: v,
+						children: /* @__PURE__ */ a("i", { className: "fa-solid fa-xmark text-xs" })
+					})]
+				}), /* @__PURE__ */ a("div", {
+					className: "flex flex-col gap-3 p-3",
+					children: p
+				})]
+			})
+		})]
+	});
+});
+//#endregion
+export { l as default };

package/dist/components/StyleInspector/components/ValueListItem/index.d.ts

@@ -0,0 +1,3 @@
+import { default as ValueListItem } from './ValueListItem';
+export * from './ValueListItem';
+export default ValueListItem;

package/dist/components/StyleInspector/components/ValueListItem/index.mjs

@@ -0,0 +1,5 @@
+import e from "./ValueListItem.mjs";
+//#region src/components/StyleInspector/components/ValueListItem/index.ts
+var t = e;
+//#endregion
+export { t as default };

package/dist/components/StyleInspector/cssValues.d.ts

@@ -0,0 +1,15 @@
+import { StyleCategory, StyleValue } from '@plitzi/sdk-shared';
+/**
+ * Reading CSS values that hold lists — shadows, filters, transitions, background layers — where a comma or a space
+ * inside a function (`rgba(0, 0, 0, .5)`, `cubic-bezier(.4, 0, .2, 1)`) is not a separator.
+ */
+export declare const splitByCommaOutsideParens: (value: string) => string[];
+export declare const splitBySpaceOutsideParens: (value: string) => string[];
+/**
+ * A value with its tokens (`var(--accent)`, `{{ accent }}`) replaced by what the space's variables say they are — for
+ * what the editor itself draws (a swatch, a preview), whose document has none of the space's custom properties. A
+ * token the space does not declare stays as it was.
+ */
+export declare const resolveTokens: (value: string, variables: Record<string, unknown>) => string;
+/** What a control answered as the text a stylesheet holds: a word or a number, and nothing for anything else. */
+export declare const asText: (value: StyleValue | Record<StyleCategory, StyleValue> | boolean | undefined) => string;

package/dist/components/StyleInspector/cssValues.mjs

@@ -0,0 +1,27 @@
+import { get as e } from "@plitzi/plitzi-ui/helpers";
+import { VARIABLE_REGEX as t } from "@plitzi/sdk-shared/schema/schemaConstants";
+//#region src/components/StyleInspector/cssValues.ts
+var n = (e) => {
+	let t = [], n = "", r = 0;
+	for (let i = 0; i < e.length; i++) {
+		let a = e[i];
+		a === "(" ? (r++, n += a) : a === ")" ? (r--, n += a) : a === "," && r === 0 ? (t.push(n), n = "") : n += a;
+	}
+	return n && t.push(n), t;
+}, r = (e) => {
+	let t = [], n = "", r = 0;
+	for (let i = 0; i < e.length; i++) {
+		let a = e[i];
+		a === "(" ? (r++, n += a) : a === ")" ? (r--, n += a) : a === " " && r === 0 ? (n && t.push(n), n = "") : n += a;
+	}
+	return n && t.push(n), t;
+}, i = (n, r) => {
+	let i = n;
+	for (let a of n.matchAll(new RegExp(t, "g"))) {
+		let t = a[1] || a[2], n = e(r, t, void 0);
+		(typeof n == "string" || typeof n == "number") && (i = i.replace(a[0], String(n)));
+	}
+	return i;
+}, a = (e) => typeof e == "string" || typeof e == "number" ? String(e) : "";
+//#endregion
+export { a as asText, i as resolveTokens, n as splitByCommaOutsideParens, r as splitBySpaceOutsideParens };

package/dist/components/StyleInspector/helpers.d.ts

@@ -1,5 +1,5 @@
 import { Option } from '@plitzi/plitzi-ui/Select2';
-import { DisplayMode, Element, Schema, Style, StyleAncestors, StyleBlock, StyleItem, StyleState } from '@plitzi/sdk-shared';
+import { DisplayMode, Element, Schema, Style, StyleAncestors, StyleBlock, StyleItem, StylePseudo, StyleState } from '@plitzi/sdk-shared';
 /** The states a selector can react to, as the state picker offers them — from the one list every layer reads. */
 export declare const STYLE_STATE_OPTIONS: Option[];
 /** How an ancestor key reads in the inspector: its class, or the parent it stands for. */
@@ -44,3 +44,19 @@ export type AncestorRemoval = {
 };
 /** Where a selector has rules under any of `ancestors`, at every breakpoint and slot: what purging them takes. */
 export declare const ancestorRemovals: (platform: Style["platform"], name: string, ancestors: Set<string>) => AncestorRemoval[];
+export type InspectorTarget = {
+    styleSelector: string;
+    styleVariant?: string;
+    styleState?: StyleState;
+    styleAncestor?: string;
+    stylePseudo?: StylePseudo;
+    styleCondition?: string;
+};
+/**
+ * What the inspector writes to besides the selector's own plain rules, step by step as the summary above the
+ * categories reads it — empty while it writes those. An ancestor comes first: with one picked, the variant and the state
+ * are the ancestor's.
+ */
+export declare const targetParts: ({ styleSelector, styleVariant, styleState, styleAncestor, stylePseudo, styleCondition }: InspectorTarget) => string[];
+/** What the toggle for the rarer targets says it does — or, while one of them is in use, why it cannot fold them. */
+export declare const moreTargetsHint: (inUse: boolean, shown: boolean) => string;

package/dist/components/StyleInspector/helpers.mjs

@@ -61,6 +61,13 @@ var u = a.map((e) => ({
 	displayMode: r,
 	styleSelector: e,
 	styleAncestor: t
-}))));
+})))), S = ({ styleSelector: e, styleVariant: n, styleState: i, styleAncestor: a, stylePseudo: s, styleCondition: c }) => [
+	e === "base" ? void 0 : `${e} part`,
+	a ? `inside ${d(a)}` : void 0,
+	n ? `variant ${n}` : void 0,
+	i ? o[i] : void 0,
+	s ? r[s] : void 0,
+	c ? t(c) : void 0
+].filter((e) => !!e), C = (e, t) => e ? "An ancestor, pseudo-element or condition is in use" : t ? "Hide ancestor, pseudo-element and condition" : "Target an ancestor, a pseudo-element or a condition";
 //#endregion
-export { u as STYLE_STATE_OPTIONS, m as ancestorClasses, _ as ancestorConditions, d as ancestorName, v as ancestorOptions, x as ancestorRemovals, p as conditionOptions, f as pseudoOptions, b as unusedAncestors };
+export { u as STYLE_STATE_OPTIONS, m as ancestorClasses, _ as ancestorConditions, d as ancestorName, v as ancestorOptions, x as ancestorRemovals, p as conditionOptions, C as moreTargetsHint, f as pseudoOptions, S as targetParts, b as unusedAncestors };

package/dist/components/StyleInspector/hooks/useInspectorValues.mjs

@@ -1,55 +1,52 @@
-import e from "../StyleInspectorContext.mjs";
-import { use as t, useMemo as n } from "react";
-import { get as r, pick as i } from "@plitzi/plitzi-ui/helpers";
-import { baseDefaultValue as a } from "@plitzi/sdk-shared";
-import { VARIABLE_REGEX as o } from "@plitzi/sdk-shared/schema/schemaConstants";
+import { resolveTokens as e } from "../cssValues.mjs";
+import t from "../StyleInspectorContext.mjs";
+import { use as n, useMemo as r } from "react";
+import { get as i, pick as a } from "@plitzi/plitzi-ui/helpers";
+import { baseDefaultValue as o } from "@plitzi/sdk-shared";
+import { VARIABLE_REGEX as s } from "@plitzi/sdk-shared/schema/schemaConstants";
 //#region src/components/StyleInspector/hooks/useInspectorValues.ts
-var s = ({ keys: s, skipContext: c = !1, context: l = {}, asValue: u = !1, defaultValues: d, strictMode: f = !1, replaceTokens: p = !1 }) => {
-	let { inheritData: m, bindingData: h, variables: g, getValues: _ } = {};
-	c ? {inheritData: m, bindingData: h, variables: g, getValues: _} = l : {inheritData: m, bindingData: h, variables: g, getValues: _} = t(e);
-	let v = _(), y = n(() => !!s && !u && Object.keys(m).filter((e) => s.includes(e) || s.length === 0).length > 0, [
-		s,
-		m,
-		u
-	]), b = n(() => !!s && !u && Object.keys(h).filter((e) => s.includes(e) || s.length === 0).length > 0, [
-		s,
+var c = ({ keys: c, skipContext: l = !1, context: u = {}, asValue: d = !1, defaultValues: f, strictMode: p = !1, replaceTokens: m = !1 }) => {
+	let { inheritData: h, bindingData: g, variables: _, getValues: v } = {};
+	l ? {inheritData: h, bindingData: g, variables: _, getValues: v} = u : {inheritData: h, bindingData: g, variables: _, getValues: v} = n(t);
+	let y = v(), b = r(() => !!c && !d && Object.keys(h).filter((e) => c.includes(e) || c.length === 0).length > 0, [
+		c,
 		h,
-		u
-	]), x = n(() => !!s && !u && Object.keys(i(v, s)).filter((e) => typeof v[e] == "string" && o.test(v[e])).length > 0, [
-		s,
-		v,
-		u
-	]), S = n(() => s ? s.length > 0 ? !u && Object.keys(i(v, s)).length > 0 : !u && Object.keys(v).length > 0 : !1, [
-		s,
-		u,
-		v
-	]), C = n(() => {
-		let e = {};
-		if (!s) return e;
-		let t = new RegExp(o, "g");
-		return s.forEach((n) => {
-			let i;
-			i = f ? r(v, n, r(d ?? {}, n)) : r(v, n, r(h, n, r(m, `${n}.0.value`, r(d ?? {}, n, a[n])))), p && typeof i == "string" && o.test(i) && [...i.matchAll(t)].forEach((e) => {
-				i = i.replace(e[0], r(g, e[1] ? e[1] : e[2], e[0]));
-			}), e[n] = i;
-		}), e;
+		d
+	]), x = r(() => !!c && !d && Object.keys(g).filter((e) => c.includes(e) || c.length === 0).length > 0, [
+		c,
+		g,
+		d
+	]), S = r(() => !!c && !d && Object.keys(a(y, c)).filter((e) => typeof y[e] == "string" && s.test(y[e])).length > 0, [
+		c,
+		y,
+		d
+	]), C = r(() => c ? c.length > 0 ? !d && Object.keys(a(y, c)).length > 0 : !d && Object.keys(y).length > 0 : !1, [
+		c,
+		d,
+		y
+	]), w = r(() => {
+		let t = {};
+		return c && c.forEach((n) => {
+			let r;
+			r = p ? i(y, n, i(f ?? {}, n)) : i(y, n, i(g, n, i(h, `${n}.0.value`, i(f ?? {}, n, o[n])))), m && typeof r == "string" && (r = e(r, _)), t[n] = r;
+		}), t;
 	}, [
-		s,
-		f,
+		c,
 		p,
-		v,
-		d,
 		m,
+		y,
+		f,
 		h,
-		g
+		g,
+		_
 	]);
-	return u ? C : {
-		values: C,
-		hasInherit: y,
-		hasBinding: b,
-		hasVariables: x,
-		hasValues: S
+	return d ? w : {
+		values: w,
+		hasInherit: b,
+		hasBinding: x,
+		hasVariables: S,
+		hasValues: C
 	};
 };
 //#endregion
-export { s as default };
+export { c as default };

package/dist/components/StyleInspector/search.d.ts

@@ -0,0 +1,11 @@
+import { CategoryKeys } from './categoryKeys';
+import { StyleCategory } from '@plitzi/sdk-shared';
+/**
+ * A query as the property names are written: lower case, and words joined by hyphens, so `border radius` finds
+ * `border-radius`. Empty when there is nothing to search for.
+ */
+export declare const normalizeQuery: (raw: string) => string;
+/** Whether a category holds what was typed: its title, or any property it edits. Everything matches no query. */
+export declare const categoryMatches: ({ title, dot }: CategoryKeys, query: string) => boolean;
+/** Whether what was typed lives behind the category's advanced toggle — which a search then opens. */
+export declare const advancedMatches: (advanced: StyleCategory[] | undefined, query: string) => boolean;

package/dist/components/StyleInspector/search.mjs

@@ -0,0 +1,14 @@
+//#region src/components/StyleInspector/search.ts
+var e = {
+	bg: "background",
+	colour: "color",
+	rounded: "radius",
+	corner: "radius",
+	layer: "z-index",
+	stack: "z-index"
+}, t = (t) => {
+	let n = t.trim().toLowerCase().replace(/\s+/g, "-");
+	return e[n] ?? n;
+}, n = (e, t) => t.split("-").every((t) => !t || e.includes(t)), r = (e, t) => e.some((e) => n(e, t)), i = ({ title: e, dot: t }, i) => !i || n(e.toLowerCase().replace(/\s+/g, "-"), i) || r(t, i), a = (e, t) => !!t && !!e && r(e, t);
+//#endregion
+export { a as advancedMatches, i as categoryMatches, t as normalizeQuery };