@ui-sdk/react 0.0.0-stage → 0.1.0-beta.1

package/dist/use-primitive.js

@@ -0,0 +1,674 @@
+"use client";
+// src/use-primitive.tsx
+import {
+  attrs,
+  commit,
+  directNames,
+  handlers as partHandlers,
+  keep,
+  partState,
+  present,
+  ref,
+  release,
+  renderVersion,
+  sameSlotState,
+  sameValue,
+  schemaOf,
+  selectedKeys,
+  subscribe,
+  takeOwnId,
+  unwatched,
+  yieldToAuthor
+} from "@ui-sdk/core/renderer";
+import * as React from "react";
+import {
+  mergeProps,
+  mergeRefs,
+  renderElement
+} from "./render-element.js";
+import { jsx } from "react/jsx-runtime";
+var camelCase = (names, prefix = "") => Object.fromEntries(
+  names.split(" ").map((name) => [name.toLowerCase(), prefix + name])
+);
+var propNames = {
+  class: "className",
+  for: "htmlFor",
+  checked: "defaultChecked",
+  .../* @__PURE__ */ camelCase(
+    "tabIndex readOnly inputMode enterKeyHint autoComplete autoCapitalize autoCorrect spellCheck contentEditable maxLength minLength"
+  )
+};
+var booleans = /* @__PURE__ */ new Set([
+  "hidden",
+  "disabled",
+  "readonly",
+  "required",
+  "inert",
+  "checked",
+  "multiple"
+]);
+var styles = /* @__PURE__ */ new Map();
+function styleObject(css) {
+  let style = styles.get(css);
+  if (style) {
+    return style;
+  }
+  style = {};
+  for (const declaration of css.split(";")) {
+    const index = declaration.indexOf(":");
+    if (index === -1) {
+      continue;
+    }
+    const name = declaration.slice(0, index).trim();
+    style[name.startsWith("--") ? name : name.replace(/-(\w)/g, (_, char) => char.toUpperCase())] = declaration.slice(index + 1).trim();
+  }
+  if (styles.size >= 500) {
+    styles.clear();
+  }
+  styles.set(css, style);
+  return style;
+}
+var eventProps = /* @__PURE__ */ Object.assign(
+  /* @__PURE__ */ camelCase(
+    "Click KeyDown KeyUp ContextMenu PointerDown MouseDown PointerUp PointerMove",
+    "on"
+  ),
+  {
+    dblclick: "onDoubleClick",
+    focusin: "onFocus",
+    focusout: "onBlur",
+    input: "onChange",
+    submit: "onSubmit"
+  }
+);
+var host = {
+  by: "framework",
+  attaches: /* @__PURE__ */ Object.keys(eventProps)
+};
+function toReactProps(attrs2) {
+  const props = {};
+  for (const name in attrs2) {
+    const value = attrs2[name];
+    if (value === void 0) {
+      continue;
+    }
+    props[propNames[name] ?? name] = booleans.has(name) ? true : name === "style" ? styleObject(value) : value;
+  }
+  return props;
+}
+function usePrimitive(primitive, options) {
+  const id = `ui-sdk-${React.useId()}`;
+  const create = (from = {}) => unwatched(
+    () => primitive({
+      ...options,
+      ...from,
+      controller: void 0,
+      id
+    })
+  );
+  const [instance, setInstance] = React.useState(() => create());
+  React.useLayoutEffect(() => keep(instance), [instance]);
+  const next = { ...options, id };
+  const outers = outersOf(options);
+  const base = instance.get();
+  const state = within(outers, () => instance.preview(next));
+  const preview = state && {
+    options: next,
+    outers,
+    base,
+    state,
+    handed: false,
+    pending: /* @__PURE__ */ new Set()
+  };
+  React.useLayoutEffect(() => {
+    handOver(instance, next, preview, outers);
+  });
+  const life = React.useRef({ mounted: 0, destroyed: false });
+  React.useEffect(() => {
+    const own = life.current;
+    own.mounted++;
+    hidden.delete(instance);
+    owners?.unregister(own);
+    if (own.destroyed) {
+      own.destroyed = false;
+      setInstance(create(carried(primitive, instance, options)));
+    }
+    return () => {
+      own.mounted--;
+      queueMicrotask(() => {
+        if (own.mounted || own.destroyed) {
+          return;
+        }
+        release(instance);
+        const leave = () => {
+          own.destroyed = true;
+          instance.destroy();
+        };
+        if (!anchors.has(instance)) {
+          owners?.register(own, instance, own);
+        } else if (inPage(instance)) {
+          hide(instance, leave);
+        } else {
+          leave();
+        }
+      });
+    };
+  }, [instance]);
+  const stable = React.useMemo(() => {
+    const handle = {
+      primitive,
+      instance,
+      get state() {
+        return stateIn(this);
+      },
+      // Read when used, since reading it wakes an asleep instance.
+      get api() {
+        return instance.api;
+      }
+    };
+    return handle;
+  }, [instance]);
+  if (!preview) {
+    return stable;
+  }
+  const previewing = extendHandle(stable, {});
+  previews.set(previewing, preview);
+  return previewing;
+}
+var previews = /* @__PURE__ */ new WeakMap();
+var handing;
+function handOver(instance, options, preview, outers) {
+  if (preview) {
+    preview.handed = true;
+  }
+  const outer = handing;
+  handing = preview;
+  try {
+    within(outers, () => instance.setOptions(options));
+  } finally {
+    handing = outer;
+  }
+}
+var readers = /* @__PURE__ */ new WeakMap();
+function reading(handle, read) {
+  readers.set(read, handle);
+  return read;
+}
+function outersOf(options) {
+  let outers;
+  for (const key in options) {
+    const outer = readers.get(options[key]);
+    if (outer) {
+      ;
+      (outers ??= []).push(outer);
+    }
+  }
+  return outers;
+}
+function within(outers, read) {
+  if (!outers) {
+    return read();
+  }
+  let run = read;
+  for (const outer of outers) {
+    const inner = run;
+    run = () => readIn(outer, inner);
+  }
+  return run();
+}
+function extendHandle(handle, extra) {
+  const copy = Object.defineProperties({}, {
+    ...Object.getOwnPropertyDescriptors(handle),
+    ...Object.getOwnPropertyDescriptors(extra),
+    state: { get: () => stateIn(copy), enumerable: true }
+  });
+  const preview = previews.get(handle);
+  if (preview) {
+    previews.set(copy, preview);
+  }
+  return copy;
+}
+function presentIn(handle, name, props) {
+  const part = handle.instance.part(name, props);
+  return readIn(handle, (showing) => present(part, part.props, showing));
+}
+function slotIn(handle, name, props, user = {}) {
+  const part = handle.instance.part(name, props);
+  return readIn(
+    handle,
+    (showing) => elementProps(part, part.props, user, showing)
+  );
+}
+function stateIn(handle) {
+  const { instance } = handle;
+  const current = instance.get();
+  const preview = previews.get(handle);
+  if (!preview || preview.handed) {
+    return current;
+  }
+  if (preview.base !== current) {
+    preview.base = current;
+    preview.state = within(
+      preview.outers,
+      () => instance.preview(preview.options)
+    );
+  }
+  return preview.state ?? current;
+}
+function readIn(handle, read, around) {
+  const state = stateIn(handle);
+  if (state === handle.instance.get() && !around) {
+    return read(state);
+  }
+  return handle.instance.view(state, () => read(state), around);
+}
+var anchors = /* @__PURE__ */ new WeakMap();
+var inPage = (instance) => !!anchors.get(instance)?.isConnected;
+var owners = typeof FinalizationRegistry === "undefined" ? void 0 : new FinalizationRegistry(
+  (instance) => instance.destroy()
+);
+var hidden = /* @__PURE__ */ new Map();
+var sweeping;
+function hide(instance, leave) {
+  hidden.set(instance, leave);
+  sweeping ??= setInterval(() => {
+    for (const [instance2, leave2] of hidden) {
+      if (inPage(instance2)) {
+        continue;
+      }
+      hidden.delete(instance2);
+      leave2();
+    }
+    if (hidden.size) {
+      return;
+    }
+    clearInterval(sweeping);
+    sweeping = void 0;
+  }, 1e3);
+}
+function carried(primitive, instance, options) {
+  const schema = schemaOf(primitive).options;
+  const state = instance.get();
+  const defaults = {};
+  for (const key in state) {
+    const fallback = `default${key[0].toUpperCase()}${key.slice(1)}`;
+    if (fallback in schema && options[key] === void 0) {
+      defaults[fallback] = state[key];
+    }
+  }
+  return defaults;
+}
+var heldRefs = /* @__PURE__ */ new WeakMap();
+function heldRef(part) {
+  let held = heldRefs.get(part);
+  if (held) {
+    return held;
+  }
+  const bindTo = ref(part, host);
+  let releasing = false;
+  held = (el) => {
+    releasing = !el;
+    if (el) {
+      return bindTo(el);
+    }
+    queueMicrotask(() => {
+      if (releasing) {
+        bindTo(null);
+      }
+    });
+  };
+  heldRefs.set(part, held);
+  return held;
+}
+function elementProps(part, props, user, state) {
+  takeOwnId(part, user.id);
+  const handlers = {};
+  for (const [type, handler] of Object.entries(partHandlers(part))) {
+    const prop = eventProps[type];
+    if (!prop) {
+      continue;
+    }
+    handlers[prop] = (event) => {
+      handler(event.nativeEvent);
+      if (event.nativeEvent.defaultPrevented && !event.isDefaultPrevented()) {
+        event.preventDefault();
+      }
+    };
+  }
+  const own = yieldToAuthor(
+    attrs(part, props, state),
+    (name) => user[propNames[name] ?? name] != null
+  );
+  return mergeProps(handlers, user, toReactProps(own), {
+    id: user.id,
+    ref: heldRef(part)
+  });
+}
+function sameAttrs(a, b, skip = []) {
+  const keys = Object.keys(a);
+  return keys.length === Object.keys(b).length && keys.every((key) => a[key] === b[key] || skip.includes(key));
+}
+var rechecks = /* @__PURE__ */ new WeakMap();
+function changesValues(before, after) {
+  for (const key in { ...before, ...after }) {
+    if (typeof before[key] === "function" && typeof after[key] === "function") {
+      continue;
+    }
+    if (!sameValue(before[key], after[key])) {
+      return true;
+    }
+  }
+  return false;
+}
+function usePartState(handle, name, props, around) {
+  const { instance } = handle;
+  const [, rerender] = React.useReducer((count) => count + 1, 0);
+  const part = instance.part(name, props, true);
+  const rendered = readIn(
+    handle,
+    (showing) => ({
+      handle,
+      around,
+      props,
+      snapshot: partState(part, props, showing),
+      // The keys this render read, filled in as it reads them.
+      read: /* @__PURE__ */ new Set(),
+      attrs: attrs(part, props, showing),
+      present: present(part, props, showing),
+      version: renderVersion(instance)
+    }),
+    around
+  );
+  const state = new Proxy(rendered.snapshot, {
+    get(target, key) {
+      if (typeof key === "string") {
+        rendered.read.add(key);
+      }
+      return target[key];
+    }
+  });
+  const last = React.useRef(rendered);
+  const preview = previews.get(handle);
+  if (preview && !preview.handed) {
+    preview.pending.add(last);
+  }
+  const check = React.useCallback(
+    (full, props2 = false) => {
+      const shown = last.current;
+      const outdated = readIn(
+        shown.handle,
+        (now) => {
+          if (shown.read.size) {
+            const next = partState(
+              part,
+              shown.props,
+              now
+            );
+            for (const key of shown.read) {
+              if (sameSlotState(next[key], shown.snapshot[key])) {
+                continue;
+              }
+              shown.snapshot = next;
+              return true;
+            }
+          }
+          const shows = present(part, shown.props, now);
+          if (shows !== shown.present) {
+            return true;
+          }
+          if (renderVersion(instance) === shown.version && !props2) {
+            return false;
+          }
+          shown.version = renderVersion(instance);
+          return shows && !sameAttrs(
+            attrs(part, shown.props, now),
+            shown.attrs,
+            full ? void 0 : directNames(part)
+          );
+        },
+        shown.around
+      );
+      if (outdated) {
+        rerender();
+      }
+    },
+    [instance, part]
+  );
+  React.useLayoutEffect(() => {
+    const changed = part.props !== props && changesValues(part.props, props);
+    commit(part, props);
+    preview?.pending.delete(last);
+    if (part.el && !inPage(instance)) {
+      anchors.set(instance, part.el);
+    }
+    last.current = rendered;
+    check(true);
+    if (changed) {
+      rechecks.get(instance)?.forEach((recheck) => recheck());
+    }
+  });
+  const selected = selectedKeys(part, props);
+  React.useLayoutEffect(() => {
+    const recheck = () => check(true, true);
+    let all = rechecks.get(instance);
+    if (!all) {
+      rechecks.set(instance, all = /* @__PURE__ */ new Set());
+    }
+    all.add(recheck);
+    const unsubscribe = subscribe(
+      part,
+      () => {
+        if (!handing?.pending.has(last)) {
+          check(false);
+        }
+      },
+      last.current.props
+    );
+    return () => {
+      all.delete(recheck);
+      unsubscribe();
+    };
+  }, [part, selected, check]);
+  return state;
+}
+var kindOf = (spec) => typeof spec === "object" ? spec.kind : spec;
+var fromOf = (spec, key) => {
+  if (typeof spec !== "object") {
+    return void 0;
+  }
+  const [slot, prop = key] = spec.from.split(".");
+  return { slot, prop };
+};
+var pascal = (name) => name.replace(/(^|-)(\w)/g, (_, _dash, char) => char.toUpperCase());
+function split(props, schema) {
+  const named = {};
+  const rest = {};
+  for (const key in props) {
+    ;
+    (key in schema ? named : rest)[key] = props[key];
+  }
+  return [named, rest];
+}
+var scopes = /* @__PURE__ */ new WeakMap();
+function scopeOf(primitive) {
+  let scope = scopes.get(primitive);
+  if (!scope) {
+    scopes.set(
+      primitive,
+      scope = {
+        context: React.createContext(null),
+        provides: /* @__PURE__ */ new Set(),
+        keyed: /* @__PURE__ */ new Set()
+      }
+    );
+  }
+  return scope;
+}
+function HandleScope({
+  handle,
+  children
+}) {
+  const { context } = scopeOf(handle.primitive);
+  const scope = React.useMemo(() => ({ handle, around: {} }), [handle]);
+  return /* @__PURE__ */ jsx(context.Provider, { value: scope, children });
+}
+function useNearest(primitive) {
+  return React.useContext(scopeOf(primitive).context)?.handle;
+}
+function useHandle(primitive) {
+  const handle = useNearest(primitive);
+  if (!handle) {
+    throw new Error(
+      `The ${primitive.name} parts must be used inside their root.`
+    );
+  }
+  return handle;
+}
+function usePart(handle, slot, slotProps, props = {}, tag = "div") {
+  const primitive = typeof handle === "function" ? handle : handle.primitive;
+  const { context, provides, keyed } = scopeOf(primitive);
+  const scope = React.useContext(context);
+  const owner = typeof handle === "function" ? scope?.handle : handle;
+  if (!owner) {
+    throw new Error(
+      `The ${primitive.name} ${slot} part must be used inside its root.`
+    );
+  }
+  const { render, ...rest } = props;
+  const own = React.useMemo(
+    () => ({ handle: owner, around: {} }),
+    [owner]
+  );
+  const inside = scope?.handle === owner ? scope : own;
+  const around = keyed.has(slot) ? { ...slotProps, value: slotProps.id } : slotProps;
+  const provided = provides.has(slot) ? {
+    handle: owner,
+    around: { ...inside.around, [slot]: around },
+    shown: { ...inside.shown, [slot]: slotProps }
+  } : inside;
+  const state = usePartState(
+    owner,
+    slot,
+    slotProps,
+    provided.shown
+  );
+  const part = owner.instance.part(slot, slotProps, true);
+  React.useLayoutEffect(() => () => ref(part, host)(null), [part]);
+  const renderId = React.isValidElement(render) ? render.props.id : void 0;
+  const user = renderId === void 0 ? rest : { ...rest, id: renderId };
+  const merged = readIn(
+    owner,
+    (showing) => present(part, slotProps, showing) ? elementProps(part, slotProps, user, showing) : void 0,
+    provided.shown
+  );
+  const element = merged ? renderElement(tag, merged, render, state) : null;
+  if (provided === scope) {
+    return element;
+  }
+  return /* @__PURE__ */ jsx(context.Provider, { value: provided, children: element });
+}
+function createParts(primitive, tags) {
+  const schema = schemaOf(primitive);
+  const { context, provides, keyed } = scopeOf(primitive);
+  for (const [slot, props] of Object.entries(schema.slots)) {
+    for (const key in props) {
+      const from = fromOf(props[key], key);
+      if (from) {
+        provides.add(from.slot);
+      }
+      if (kindOf(props[key]) === "key") {
+        keyed.add(slot);
+      }
+    }
+  }
+  const name = pascal(primitive.name ?? "");
+  const parts = {};
+  function Root(props) {
+    const [options, rest] = split(props, schema.options);
+    const handle = usePrimitive(
+      primitive,
+      options
+    );
+    if (tags.root) {
+      return usePart(
+        handle,
+        "root",
+        ...split(rest, schema.slots.root ?? {}),
+        tags.root
+      );
+    }
+    return /* @__PURE__ */ jsx(HandleScope, { handle, children: props.children });
+  }
+  Root.displayName = name;
+  parts.Root = Root;
+  for (const [slot, tag] of Object.entries(tags)) {
+    if (slot === "root") {
+      continue;
+    }
+    const own = schema.slots[slot] ?? {};
+    const ids = Object.keys(own).filter((key2) => kindOf(own[key2]) === "id");
+    const key = Object.keys(own).find((key2) => kindOf(own[key2]) === "key");
+    const Part = (props) => {
+      const [slotProps, rest] = split(props, own);
+      if (props.id !== void 0) {
+        rest.id = props.id;
+      }
+      for (const key2 of ids) {
+        const id = React.useId();
+        slotProps[key2] ??= id;
+      }
+      const scope = React.useContext(context);
+      if (key) {
+        slotProps.id ??= scope?.handle.api?.internal.keyOf(slotProps[key]);
+      }
+      for (const prop in own) {
+        const spec = own[prop];
+        const from = fromOf(spec, prop);
+        if (!from || slotProps[prop] !== void 0) {
+          continue;
+        }
+        const around = scope?.around[from.slot];
+        if (!around && spec.required) {
+          throw new Error(
+            `<${Part.displayName}> must be used inside <${name}${pascal(from.slot)}>.`
+          );
+        }
+        slotProps[prop] = around?.[from.prop];
+      }
+      return usePart(
+        primitive,
+        slot,
+        slotProps,
+        rest,
+        tag
+      );
+    };
+    Part.displayName = name + pascal(slot);
+    parts[pascal(slot)] = Part;
+  }
+  return parts;
+}
+function useAround(primitive, slot) {
+  return React.useContext(scopeOf(primitive).context)?.around[slot];
+}
+function sharesProps(primitive, slot) {
+  scopeOf(primitive).provides.add(slot);
+}
+export {
+  HandleScope,
+  createParts,
+  extendHandle,
+  mergeProps,
+  mergeRefs,
+  presentIn,
+  readIn,
+  reading,
+  renderElement,
+  sharesProps,
+  slotIn,
+  useAround,
+  useHandle,
+  useNearest,
+  usePart,
+  usePrimitive
+};