@kolosal-ai/rivet 0.3.0 → 0.4.0

package/dist/anchor/index.d.ts

@@ -1,6 +1,7 @@
 import { CSSProperties, ReactNode } from 'react';
-export { A as ANCHOR_SIDES, a as AnchorGeometry, b as AnchorOptions, c as AnchorPoint, d as AnchorRecord, e as AnchorRegistration, f as AnchorRegistrationOptions, g as AnchorStrayPolicy, D as DEFAULT_ANCHOR_OPTIONS, R as ResolvedAnchorOptions, h as anchorAutoHandleId, i as anchorDotHandleId, j as anchorHandleId, k as computeAnchorGeometry, n as normalizeAnchorConnection, p as parseAnchorAutoHandleId, l as parseAnchorDotHandleId, m as parseAnchorHandleId, s as strayPlacementPct } from '../registry-CCBgd7FN.js';
-import '../types-C9Vn1rzy.js';
+import { A as AnchorRef } from '../registry-Z_oiPyjm.js';
+export { a as ANCHOR_SIDES, b as AnchorGeometry, c as AnchorOptions, d as AnchorPoint, e as AnchorRecord, f as AnchorRegistration, g as AnchorRegistrationOptions, h as AnchorStrayPolicy, D as DEFAULT_ANCHOR_OPTIONS, R as ResolvedAnchorOptions, i as anchorAutoHandleId, j as anchorDotHandleId, k as anchorHandleId, l as anchorRect, m as computeAnchorGeometry, n as findSelectableAnchor, o as normalizeAnchorConnection, p as parseAnchorAutoHandleId, q as parseAnchorDotHandleId, r as parseAnchorHandleId, s as strayPlacementPct } from '../registry-Z_oiPyjm.js';
+import '../types-D3aldmsO.js';
 
 type AnchorProps = {
     /**
@@ -10,6 +11,14 @@ type AnchorProps = {
     id: string;
     /** Accent color for the anchor's grab dots and stray handles. */
     color?: string;
+    /**
+     * Let a click on the wrapped content select the anchor. Off by default:
+     * inline anchors usually sit in editable text, where a press has to reach the
+     * caret rather than be claimed as a selection.
+     */
+    selectable?: boolean;
+    /** Opaque payload kept on the anchor record and handed back with it. */
+    data?: unknown;
     className?: string;
     style?: CSSProperties;
     children: ReactNode;
@@ -27,6 +36,24 @@ type AnchorProps = {
  * explicit consumer action via `RivetInstance.unregisterAnchor` — e.g. when
  * the content the anchor referred to is edited away for good.
  */
-declare function Anchor({ id, color, className, style, children }: AnchorProps): React.ReactElement;
+declare function Anchor({ id, color, selectable, data, className, style, children, }: AnchorProps): React.ReactElement;
+
+/**
+ * The anchors this client has selected — a click on a shape inside an
+ * `<SvgArtwork>`, or on any `<Anchor selectable>` content.
+ *
+ * Anchor selection is view state, like hover and focus. An anchor isn't in the
+ * graph — it's read off rendered DOM — so selecting one emits no change,
+ * records nothing to history, and never appears in `RivetSelection`. That also
+ * means it can't be driven from props: this reports what the pointer did, and
+ * `setSelectedAnchors` on `useRivet()` is how you set it yourself.
+ *
+ * ```tsx
+ * const [anchor] = useSelectedAnchors()
+ * const record = anchor && rivet.getAnchor(anchor.nodeId, anchor.anchorId)
+ * return <Inspector shape={record?.data} />
+ * ```
+ */
+declare function useSelectedAnchors(): readonly AnchorRef[];
 
-export { Anchor, type AnchorProps };
+export { Anchor, type AnchorProps, AnchorRef, useSelectedAnchors };

package/dist/anchor/index.js

@@ -1,21 +1,37 @@
-export { ANCHOR_SIDES, DEFAULT_ANCHOR_OPTIONS, anchorAutoHandleId, anchorDotHandleId, anchorHandleId, computeAnchorGeometry, normalizeAnchorConnection, parseAnchorAutoHandleId, parseAnchorDotHandleId, parseAnchorHandleId, strayPlacementPct } from '../chunk-AXT35ZJV.js';
+export { ANCHOR_SIDES, DEFAULT_ANCHOR_OPTIONS, anchorAutoHandleId, anchorDotHandleId, anchorHandleId, anchorRect, computeAnchorGeometry, findSelectableAnchor, normalizeAnchorConnection, parseAnchorAutoHandleId, parseAnchorDotHandleId, parseAnchorHandleId, strayPlacementPct } from '../chunk-W5HBJ4VF.js';
 import { useRivetContext, useRivetNodeContext } from '../chunk-VQYN27OK.js';
-import { useRef, useLayoutEffect } from 'react';
+import { useRef, useLayoutEffect, useSyncExternalStore } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
-function Anchor({ id, color, className, style, children }) {
+function Anchor({
+  id,
+  color,
+  selectable,
+  data,
+  className,
+  style,
+  children
+}) {
   const { store } = useRivetContext();
   const { nodeId } = useRivetNodeContext();
   const ref = useRef(null);
   useLayoutEffect(() => {
     const el = ref.current;
     if (!el) return;
-    store.registerAnchor(nodeId, id, el, color === void 0 ? void 0 : { color });
+    store.registerAnchor(nodeId, id, el, { color, selectable, data });
     return () => store.detachAnchor(nodeId, id);
-  }, [store, nodeId, id, color]);
+  }, [store, nodeId, id, color, selectable, data]);
   return /* @__PURE__ */ jsx("span", { ref, "data-rivet-anchor": id, className, style, children });
 }
+function useSelectedAnchors() {
+  const { store } = useRivetContext();
+  return useSyncExternalStore(
+    store.subscribeAnchorSelection,
+    store.getSelectedAnchors,
+    store.getSelectedAnchors
+  );
+}
 
-export { Anchor };
+export { Anchor, useSelectedAnchors };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/anchor/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/anchor.tsx"],"names":[],"mappings":";;;;;AA6BO,SAAS,OAAO,EAAE,EAAA,EAAI,OAAO,SAAA,EAAW,KAAA,EAAO,UAAS,EAAoC;AACjG,EAAA,MAAM,EAAE,KAAA,EAAM,GAAI,eAAA,EAAgB;AAClC,EAAA,MAAM,EAAE,MAAA,EAAO,GAAI,mBAAA,EAAoB;AACvC,EAAA,MAAM,GAAA,GAAM,OAAwB,IAAI,CAAA;AAExC,EAAA,eAAA,CAAgB,MAAM;AACpB,IAAA,MAAM,KAAK,GAAA,CAAI,OAAA;AACf,IAAA,IAAI,CAAC,EAAA,EAAI;AACT,IAAA,KAAA,CAAM,cAAA,CAAe,QAAQ,EAAA,EAAI,EAAA,EAAI,UAAU,MAAA,GAAY,MAAA,GAAY,EAAE,KAAA,EAAO,CAAA;AAChF,IAAA,OAAO,MAAM,KAAA,CAAM,YAAA,CAAa,MAAA,EAAQ,EAAE,CAAA;AAAA,EAC5C,GAAG,CAAC,KAAA,EAAO,MAAA,EAAQ,EAAA,EAAI,KAAK,CAAC,CAAA;AAE7B,EAAA,2BACG,MAAA,EAAA,EAAK,GAAA,EAAU,qBAAmB,EAAA,EAAI,SAAA,EAAsB,OAC1D,QAAA,EACH,CAAA;AAEJ","file":"index.js","sourcesContent":["import { type CSSProperties, type ReactNode, useLayoutEffect, useRef } from \"react\"\nimport { useRivetContext, useRivetNodeContext } from \"../context\"\n\nexport type AnchorProps = {\n  /**\n   * Identifies the anchor within its node. Persisted edge handle ids derive\n   * from it, so keep it stable across renders and sessions.\n   */\n  id: string\n  /** Accent color for the anchor's grab dots and stray handles. */\n  color?: string\n  className?: string\n  style?: CSSProperties\n  children: ReactNode\n}\n\n/**\n * Declarative anchor registration — wraps any inline content rendered inside a\n * node and binds it as a connectable point. Sugar over the imperative registry\n * (`RivetInstance.registerAnchor`) for consumers whose React tree owns the\n * DOM; the wrapper is a plain unstyled `<span>`, so it doesn't affect inline\n * layout. Rivet measures the span's line boxes and renders grab dots and stray\n * perimeter handles as overlay chrome — nothing is injected here.\n *\n * Unmounting **detaches** the anchor (stale retention: geometry and edges stay\n * put, for display/editor swaps) rather than unregistering it. Removal is an\n * explicit consumer action via `RivetInstance.unregisterAnchor` — e.g. when\n * the content the anchor referred to is edited away for good.\n */\nexport function Anchor({ id, color, className, style, children }: AnchorProps): React.ReactElement {\n  const { store } = useRivetContext()\n  const { nodeId } = useRivetNodeContext()\n  const ref = useRef<HTMLSpanElement>(null)\n\n  useLayoutEffect(() => {\n    const el = ref.current\n    if (!el) return\n    store.registerAnchor(nodeId, id, el, color === undefined ? undefined : { color })\n    return () => store.detachAnchor(nodeId, id)\n  }, [store, nodeId, id, color])\n\n  return (\n    <span ref={ref} data-rivet-anchor={id} className={className} style={style}>\n      {children}\n    </span>\n  )\n}\n"]}
+{"version":3,"sources":["../../src/components/anchor.tsx","../../src/hooks/use-selected-anchors.ts"],"names":[],"mappings":";;;;;AAqCO,SAAS,MAAA,CAAO;AAAA,EACrB,EAAA;AAAA,EACA,KAAA;AAAA,EACA,UAAA;AAAA,EACA,IAAA;AAAA,EACA,SAAA;AAAA,EACA,KAAA;AAAA,EACA;AACF,CAAA,EAAoC;AAClC,EAAA,MAAM,EAAE,KAAA,EAAM,GAAI,eAAA,EAAgB;AAClC,EAAA,MAAM,EAAE,MAAA,EAAO,GAAI,mBAAA,EAAoB;AACvC,EAAA,MAAM,GAAA,GAAM,OAAwB,IAAI,CAAA;AAExC,EAAA,eAAA,CAAgB,MAAM;AACpB,IAAA,MAAM,KAAK,GAAA,CAAI,OAAA;AACf,IAAA,IAAI,CAAC,EAAA,EAAI;AACT,IAAA,KAAA,CAAM,cAAA,CAAe,QAAQ,EAAA,EAAI,EAAA,EAAI,EAAE,KAAA,EAAO,UAAA,EAAY,MAAM,CAAA;AAChE,IAAA,OAAO,MAAM,KAAA,CAAM,YAAA,CAAa,MAAA,EAAQ,EAAE,CAAA;AAAA,EAC5C,CAAA,EAAG,CAAC,KAAA,EAAO,MAAA,EAAQ,IAAI,KAAA,EAAO,UAAA,EAAY,IAAI,CAAC,CAAA;AAE/C,EAAA,2BACG,MAAA,EAAA,EAAK,GAAA,EAAU,qBAAmB,EAAA,EAAI,SAAA,EAAsB,OAC1D,QAAA,EACH,CAAA;AAEJ;AC1CO,SAAS,kBAAA,GAA2C;AACzD,EAAA,MAAM,EAAE,KAAA,EAAM,GAAI,eAAA,EAAgB;AAClC,EAAA,OAAO,oBAAA;AAAA,IACL,KAAA,CAAM,wBAAA;AAAA,IACN,KAAA,CAAM,kBAAA;AAAA,IACN,KAAA,CAAM;AAAA,GACR;AACF","file":"index.js","sourcesContent":["import { type CSSProperties, type ReactNode, useLayoutEffect, useRef } from \"react\"\nimport { useRivetContext, useRivetNodeContext } from \"../context\"\n\nexport type AnchorProps = {\n  /**\n   * Identifies the anchor within its node. Persisted edge handle ids derive\n   * from it, so keep it stable across renders and sessions.\n   */\n  id: string\n  /** Accent color for the anchor's grab dots and stray handles. */\n  color?: string\n  /**\n   * Let a click on the wrapped content select the anchor. Off by default:\n   * inline anchors usually sit in editable text, where a press has to reach the\n   * caret rather than be claimed as a selection.\n   */\n  selectable?: boolean\n  /** Opaque payload kept on the anchor record and handed back with it. */\n  data?: unknown\n  className?: string\n  style?: CSSProperties\n  children: ReactNode\n}\n\n/**\n * Declarative anchor registration — wraps any inline content rendered inside a\n * node and binds it as a connectable point. Sugar over the imperative registry\n * (`RivetInstance.registerAnchor`) for consumers whose React tree owns the\n * DOM; the wrapper is a plain unstyled `<span>`, so it doesn't affect inline\n * layout. Rivet measures the span's line boxes and renders grab dots and stray\n * perimeter handles as overlay chrome — nothing is injected here.\n *\n * Unmounting **detaches** the anchor (stale retention: geometry and edges stay\n * put, for display/editor swaps) rather than unregistering it. Removal is an\n * explicit consumer action via `RivetInstance.unregisterAnchor` — e.g. when\n * the content the anchor referred to is edited away for good.\n */\nexport function Anchor({\n  id,\n  color,\n  selectable,\n  data,\n  className,\n  style,\n  children,\n}: AnchorProps): React.ReactElement {\n  const { store } = useRivetContext()\n  const { nodeId } = useRivetNodeContext()\n  const ref = useRef<HTMLSpanElement>(null)\n\n  useLayoutEffect(() => {\n    const el = ref.current\n    if (!el) return\n    store.registerAnchor(nodeId, id, el, { color, selectable, data })\n    return () => store.detachAnchor(nodeId, id)\n  }, [store, nodeId, id, color, selectable, data])\n\n  return (\n    <span ref={ref} data-rivet-anchor={id} className={className} style={style}>\n      {children}\n    </span>\n  )\n}\n","import { useSyncExternalStore } from \"react\"\nimport type { AnchorRef } from \"../anchor/registry\"\nimport { useRivetContext } from \"../context\"\n\n/**\n * The anchors this client has selected — a click on a shape inside an\n * `<SvgArtwork>`, or on any `<Anchor selectable>` content.\n *\n * Anchor selection is view state, like hover and focus. An anchor isn't in the\n * graph — it's read off rendered DOM — so selecting one emits no change,\n * records nothing to history, and never appears in `RivetSelection`. That also\n * means it can't be driven from props: this reports what the pointer did, and\n * `setSelectedAnchors` on `useRivet()` is how you set it yourself.\n *\n * ```tsx\n * const [anchor] = useSelectedAnchors()\n * const record = anchor && rivet.getAnchor(anchor.nodeId, anchor.anchorId)\n * return <Inspector shape={record?.data} />\n * ```\n */\nexport function useSelectedAnchors(): readonly AnchorRef[] {\n  const { store } = useRivetContext()\n  return useSyncExternalStore(\n    store.subscribeAnchorSelection,\n    store.getSelectedAnchors,\n    store.getSelectedAnchors,\n  )\n}\n"]}