@rogieking/figui3 6.22.0 → 6.23.1

package/dist/propskit.js

@@ -1 +0,0 @@
-import"./fig-editor.js";var P="figui-root",w="data-figui-overlay-root";function L(R,S="system"){if(!R)return;let K=S==="light"||S==="dark"||S==="system"?S:"system";if(R.setAttribute("theme",K),R.classList.add("figui-root"),R.classList.toggle("figma-light",K==="light"),R.classList.toggle("figma-dark",K==="dark"),K==="system")R.style.setProperty("color-scheme","light dark");else R.style.setProperty("color-scheme",K)}function H(R){if(typeof document>"u"||!document.body)return null;let S="data-figui-overlay-root",K=document.body.querySelector(`:scope > [${S}]`);if(!K)K=document.createElement("div"),K.setAttribute(S,""),document.body.append(K);let E=R?.closest?.(".figui-root")??document.querySelector(".figui-root");if(!E)return K;let I=E.getAttribute("theme"),_=I==="light"||I==="dark"||I==="system"?I:E.classList.contains("figma-dark")?"dark":E.classList.contains("figma-light")?"light":"system";if(L(K,_),K.classList.remove("figui-root"),K.setAttribute(S,""),_==="light")K.classList.add("figma-light");if(_==="dark")K.classList.add("figma-dark");return K}function A(R){return R!==null&&typeof R==="object"&&!Array.isArray(R)&&Object.getPrototypeOf(R)===Object.prototype}function f(R){return typeof R==="string"&&/^#([0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(R)}function C(R,S){let K=R.replace(/([A-Z])/g," $1").replace(/[_-]+/g," ").replace(/^\w/,(E)=>E.toUpperCase()).trim();if(Array.isArray(S)&&S.length>=3&&S.every((E)=>typeof E==="number")){let[E,I,_,B]=S;return{kind:"slider",key:R,label:K,default:E,min:I,max:_,step:B??(_-I<=1?0.01:1)}}if(A(S)&&typeof S.type==="string"){let E=S.type;if(E==="select")return{kind:"select",key:R,label:K,options:S.options??[],default:S.default??S.options?.[0]?.value??S.options?.[0]??""};if(E==="color")return{kind:"color",key:R,label:K,default:S.default??"#000000"};if(E==="text")return{kind:"text",key:R,label:K,default:S.default??"",placeholder:S.placeholder};if(E==="easing"||E==="spring")return{kind:"easing",key:R,label:K,default:S.value??S.ease??S.default??[0.4,0,0.2,1],spring:E==="spring"?S:void 0};if(E==="action")return{kind:"action",key:R,label:K}}if(A(S)){let{_collapsed:E,...I}=S;return{kind:"folder",key:R,label:K,collapsed:Boolean(E),children:Object.entries(I).map(([_,B])=>C(_,B))}}if(typeof S==="boolean")return{kind:"switch",key:R,label:K,default:S};if(typeof S==="number"){let E=Math.abs(S)||1,I=E<=1?1:E*2,_=E<=1?0:0;return{kind:"slider",key:R,label:K,default:S,min:_,max:I,step:E<=1?0.01:1}}if(f(S))return{kind:"color",key:R,label:K,default:S};if(typeof S==="string")return{kind:"text",key:R,label:K,default:S};return{kind:"text",key:R,label:K,default:String(S??"")}}function j(R){return Object.entries(R??{}).map(([S,K])=>C(S,K))}function V(R){if(R&&typeof R==="object")return String(R.value??"");return String(R??"")}function O(R){if(R&&typeof R==="object")return String(R.label??R.value??"");return String(R??"")}function U(R,S){return S.split(".").reduce((K,E)=>K==null?void 0:K[E],R)}function z(R,S,K){let E=S.split("."),I=R;for(let _=0;_<E.length-1;_++){let B=E[_];if(!A(I[B]))I[B]={};I=I[B]}I[E[E.length-1]]=K}function F(R,S={}){for(let K of R)if(K.kind==="folder")S[K.key]={},F(K.children,S[K.key]);else if(K.kind!=="action")S[K.key]=K.default;return S}function T(R){return structuredClone(R)}function D(R,S,K,E){if(R.kind==="folder"){let _=document.createElement("propskit-group");if(_.setAttribute("name",R.label),!R.collapsed)_.setAttribute("open","true");else _.setAttribute("open","false");for(let B of R.children)_.append(D(B,S?`${S}.${B.key}`:B.key,K,E));return _}if(R.kind==="action"){let _=document.createElement("fig-button");return _.textContent=R.label,_.addEventListener("click",()=>E("action",S||R.key)),_}if(R.kind==="slider"){let _=document.createElement("propskit-slider");_.setAttribute("label",R.label),_.setAttribute("min",String(R.min)),_.setAttribute("max",String(R.max)),_.setAttribute("step",String(R.step)),_.setAttribute("value",String(U(K,S)??R.default)),_.setAttribute("full","");let B=(Y)=>{let J=Y instanceof CustomEvent&&Y.detail!==void 0?Y.detail:_.value,q=typeof J==="number"?J:Number(J);E("change",S,Number.isFinite(q)?q:J)};return _.addEventListener("input",B),_.addEventListener("change",B),_}if(R.kind==="switch"){let _=document.createElement("propskit-switch");if(_.setAttribute("label",R.label),U(K,S)??R.default)_.setAttribute("checked","");let B=(Y)=>{let J=Y instanceof CustomEvent&&Y.detail!==void 0?Y.detail:null,q=J&&typeof J==="object"&&"checked"in J?Boolean(J.checked):_.hasAttribute("checked");E("change",S,q)};return _.addEventListener("input",B),_.addEventListener("change",B),_}if(R.kind==="color"){let _=document.createElement("propskit-color");_.setAttribute("label",R.label),_.setAttribute("value",String(U(K,S)??R.default));let B=(Y)=>{let J=Y instanceof CustomEvent&&Y.detail!==void 0?Y.detail:_.value;E("change",S,J)};return _.addEventListener("input",B),_.addEventListener("change",B),_}if(R.kind==="text"){let _=document.createElement("propskit-text");if(_.setAttribute("label",R.label),_.setAttribute("value",String(U(K,S)??R.default??"")),R.placeholder)_.setAttribute("placeholder",R.placeholder);let B=(Y)=>{let J=Y instanceof CustomEvent&&Y.detail!==void 0?Y.detail:_.value;E("change",S,J)};return _.addEventListener("input",B),_.addEventListener("change",B),_}if(R.kind==="select"){let _=document.createElement("propskit-select");_.setAttribute("label",R.label);let B=(R.options??[]).map((q)=>O(q)).join(",");_.setAttribute("options",B);let Y=U(K,S)??R.default;_.setAttribute("value",String(Y??""));let J=(q)=>{let M=q instanceof CustomEvent&&q.detail!==void 0?q.detail:_.value,N=typeof M==="object"&&M&&"value"in M?M.value:M,X=(R.options??[]).find((G)=>O(G)===String(N)||V(G)===String(N));E("change",S,X?V(X)||O(X):N)};return _.addEventListener("input",J),_.addEventListener("change",J),_}if(R.kind==="easing"){let _=document.createElement("fig-field");_.setAttribute("direction","horizontal");let B=document.createElement("label");B.textContent=R.label;let Y=document.createElement("fig-easing-curve"),J=U(K,S)??R.default;if(Array.isArray(J))Y.setAttribute("value",J.join(","));_.append(B,Y);let q=(M)=>{let N=M instanceof CustomEvent&&M.detail!==void 0?M.detail:null;E("change",S,N&&typeof N==="object"&&"value"in N?N.value:N)};return Y.addEventListener("input",q),Y.addEventListener("change",q),_}let I=document.createElement("propskit-text");return I.setAttribute("label",R.label),I.setAttribute("value",String(U(K,S)??"")),I}function b(R,S,K,E={}){if(!R||!(R instanceof Element)&&!(R instanceof DocumentFragment))throw Error("createPropsKit requires a mount element");let I=R instanceof DocumentFragment?(()=>{let G=document.createElement("div");return R.append(G),G})():R,_=E.theme??"system";if(E.scoped!==!1)L(I,_);else L(I,_);let Y=j(K),J=F(Y),q=new Set,M=document.createElement("propskit-group");if(S)M.setAttribute("name",S),M.setAttribute("open","true");let N=(G,W,Z)=>{if(G==="action"){E.onAction?.(W);return}z(J,W,Z);let Q=T(J);E.onChange?.(W,Z,Q);for(let $ of q)$(Q);I.dispatchEvent(new CustomEvent("change",{detail:{path:W,value:Z,values:Q},bubbles:!0,composed:!0}))};for(let G of Y)M.append(D(G,G.key,J,N));I.replaceChildren(M),H(I);let X=new MutationObserver(()=>H(I));return X.observe(I,{attributes:!0,attributeFilter:["theme","class"]}),{get values(){return T(J)},get(G){return U(J,G)},set(G,W){z(J,G,W);let Z=T(J);E.onChange?.(G,W,Z);for(let $ of q)$(Z);I.replaceChildren();let Q=document.createElement("propskit-group");if(S)Q.setAttribute("name",S),Q.setAttribute("open","true");for(let $ of Y)Q.append(D($,$.key,J,N));I.append(Q)},subscribe(G){return q.add(G),()=>q.delete(G)},destroy(){X.disconnect(),q.clear(),I.replaceChildren()}}}class x extends HTMLElement{static get observedAttributes(){return["theme"]}connectedCallback(){this.#R()}attributeChangedCallback(){this.#R()}#R(){let R=this.getAttribute("theme")||"system";L(this,R),H(this)}}if(typeof customElements<"u"&&!customElements.get("fig-panel"))customElements.define("fig-panel",x);if(typeof document<"u")document.addEventListener("pointerdown",(R)=>{let S=R.target;if(!(S instanceof Element))return;if(S.closest(".figui-root"))H(S)},!0),document.addEventListener("focusin",(R)=>{let S=R.target;if(!(S instanceof Element))return;if(S.closest(".figui-root"))H(S)},!0);export{H as syncOverlayTheme,j as parseConfig,C as inferControl,b as createPropsKit,L as applyFiguiTheme,P as PROPSKIT_SCOPE_ROOT_CLASS,w as PROPSKIT_OVERLAY_ROOT_ATTR};

package/propskit-core.js

@@ -1,556 +0,0 @@
-/**
- * PropsKit core — config store, theme, and DOM renderer.
- * Framework-agnostic. Bundled into propskit.js.
- */
-
-export const PROPSKIT_SCOPE_ROOT_CLASS = "figui-root";
-export const PROPSKIT_OVERLAY_ROOT_ATTR = "data-figui-overlay-root";
-
-/** @typedef {'system' | 'light' | 'dark'} PropsKitTheme */
-
-/**
- * @param {Element} el
- * @param {PropsKitTheme} [theme]
- */
-export function applyFiguiTheme(el, theme = "system") {
-  if (!el) return;
-  const normalized =
-    theme === "light" || theme === "dark" || theme === "system"
-      ? theme
-      : "system";
-  el.setAttribute("theme", normalized);
-  el.classList.add(PROPSKIT_SCOPE_ROOT_CLASS);
-  el.classList.toggle("figma-light", normalized === "light");
-  el.classList.toggle("figma-dark", normalized === "dark");
-  if (normalized === "system") {
-    el.style.setProperty("color-scheme", "light dark");
-  } else {
-    el.style.setProperty("color-scheme", normalized);
-  }
-}
-
-/**
- * Sync theme from a panel root onto the document overlay portal.
- * @param {Element | null} [source]
- */
-export function syncOverlayTheme(source) {
-  if (typeof document === "undefined" || !document.body) return null;
-  const attr = PROPSKIT_OVERLAY_ROOT_ATTR;
-  let root = document.body.querySelector(`:scope > [${attr}]`);
-  if (!root) {
-    root = document.createElement("div");
-    root.setAttribute(attr, "");
-    document.body.append(root);
-  }
-
-  const panel =
-    source?.closest?.(`.${PROPSKIT_SCOPE_ROOT_CLASS}`) ??
-    document.querySelector(`.${PROPSKIT_SCOPE_ROOT_CLASS}`);
-
-  if (!panel) return root;
-
-  const themeAttr = panel.getAttribute("theme");
-  const theme =
-    themeAttr === "light" || themeAttr === "dark" || themeAttr === "system"
-      ? themeAttr
-      : panel.classList.contains("figma-dark")
-        ? "dark"
-        : panel.classList.contains("figma-light")
-          ? "light"
-          : "system";
-
-  applyFiguiTheme(root, theme);
-  // Overlay root is not the panel; keep portal class semantics without forcing layout.
-  root.classList.remove(PROPSKIT_SCOPE_ROOT_CLASS);
-  root.setAttribute(attr, "");
-  if (theme === "light") root.classList.add("figma-light");
-  if (theme === "dark") root.classList.add("figma-dark");
-  return root;
-}
-
-function isPlainObject(value) {
-  return (
-    value !== null &&
-    typeof value === "object" &&
-    !Array.isArray(value) &&
-    Object.getPrototypeOf(value) === Object.prototype
-  );
-}
-
-function isHexColor(value) {
-  return typeof value === "string" && /^#([0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(value);
-}
-
-/**
- * @param {string} key
- * @param {unknown} value
- * @returns {{ kind: string, key: string, label: string, [k: string]: unknown }}
- */
-export function inferControl(key, value) {
-  const label = key
-    .replace(/([A-Z])/g, " $1")
-    .replace(/[_-]+/g, " ")
-    .replace(/^\w/, (c) => c.toUpperCase())
-    .trim();
-
-  if (Array.isArray(value) && value.length >= 3 && value.every((n) => typeof n === "number")) {
-    const [def, min, max, step] = value;
-    return {
-      kind: "slider",
-      key,
-      label,
-      default: def,
-      min,
-      max,
-      step: step ?? (max - min <= 1 ? 0.01 : 1),
-    };
-  }
-
-  if (isPlainObject(value) && typeof value.type === "string") {
-    const type = value.type;
-    if (type === "select") {
-      return {
-        kind: "select",
-        key,
-        label,
-        options: value.options ?? [],
-        default: value.default ?? value.options?.[0]?.value ?? value.options?.[0] ?? "",
-      };
-    }
-    if (type === "color") {
-      return { kind: "color", key, label, default: value.default ?? "#000000" };
-    }
-    if (type === "text") {
-      return {
-        kind: "text",
-        key,
-        label,
-        default: value.default ?? "",
-        placeholder: value.placeholder,
-      };
-    }
-    if (type === "easing" || type === "spring") {
-      return {
-        kind: "easing",
-        key,
-        label,
-        default: value.value ?? value.ease ?? value.default ?? [0.4, 0, 0.2, 1],
-        spring: type === "spring" ? value : undefined,
-      };
-    }
-    if (type === "action") {
-      return { kind: "action", key, label };
-    }
-  }
-
-  if (isPlainObject(value)) {
-    const { _collapsed, ...rest } = value;
-    return {
-      kind: "folder",
-      key,
-      label,
-      collapsed: Boolean(_collapsed),
-      children: Object.entries(rest).map(([k, v]) => inferControl(k, v)),
-    };
-  }
-
-  if (typeof value === "boolean") {
-    return { kind: "switch", key, label, default: value };
-  }
-
-  if (typeof value === "number") {
-    const abs = Math.abs(value) || 1;
-    const max = abs <= 1 ? 1 : abs * 2;
-    const min = abs <= 1 ? 0 : 0;
-    return {
-      kind: "slider",
-      key,
-      label,
-      default: value,
-      min,
-      max,
-      step: abs <= 1 ? 0.01 : 1,
-    };
-  }
-
-  if (isHexColor(value)) {
-    return { kind: "color", key, label, default: value };
-  }
-
-  if (typeof value === "string") {
-    return { kind: "text", key, label, default: value };
-  }
-
-  return { kind: "text", key, label, default: String(value ?? "") };
-}
-
-/**
- * @param {Record<string, unknown>} config
- */
-export function parseConfig(config) {
-  return Object.entries(config ?? {}).map(([key, value]) => inferControl(key, value));
-}
-
-function optionValue(option) {
-  if (option && typeof option === "object") return String(option.value ?? "");
-  return String(option ?? "");
-}
-
-function optionLabel(option) {
-  if (option && typeof option === "object") {
-    return String(option.label ?? option.value ?? "");
-  }
-  return String(option ?? "");
-}
-
-function getPath(obj, path) {
-  return path.split(".").reduce((acc, key) => (acc == null ? undefined : acc[key]), obj);
-}
-
-function setPath(obj, path, value) {
-  const parts = path.split(".");
-  let cursor = obj;
-  for (let i = 0; i < parts.length - 1; i++) {
-    const key = parts[i];
-    if (!isPlainObject(cursor[key])) cursor[key] = {};
-    cursor = cursor[key];
-  }
-  cursor[parts[parts.length - 1]] = value;
-}
-
-function defaultsFromDescriptors(descriptors, target = {}) {
-  for (const d of descriptors) {
-    if (d.kind === "folder") {
-      target[d.key] = {};
-      defaultsFromDescriptors(d.children, target[d.key]);
-    } else if (d.kind !== "action") {
-      target[d.key] = d.default;
-    }
-  }
-  return target;
-}
-
-function cloneValues(values) {
-  return structuredClone(values);
-}
-
-/**
- * @param {ReturnType<typeof inferControl>} descriptor
- * @param {string} path
- * @param {Record<string, unknown>} values
- * @param {(type: string, path: string, value?: unknown) => void} emit
- */
-function renderControl(descriptor, path, values, emit) {
-  if (descriptor.kind === "folder") {
-    const group = document.createElement("propskit-group");
-    group.setAttribute("name", descriptor.label);
-    if (!descriptor.collapsed) group.setAttribute("open", "true");
-    else group.setAttribute("open", "false");
-    for (const child of descriptor.children) {
-      group.append(
-        renderControl(child, path ? `${path}.${child.key}` : child.key, values, emit),
-      );
-    }
-    return group;
-  }
-
-  if (descriptor.kind === "action") {
-    const button = document.createElement("fig-button");
-    button.textContent = descriptor.label;
-    button.addEventListener("click", () => emit("action", path || descriptor.key));
-    return button;
-  }
-
-  if (descriptor.kind === "slider") {
-    const el = document.createElement("propskit-slider");
-    el.setAttribute("label", descriptor.label);
-    el.setAttribute("min", String(descriptor.min));
-    el.setAttribute("max", String(descriptor.max));
-    el.setAttribute("step", String(descriptor.step));
-    el.setAttribute("value", String(getPath(values, path) ?? descriptor.default));
-    el.setAttribute("full", "");
-    const forward = (event) => {
-      const detail =
-        event instanceof CustomEvent && event.detail !== undefined
-          ? event.detail
-          : el.value;
-      const next = typeof detail === "number" ? detail : Number(detail);
-      emit("change", path, Number.isFinite(next) ? next : detail);
-    };
-    el.addEventListener("input", forward);
-    el.addEventListener("change", forward);
-    return el;
-  }
-
-  if (descriptor.kind === "switch") {
-    const el = document.createElement("propskit-switch");
-    el.setAttribute("label", descriptor.label);
-    if (getPath(values, path) ?? descriptor.default) el.setAttribute("checked", "");
-    const forward = (event) => {
-      const detail =
-        event instanceof CustomEvent && event.detail !== undefined
-          ? event.detail
-          : null;
-      const checked =
-        detail && typeof detail === "object" && "checked" in detail
-          ? Boolean(detail.checked)
-          : el.hasAttribute("checked");
-      emit("change", path, checked);
-    };
-    el.addEventListener("input", forward);
-    el.addEventListener("change", forward);
-    return el;
-  }
-
-  if (descriptor.kind === "color") {
-    const el = document.createElement("propskit-color");
-    el.setAttribute("label", descriptor.label);
-    el.setAttribute("value", String(getPath(values, path) ?? descriptor.default));
-    const forward = (event) => {
-      const detail =
-        event instanceof CustomEvent && event.detail !== undefined
-          ? event.detail
-          : el.value;
-      emit("change", path, detail);
-    };
-    el.addEventListener("input", forward);
-    el.addEventListener("change", forward);
-    return el;
-  }
-
-  if (descriptor.kind === "text") {
-    const el = document.createElement("propskit-text");
-    el.setAttribute("label", descriptor.label);
-    el.setAttribute("value", String(getPath(values, path) ?? descriptor.default ?? ""));
-    if (descriptor.placeholder) el.setAttribute("placeholder", descriptor.placeholder);
-    const forward = (event) => {
-      const detail =
-        event instanceof CustomEvent && event.detail !== undefined
-          ? event.detail
-          : el.value;
-      emit("change", path, detail);
-    };
-    el.addEventListener("input", forward);
-    el.addEventListener("change", forward);
-    return el;
-  }
-
-  if (descriptor.kind === "select") {
-    const el = document.createElement("propskit-select");
-    el.setAttribute("label", descriptor.label);
-    const options = (descriptor.options ?? [])
-      .map((opt) => optionLabel(opt))
-      .join(",");
-    el.setAttribute("options", options);
-    const current = getPath(values, path) ?? descriptor.default;
-    el.setAttribute("value", String(current ?? ""));
-    const forward = (event) => {
-      const detail =
-        event instanceof CustomEvent && event.detail !== undefined
-          ? event.detail
-          : el.value;
-      const raw = typeof detail === "object" && detail && "value" in detail
-        ? detail.value
-        : detail;
-      const match = (descriptor.options ?? []).find(
-        (opt) => optionLabel(opt) === String(raw) || optionValue(opt) === String(raw),
-      );
-      emit("change", path, match ? optionValue(match) || optionLabel(match) : raw);
-    };
-    el.addEventListener("input", forward);
-    el.addEventListener("change", forward);
-    return el;
-  }
-
-  if (descriptor.kind === "easing") {
-    const field = document.createElement("fig-field");
-    field.setAttribute("direction", "horizontal");
-    const label = document.createElement("label");
-    label.textContent = descriptor.label;
-    const curve = document.createElement("fig-easing-curve");
-    const current = getPath(values, path) ?? descriptor.default;
-    if (Array.isArray(current)) {
-      curve.setAttribute("value", current.join(","));
-    }
-    field.append(label, curve);
-    const forward = (event) => {
-      const detail =
-        event instanceof CustomEvent && event.detail !== undefined
-          ? event.detail
-          : null;
-      emit(
-        "change",
-        path,
-        detail && typeof detail === "object" && "value" in detail
-          ? detail.value
-          : detail,
-      );
-    };
-    curve.addEventListener("input", forward);
-    curve.addEventListener("change", forward);
-    return field;
-  }
-
-  const fallback = document.createElement("propskit-text");
-  fallback.setAttribute("label", descriptor.label);
-  fallback.setAttribute("value", String(getPath(values, path) ?? ""));
-  return fallback;
-}
-
-/**
- * @param {ParentNode} target
- * @param {string} name
- * @param {Record<string, unknown>} config
- * @param {{
- *   theme?: PropsKitTheme,
- *   onChange?: (path: string, value: unknown, values: Record<string, unknown>) => void,
- *   onAction?: (name: string) => void,
- *   scoped?: boolean,
- * }} [options]
- */
-export function createPropsKit(target, name, config, options = {}) {
-  if (
-    !target ||
-    (!(target instanceof Element) && !(target instanceof DocumentFragment))
-  ) {
-    throw new Error("createPropsKit requires a mount element");
-  }
-
-  const mount =
-    target instanceof DocumentFragment
-      ? (() => {
-          const el = document.createElement("div");
-          target.append(el);
-          return el;
-        })()
-      : target;
-
-  const theme = options.theme ?? "system";
-  const scoped = options.scoped !== false;
-  if (scoped) applyFiguiTheme(mount, theme);
-  else applyFiguiTheme(mount, theme);
-
-  const descriptors = parseConfig(config);
-  /** @type {Record<string, unknown>} */
-  let values = defaultsFromDescriptors(descriptors);
-  const listeners = new Set();
-
-  const panel = document.createElement("propskit-group");
-  if (name) {
-    panel.setAttribute("name", name);
-    panel.setAttribute("open", "true");
-  }
-
-  const emit = (type, path, value) => {
-    if (type === "action") {
-      options.onAction?.(path);
-      return;
-    }
-    setPath(values, path, value);
-    const snapshot = cloneValues(values);
-    options.onChange?.(path, value, snapshot);
-    for (const fn of listeners) fn(snapshot);
-    mount.dispatchEvent(
-      new CustomEvent("change", {
-        detail: { path, value, values: snapshot },
-        bubbles: true,
-        composed: true,
-      }),
-    );
-  };
-
-  for (const descriptor of descriptors) {
-    panel.append(renderControl(descriptor, descriptor.key, values, emit));
-  }
-
-  mount.replaceChildren(panel);
-  syncOverlayTheme(mount);
-
-  const themeObserver = new MutationObserver(() => syncOverlayTheme(mount));
-  themeObserver.observe(mount, {
-    attributes: true,
-    attributeFilter: ["theme", "class"],
-  });
-
-  return {
-    get values() {
-      return cloneValues(values);
-    },
-    get(path) {
-      return getPath(values, path);
-    },
-    set(path, value) {
-      setPath(values, path, value);
-      const snapshot = cloneValues(values);
-      options.onChange?.(path, value, snapshot);
-      for (const fn of listeners) fn(snapshot);
-      // Re-render for simplicity
-      mount.replaceChildren();
-      const nextPanel = document.createElement("propskit-group");
-      if (name) {
-        nextPanel.setAttribute("name", name);
-        nextPanel.setAttribute("open", "true");
-      }
-      for (const descriptor of descriptors) {
-        nextPanel.append(renderControl(descriptor, descriptor.key, values, emit));
-      }
-      mount.append(nextPanel);
-    },
-    subscribe(fn) {
-      listeners.add(fn);
-      return () => listeners.delete(fn);
-    },
-    destroy() {
-      themeObserver.disconnect();
-      listeners.clear();
-      mount.replaceChildren();
-    },
-  };
-}
-
-/** Panel shell: marks `.figui-root` and honors `theme`. */
-class FigPanel extends HTMLElement {
-  static get observedAttributes() {
-    return ["theme"];
-  }
-
-  connectedCallback() {
-    this.#apply();
-  }
-
-  attributeChangedCallback() {
-    this.#apply();
-  }
-
-  #apply() {
-    const theme = this.getAttribute("theme") || "system";
-    applyFiguiTheme(this, /** @type {PropsKitTheme} */ (theme));
-    syncOverlayTheme(this);
-  }
-}
-
-if (typeof customElements !== "undefined" && !customElements.get("fig-panel")) {
-  customElements.define("fig-panel", FigPanel);
-}
-
-// Auto-sync overlay theme when interacting inside a scoped root.
-if (typeof document !== "undefined") {
-  document.addEventListener(
-    "pointerdown",
-    (event) => {
-      const t = event.target;
-      if (!(t instanceof Element)) return;
-      if (t.closest(`.${PROPSKIT_SCOPE_ROOT_CLASS}`)) syncOverlayTheme(t);
-    },
-    true,
-  );
-  document.addEventListener(
-    "focusin",
-    (event) => {
-      const t = event.target;
-      if (!(t instanceof Element)) return;
-      if (t.closest(`.${PROPSKIT_SCOPE_ROOT_CLASS}`)) syncOverlayTheme(t);
-    },
-    true,
-  );
-}

package/propskit.d.ts

@@ -1,98 +0,0 @@
-export type PropsKitTheme = "system" | "light" | "dark";
-
-export type PropsKitSliderTuple = [number, number, number, number?];
-
-export type PropsKitSelectConfig = {
-  type: "select";
-  options: Array<string | { value: string; label?: string }>;
-  default?: string;
-};
-
-export type PropsKitColorConfig = {
-  type: "color";
-  default: string;
-};
-
-export type PropsKitTextConfig = {
-  type: "text";
-  default?: string;
-  placeholder?: string;
-};
-
-export type PropsKitEasingConfig = {
-  type: "easing" | "spring";
-  value?: number[];
-  ease?: number[];
-  default?: number[];
-  [key: string]: unknown;
-};
-
-export type PropsKitActionConfig = {
-  type: "action";
-};
-
-export type PropsKitFolderConfig = {
-  _collapsed?: boolean;
-  [key: string]: PropsKitConfigValue;
-};
-
-export type PropsKitConfigValue =
-  | number
-  | boolean
-  | string
-  | PropsKitSliderTuple
-  | PropsKitSelectConfig
-  | PropsKitColorConfig
-  | PropsKitTextConfig
-  | PropsKitEasingConfig
-  | PropsKitActionConfig
-  | PropsKitFolderConfig;
-
-export type PropsKitConfig = Record<string, PropsKitConfigValue>;
-
-export type PropsKitOptions = {
-  theme?: PropsKitTheme;
-  onChange?: (
-    path: string,
-    value: unknown,
-    values: Record<string, unknown>,
-  ) => void;
-  onAction?: (name: string) => void;
-  scoped?: boolean;
-};
-
-export type PropsKitInstance = {
-  readonly values: Record<string, unknown>;
-  get(path: string): unknown;
-  set(path: string, value: unknown): void;
-  subscribe(fn: (values: Record<string, unknown>) => void): () => void;
-  destroy(): void;
-};
-
-export declare const PROPSKIT_SCOPE_ROOT_CLASS: "figui-root";
-export declare const PROPSKIT_OVERLAY_ROOT_ATTR: "data-figui-overlay-root";
-
-export declare function applyFiguiTheme(
-  el: Element,
-  theme?: PropsKitTheme,
-): void;
-
-export declare function syncOverlayTheme(source?: Element | null): Element | null;
-
-export declare function inferControl(
-  key: string,
-  value: unknown,
-): Record<string, unknown>;
-
-export declare function parseConfig(
-  config: PropsKitConfig,
-): Array<Record<string, unknown>>;
-
-export declare function createPropsKit(
-  target: Element | DocumentFragment,
-  name: string,
-  config: PropsKitConfig,
-  options?: PropsKitOptions,
-): PropsKitInstance;
-
-export as namespace PropsKit;

package/propskit.js

@@ -1,15 +0,0 @@
-/**
- * PropsKit entry — one JS file for consumers.
- * Bundles fig + fig-lab + fig-editor + propskit-core.
- */
-import "./fig-editor.js";
-
-export {
-  PROPSKIT_SCOPE_ROOT_CLASS,
-  PROPSKIT_OVERLAY_ROOT_ATTR,
-  applyFiguiTheme,
-  syncOverlayTheme,
-  inferControl,
-  parseConfig,
-  createPropsKit,
-} from "./propskit-core.js";