@rainbow-robotics/plugin-ui 0.1.0

package/README.md

@@ -0,0 +1,85 @@
+# @rainbow-robotics/plugin-ui
+
+Muscat plugin UI **contract** + sandbox/host bindings.
+
+External plugin source imports this package as `@rainbow-robotics/plugin-ui/*`, but
+`muscat-pk build` keeps it **external**. A plugin ZIP must not contain this
+runtime. Muscat/robot and preview-host provide their own matching
+`@rainbow-robotics/plugin-ui` browser runtime and render the real rb-components on the
+host side.
+
+## Architecture
+
+```
+sandbox (untrusted plugin)              host (nexus / Muscat)
+─────────────────────────              ─────────────────────
+import { Slider, Button, useRb }        import { PluginContent } from
+  from "@rainbow-robotics/plugin-ui/react"         "@rainbow-robotics/plugin-ui/host"
+
+<Slider/> → <rb-slider> ──mutations──▶  RemoteReceiver → RB_COMPONENT_MAP
+                                          → real RBSlider (rb-components)
+rb.action(id, payload) ──thread call──▶ host RbSdk.action → POST /plugin/:id/action
+host event (onChange…) ──thread call──▶ author onChange (RemoteEvent.detail)
+```
+
+- **Isolation**: the plugin runs in an `allow-scripts` iframe (opaque origin).
+- **Transport**: `@quilted/threads` (`ThreadWindow`). The **sandbox initiates**
+  the handshake by calling the host's exported `connect()` — threads does not
+  buffer a call made before the other side is listening, and the host has been
+  listening since it mounted the iframe.
+- **Rendering**: `@remote-dom/core` + `@remote-dom/react`. The sandbox streams
+  DOM mutations via `RemoteMutationObserver`; the host mirrors them with
+  `RemoteReceiver` + `RemoteRootRenderer`.
+
+## Entry points
+
+| Export | Used by | Notes |
+|---|---|---|
+| `./react` | plugin (sandbox) | author bindings: `Slider`, `Button`, `IconButton`, `Text`, `TextInput`, `Switch`, `Select`, `useRb` |
+| `./connect` | plugin (sandbox) | `connect(App)` bootstrap, called from `sandbox.html` |
+| `./sdk` | plugin (sandbox) | `useRb()`, `RbSdk` types |
+| `./elements` | both | rb-\* element contract |
+| `./host` | nexus only | `PluginContent`, `RB_COMPONENT_MAP` (maps rb-\* → real rb-components) |
+| `./manifest` | nexus + rby2 | manifest schema (single source of truth) |
+
+The plugin's production bundle must only import `./react` (+ `./connect`,
+`./sdk`); `./host` pulls in rb-components and is host-only.
+
+## rb-\* contract → rb-components mapping
+
+| element | host component | event prop |
+|---|---|---|
+| `rb-slider` | `RBSlider` | `onChange` (number) |
+| `rb-button` | `RBLabelButton` | `onPress` |
+| `rb-icon-button` | `RBIconButton` (icon from `RBIcons`) | `onPress` |
+| `rb-text` | plain text | — |
+| `rb-text-input` | `RBTextInput` | `onInput` (string) |
+| `rb-switch` | `RBSwitch` | `onChange` (boolean) |
+| `rb-select` | `RBSelectBox` | `onChange` (string) |
+
+> ⚠️ Author bindings and the host **must** declare matching `eventProps`.
+> `createRemoteComponent` / `createRemoteComponentRenderer` only treat a prop as
+> an event listener when it is in `eventProps`; they do **not** auto-derive from
+> the element's `remoteEvents`.
+
+## Verified versions
+
+`@remote-dom/core@^1.11` · `@remote-dom/react@^1.2` · `@quilted/threads@^4`.
+Notable corrections vs. early design notes: `RemoteMutationObserver` is from
+`@remote-dom/core/elements` (not `/core`); there is no `@remote-dom/core/messaging`
+— threading lives in `@quilted/threads`.
+
+## Demo (M1 end-to-end check)
+
+`demo/` is a standalone vite harness (excluded from build/lint/types). It serves
+a host page + sandbox page and verifies the full round-trip in a real browser:
+
+```bash
+# from repo root
+node_modules/.bin/vite --config packages/rb-plugin-kit/demo/vite.config.ts
+# then, with the server on :5199:
+node packages/rb-plugin-kit/demo/e2e.mjs
+```
+
+The demo renders unstyled (no Tailwind/postcss pipeline); styling is validated
+in nexus.

package/build-browser.mjs

@@ -0,0 +1,84 @@
+// Builds @rainbow-robotics/plugin-ui as browser ESM for the sandbox import map.
+// Output: dist-browser/@rainbow-robotics/plugin-ui/{connect,react,sdk,elements}.js
+//         dist-browser/vendor/react-runtime.js
+//
+// Consumed by:
+//   - nexus (vite plugin emits dist-browser/ → dist/plugin-runtime/)
+//   - preview-host (serves dist-browser/ at /plugin-runtime/)
+//
+// Run: node libraries/plugin-ui/build-browser.mjs
+import { build } from "esbuild";
+import { mkdirSync, rmSync, writeFileSync } from "node:fs";
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const here = dirname(fileURLToPath(import.meta.url));
+const src = resolve(here, "src");
+const out = resolve(here, "dist-browser");
+const repoRoot = resolve(here, "../..");
+
+const define = { "process.env.NODE_ENV": JSON.stringify("production") };
+const shared = {
+  bundle: true,
+  format: "esm",
+  platform: "browser",
+  target: "es2020",
+  minify: true,
+  sourcemap: false,
+  define,
+  logLevel: "warning",
+};
+
+rmSync(out, { recursive: true, force: true });
+mkdirSync(resolve(out, "@rainbow-robotics/plugin-ui"), { recursive: true });
+mkdirSync(resolve(out, "vendor"), { recursive: true });
+
+// Plugin-UI entry points (react / react-dom provided by vendor bundle below)
+await build({
+  ...shared,
+  entryPoints: {
+    connect: resolve(src, "connect.ts"),
+    react: resolve(src, "react.tsx"),
+    sdk: resolve(src, "sdk.ts"),
+    elements: resolve(src, "elements.ts"),
+  },
+  outdir: resolve(out, "@rainbow-robotics/plugin-ui"),
+  entryNames: "[name]",
+  chunkNames: "chunks/[name]-[hash]",
+  splitting: true,
+  external: ["react", "react-dom/client"],
+});
+
+// Single vendor bundle: React + ReactDOM (sandbox loads this once via import map)
+const reactShim = `
+  import React from "react";
+  import * as ReactClient from "react-dom/client";
+  import * as JsxRuntime from "react/jsx-runtime";
+  import * as JsxDevRuntime from "react/jsx-dev-runtime";
+  export default React;
+  export const { Children, Fragment, Profiler, StrictMode, Suspense,
+    cloneElement, createContext, createElement, createRef, forwardRef,
+    isValidElement, lazy, memo, startTransition, useCallback, useContext,
+    useDebugValue, useDeferredValue, useEffect, useId, useImperativeHandle,
+    useInsertionEffect, useLayoutEffect, useMemo, useReducer, useRef,
+    useState, useSyncExternalStore, useTransition, version } = React;
+  export const { createRoot, hydrateRoot } = ReactClient;
+  export const { jsx, jsxs } = JsxRuntime;
+  export const { jsxDEV } = JsxDevRuntime;
+`;
+
+await build({
+  ...shared,
+  stdin: { contents: reactShim, resolveDir: repoRoot, loader: "js" },
+  outfile: resolve(out, "vendor", "react-runtime.js"),
+});
+
+// Aliases so all standard React specifiers map to the single vendor file
+for (const name of ["react", "react-jsx-runtime", "react-jsx-dev-runtime", "react-dom-client"]) {
+  writeFileSync(
+    resolve(out, "vendor", `${name}.js`),
+    'export * from "./react-runtime.js"; export { default } from "./react-runtime.js";\n',
+  );
+}
+
+console.log("[plugin-ui] dist-browser ready →", out);

package/build-dist.mjs

@@ -0,0 +1,42 @@
+// Builds @rainbow-robotics/plugin-ui for npm consumers (plugin authors).
+// Output: dist/*.js (ESM, deps external) + dist/*.d.ts (via tsc)
+//
+// host.tsx is intentionally excluded — it depends on @repo/rb-components
+// which is a Muscat-internal package. External devs never import ./host.
+//
+// Run: node libraries/plugin-ui/build-dist.mjs
+import { build } from "esbuild";
+import { execSync } from "node:child_process";
+import { rmSync } from "node:fs";
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const here = dirname(fileURLToPath(import.meta.url));
+
+rmSync(resolve(here, "dist"), { recursive: true, force: true });
+
+// JS: transpile only (no bundling — consumers resolve deps themselves)
+await build({
+  entryPoints: {
+    connect:  resolve(here, "src/connect.ts"),
+    react:    resolve(here, "src/react.tsx"),
+    sdk:      resolve(here, "src/sdk.ts"),
+    elements: resolve(here, "src/elements.ts"),
+    manifest: resolve(here, "src/manifest.ts"),
+  },
+  outdir: resolve(here, "dist"),
+  format: "esm",
+  bundle: false,      // each file transpiled independently, deps stay as imports
+  platform: "neutral",
+  target: "es2022",
+  sourcemap: true,
+  logLevel: "warning",
+});
+
+// Types: tsc --emitDeclarationOnly
+execSync("node ../../node_modules/typescript/bin/tsc -p tsconfig.build.json --emitDeclarationOnly --noEmit false", {
+  cwd: here,
+  stdio: "inherit",
+});
+
+console.log("[plugin-ui] dist/ ready");

package/dist/connect.d.ts

@@ -0,0 +1,12 @@
+import { type ComponentType } from "react";
+/**
+ * Mount a plugin. Call this once from the sandbox entry (sandbox.html), passing
+ * the plugin's root component.
+ *
+ * @example
+ * import { connect } from "@rainbow-robotics/plugin-ui/connect";
+ * import App from "./content";
+ * connect(App);
+ */
+export declare function connect(App: ComponentType): void;
+//# sourceMappingURL=connect.d.ts.map

package/dist/connect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"connect.d.ts","sourceRoot":"","sources":["../src/connect.ts"],"names":[],"mappings":"AAoBA,OAAO,EAAiB,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAc1D;;;;;;;;GAQG;AACH,wBAAgB,OAAO,CAAC,GAAG,EAAE,aAAa,GAAG,IAAI,CAwBhD"}

package/dist/connect.js

@@ -0,0 +1,29 @@
+import { RemoteMutationObserver } from "@remote-dom/core/elements";
+import { ThreadWindow } from "@quilted/threads";
+import { createElement } from "react";
+import { createRoot } from "react-dom/client";
+import { defineElements } from "./elements";
+import { RbContext } from "./sdk";
+function connect(App) {
+  defineElements();
+  const host = ThreadWindow.parent.import({
+    targetOrigin: "*"
+  });
+  void host.connect().then(({ connection, action, notify }) => {
+    const rb = {
+      action: (id, payload) => Promise.resolve(action(id, payload)),
+      notify: (message, type) => notify(message, type)
+    };
+    const root = document.createElement("remote-root");
+    document.body.append(root);
+    const observer = new RemoteMutationObserver(connection);
+    observer.observe(root);
+    createRoot(root).render(
+      createElement(RbContext.Provider, { value: rb }, createElement(App))
+    );
+  });
+}
+export {
+  connect
+};
+//# sourceMappingURL=connect.js.map

package/dist/connect.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/connect.ts"],
+  "sourcesContent": ["/**\n * Sandbox bootstrap \u2014 runs *inside* the plugin iframe.\n *\n * The sandbox initiates the handshake (the iframe is the side that knows when it\n * is ready): it imports the host's `connect()` and calls it. The host responds\n * with a `RemoteConnection` (its `receiver.connection`, ferried by\n * @quilted/threads) plus the host SDK. We then render the plugin's React tree\n * into a detached root and let `RemoteMutationObserver` stream every DOM\n * mutation to the host, where the real rb-components live.\n *\n * The child-initiates-handshake pattern is required because @quilted/threads\n * does not buffer a call made before the other side is listening; the host has\n * been listening since it mounted the iframe, so a call *from* the sandbox is\n * always delivered.\n *\n * Verified against @remote-dom/core@1.11.x + @quilted/threads@4.x.\n */\nimport { RemoteMutationObserver } from \"@remote-dom/core/elements\";\nimport type { RemoteConnection } from \"@remote-dom/core\";\nimport { ThreadWindow } from \"@quilted/threads\";\nimport { createElement, type ComponentType } from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport { defineElements } from \"./elements\";\nimport { RbContext, type RbSdk } from \"./sdk\";\n\n/** What the host exposes to the sandbox. */\ninterface HostExports {\n  connect: () => Promise<{\n    connection: RemoteConnection;\n    action: (id: string, payload?: unknown) => Promise<unknown> | unknown;\n    notify: (message: string, type?: string) => void;\n  }>;\n}\n\n/**\n * Mount a plugin. Call this once from the sandbox entry (sandbox.html), passing\n * the plugin's root component.\n *\n * @example\n * import { connect } from \"@rainbow-robotics/plugin-ui/connect\";\n * import App from \"./content\";\n * connect(App);\n */\nexport function connect(App: ComponentType): void {\n  defineElements();\n\n  const host = ThreadWindow.parent.import<HostExports>({\n    targetOrigin: \"*\",\n  });\n\n  void host.connect().then(({ connection, action, notify }) => {\n    const rb: RbSdk = {\n      action: (id, payload) => Promise.resolve(action(id, payload)),\n      notify: (message, type) => notify(message, type as string | undefined),\n    };\n\n    const root = document.createElement(\"remote-root\");\n\n    document.body.append(root);\n\n    const observer = new RemoteMutationObserver(connection);\n    observer.observe(root);\n\n    createRoot(root).render(\n      createElement(RbContext.Provider, { value: rb }, createElement(App)),\n    );\n  });\n}\n"],
+  "mappings": "AAiBA,SAAS,8BAA8B;AAEvC,SAAS,oBAAoB;AAC7B,SAAS,qBAAyC;AAClD,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB;AAC/B,SAAS,iBAA6B;AAoB/B,SAAS,QAAQ,KAA0B;AAChD,iBAAe;AAEf,QAAM,OAAO,aAAa,OAAO,OAAoB;AAAA,IACnD,cAAc;AAAA,EAChB,CAAC;AAED,OAAK,KAAK,QAAQ,EAAE,KAAK,CAAC,EAAE,YAAY,QAAQ,OAAO,MAAM;AAC3D,UAAM,KAAY;AAAA,MAChB,QAAQ,CAAC,IAAI,YAAY,QAAQ,QAAQ,OAAO,IAAI,OAAO,CAAC;AAAA,MAC5D,QAAQ,CAAC,SAAS,SAAS,OAAO,SAAS,IAA0B;AAAA,IACvE;AAEA,UAAM,OAAO,SAAS,cAAc,aAAa;AAEjD,aAAS,KAAK,OAAO,IAAI;AAEzB,UAAM,WAAW,IAAI,uBAAuB,UAAU;AACtD,aAAS,QAAQ,IAAI;AAErB,eAAW,IAAI,EAAE;AAAA,MACf,cAAc,UAAU,UAAU,EAAE,OAAO,GAAG,GAAG,cAAc,GAAG,CAAC;AAAA,IACrE;AAAA,EACF,CAAC;AACH;",
+  "names": []
+}

package/dist/elements.d.ts

@@ -0,0 +1,195 @@
+/**
+ * rb-* remote element contract — shared by the sandbox (plugin author) and the
+ * nexus host. This is the *stable* surface: it must only ever grow additively
+ * (new elements / new optional properties), never break existing shapes.
+ *
+ * Verified against @remote-dom/core@1.11.x:
+ *   - `RemoteElement` lives in `@remote-dom/core/elements`
+ *   - static `remoteProperties` (data) + static `remoteEvents` (callbacks)
+ */
+import { RemoteElement } from "@remote-dom/core/elements";
+type RbNoMethods = Record<never, never>;
+type RbNoSlots = Record<never, never>;
+type RbNoEvents = Record<never, never>;
+export interface RbSliderProps {
+    value?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+}
+export interface RbButtonProps {
+    label?: string;
+    variant?: string;
+    size?: string;
+    disabled?: boolean;
+}
+export interface RbIconButtonProps {
+    icon?: string;
+    variant?: string;
+    size?: string;
+    disabled?: boolean;
+}
+export type RbTextProps = Record<never, never>;
+export interface RbTextInputProps {
+    value?: string;
+    placeholder?: string;
+    disabled?: boolean;
+}
+export interface RbSwitchProps {
+    checked?: boolean;
+    disabled?: boolean;
+}
+/** Option shape carried by `rb-select`'s `options` property. */
+export interface RbSelectOption {
+    value: string;
+    label: string;
+}
+export interface RbSelectProps {
+    value?: string;
+    options?: RbSelectOption[];
+    placeholder?: string;
+    disabled?: boolean;
+}
+export interface RbSliderEvents {
+    change(detail: number): void;
+}
+export interface RbPressEvents {
+    press(): void;
+}
+export interface RbTextInputEvents {
+    input(detail: string): void;
+}
+export interface RbSwitchEvents {
+    change(detail: boolean): void;
+}
+export interface RbSelectEvents {
+    change(detail: string): void;
+}
+/** Slider → host renders RBSlider (Radix array value, single-thumb contract). */
+export declare class RbSliderElement extends RemoteElement<RbSliderProps, RbNoMethods, RbNoSlots, RbSliderEvents> {
+    static get remoteProperties(): {
+        value: {
+            type: NumberConstructor;
+        };
+        min: {
+            type: NumberConstructor;
+        };
+        max: {
+            type: NumberConstructor;
+        };
+        step: {
+            type: NumberConstructor;
+        };
+        disabled: {
+            type: BooleanConstructor;
+        };
+    };
+    static get remoteEvents(): readonly ["change"];
+}
+/** Button → host renders RBLabelButton. */
+export declare class RbButtonElement extends RemoteElement<RbButtonProps, RbNoMethods, RbNoSlots, RbPressEvents> {
+    static get remoteProperties(): {
+        label: {
+            type: StringConstructor;
+        };
+        variant: {
+            type: StringConstructor;
+        };
+        size: {
+            type: StringConstructor;
+        };
+        disabled: {
+            type: BooleanConstructor;
+        };
+    };
+    static get remoteEvents(): readonly ["press"];
+}
+/** Icon button → host renders RBIconButton with an icon resolved from RBIcons. */
+export declare class RbIconButtonElement extends RemoteElement<RbIconButtonProps, RbNoMethods, RbNoSlots, RbPressEvents> {
+    static get remoteProperties(): {
+        icon: {
+            type: StringConstructor;
+        };
+        variant: {
+            type: StringConstructor;
+        };
+        size: {
+            type: StringConstructor;
+        };
+        disabled: {
+            type: BooleanConstructor;
+        };
+    };
+    static get remoteEvents(): readonly ["press"];
+}
+/** Plain text — renders its children as text on the host. */
+export declare class RbTextElement extends RemoteElement<RbTextProps, RbNoMethods, RbNoSlots, RbNoEvents> {
+    static get remoteProperties(): {};
+}
+/** Text input → host renders RBTextInput. */
+export declare class RbTextInputElement extends RemoteElement<RbTextInputProps, RbNoMethods, RbNoSlots, RbTextInputEvents> {
+    static get remoteProperties(): {
+        value: {
+            type: StringConstructor;
+        };
+        placeholder: {
+            type: StringConstructor;
+        };
+        disabled: {
+            type: BooleanConstructor;
+        };
+    };
+    static get remoteEvents(): readonly ["input"];
+}
+/** Switch → host renders RBSwitch. */
+export declare class RbSwitchElement extends RemoteElement<RbSwitchProps, RbNoMethods, RbNoSlots, RbSwitchEvents> {
+    static get remoteProperties(): {
+        checked: {
+            type: BooleanConstructor;
+        };
+        disabled: {
+            type: BooleanConstructor;
+        };
+    };
+    static get remoteEvents(): readonly ["change"];
+}
+/** Select → host renders RBSelectBox. `options` is `[{value,label}]`. */
+export declare class RbSelectElement extends RemoteElement<RbSelectProps, RbNoMethods, RbNoSlots, RbSelectEvents> {
+    static get remoteProperties(): {
+        value: {
+            type: StringConstructor;
+        };
+        options: {
+            type: ArrayConstructor;
+        };
+        placeholder: {
+            type: StringConstructor;
+        };
+        disabled: {
+            type: BooleanConstructor;
+        };
+    };
+    static get remoteEvents(): readonly ["change"];
+}
+/** Custom element tag names in the contract. */
+export declare const RB_ELEMENT_NAMES: readonly ["rb-slider", "rb-button", "rb-icon-button", "rb-text", "rb-text-input", "rb-switch", "rb-select"];
+export type RbElementName = (typeof RB_ELEMENT_NAMES)[number];
+declare global {
+    interface HTMLElementTagNameMap {
+        "rb-slider": RbSliderElement;
+        "rb-button": RbButtonElement;
+        "rb-icon-button": RbIconButtonElement;
+        "rb-text": RbTextElement;
+        "rb-text-input": RbTextInputElement;
+        "rb-switch": RbSwitchElement;
+        "rb-select": RbSelectElement;
+    }
+}
+/**
+ * Registers the rb-* custom elements. Safe to call multiple times; only the
+ * first call defines anything (subsequent calls are a no-op).
+ */
+export declare function defineElements(): void;
+export {};
+//# sourceMappingURL=elements.d.ts.map

package/dist/elements.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"elements.d.ts","sourceRoot":"","sources":["../src/elements.ts"],"names":[],"mappings":"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"}

package/dist/elements.js

@@ -0,0 +1,115 @@
+import { RemoteElement } from "@remote-dom/core/elements";
+class RbSliderElement extends RemoteElement {
+  static get remoteProperties() {
+    return {
+      value: { type: Number },
+      min: { type: Number },
+      max: { type: Number },
+      step: { type: Number },
+      disabled: { type: Boolean }
+    };
+  }
+  static get remoteEvents() {
+    return ["change"];
+  }
+}
+class RbButtonElement extends RemoteElement {
+  static get remoteProperties() {
+    return {
+      label: { type: String },
+      variant: { type: String },
+      size: { type: String },
+      disabled: { type: Boolean }
+    };
+  }
+  static get remoteEvents() {
+    return ["press"];
+  }
+}
+class RbIconButtonElement extends RemoteElement {
+  static get remoteProperties() {
+    return {
+      icon: { type: String },
+      variant: { type: String },
+      size: { type: String },
+      disabled: { type: Boolean }
+    };
+  }
+  static get remoteEvents() {
+    return ["press"];
+  }
+}
+class RbTextElement extends RemoteElement {
+  static get remoteProperties() {
+    return {};
+  }
+}
+class RbTextInputElement extends RemoteElement {
+  static get remoteProperties() {
+    return {
+      value: { type: String },
+      placeholder: { type: String },
+      disabled: { type: Boolean }
+    };
+  }
+  static get remoteEvents() {
+    return ["input"];
+  }
+}
+class RbSwitchElement extends RemoteElement {
+  static get remoteProperties() {
+    return {
+      checked: { type: Boolean },
+      disabled: { type: Boolean }
+    };
+  }
+  static get remoteEvents() {
+    return ["change"];
+  }
+}
+class RbSelectElement extends RemoteElement {
+  static get remoteProperties() {
+    return {
+      value: { type: String },
+      options: { type: Array },
+      placeholder: { type: String },
+      disabled: { type: Boolean }
+    };
+  }
+  static get remoteEvents() {
+    return ["change"];
+  }
+}
+const RB_ELEMENT_NAMES = [
+  "rb-slider",
+  "rb-button",
+  "rb-icon-button",
+  "rb-text",
+  "rb-text-input",
+  "rb-switch",
+  "rb-select"
+];
+let defined = false;
+function defineElements() {
+  if (defined || typeof customElements === "undefined") return;
+  defined = true;
+  customElements.define("rb-slider", RbSliderElement);
+  customElements.define("rb-button", RbButtonElement);
+  customElements.define("rb-icon-button", RbIconButtonElement);
+  customElements.define("rb-text", RbTextElement);
+  customElements.define("rb-text-input", RbTextInputElement);
+  customElements.define("rb-switch", RbSwitchElement);
+  customElements.define("rb-select", RbSelectElement);
+}
+export {
+  RB_ELEMENT_NAMES,
+  RbButtonElement,
+  RbIconButtonElement,
+  RbSelectElement,
+  RbSliderElement,
+  RbSwitchElement,
+  RbTextElement,
+  RbTextInputElement,
+  defineElements
+};
+//# sourceMappingURL=elements.js.map

package/dist/elements.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/elements.ts"],
+  "sourcesContent": ["/**\n * rb-* remote element contract \u2014 shared by the sandbox (plugin author) and the\n * nexus host. This is the *stable* surface: it must only ever grow additively\n * (new elements / new optional properties), never break existing shapes.\n *\n * Verified against @remote-dom/core@1.11.x:\n *   - `RemoteElement` lives in `@remote-dom/core/elements`\n *   - static `remoteProperties` (data) + static `remoteEvents` (callbacks)\n */\nimport { RemoteElement } from \"@remote-dom/core/elements\";\n\ntype RbNoMethods = Record<never, never>;\ntype RbNoSlots = Record<never, never>;\ntype RbNoEvents = Record<never, never>;\n\nexport interface RbSliderProps {\n  value?: number;\n  min?: number;\n  max?: number;\n  step?: number;\n  disabled?: boolean;\n}\n\nexport interface RbButtonProps {\n  label?: string;\n  variant?: string;\n  size?: string;\n  disabled?: boolean;\n}\n\nexport interface RbIconButtonProps {\n  icon?: string;\n  variant?: string;\n  size?: string;\n  disabled?: boolean;\n}\n\nexport type RbTextProps = Record<never, never>;\n\nexport interface RbTextInputProps {\n  value?: string;\n  placeholder?: string;\n  disabled?: boolean;\n}\n\nexport interface RbSwitchProps {\n  checked?: boolean;\n  disabled?: boolean;\n}\n\n/** Option shape carried by `rb-select`'s `options` property. */\nexport interface RbSelectOption {\n  value: string;\n  label: string;\n}\n\nexport interface RbSelectProps {\n  value?: string;\n  options?: RbSelectOption[];\n  placeholder?: string;\n  disabled?: boolean;\n}\n\nexport interface RbSliderEvents {\n  change(detail: number): void;\n}\n\nexport interface RbPressEvents {\n  press(): void;\n}\n\nexport interface RbTextInputEvents {\n  input(detail: string): void;\n}\n\nexport interface RbSwitchEvents {\n  change(detail: boolean): void;\n}\n\nexport interface RbSelectEvents {\n  change(detail: string): void;\n}\n\n/** Slider \u2192 host renders RBSlider (Radix array value, single-thumb contract). */\nexport class RbSliderElement extends RemoteElement<\n  RbSliderProps,\n  RbNoMethods,\n  RbNoSlots,\n  RbSliderEvents\n> {\n  static get remoteProperties() {\n    return {\n      value: { type: Number },\n      min: { type: Number },\n      max: { type: Number },\n      step: { type: Number },\n      disabled: { type: Boolean },\n    };\n  }\n  static get remoteEvents() {\n    return [\"change\"] as const;\n  }\n}\n\n/** Button \u2192 host renders RBLabelButton. */\nexport class RbButtonElement extends RemoteElement<\n  RbButtonProps,\n  RbNoMethods,\n  RbNoSlots,\n  RbPressEvents\n> {\n  static get remoteProperties() {\n    return {\n      label: { type: String },\n      variant: { type: String },\n      size: { type: String },\n      disabled: { type: Boolean },\n    };\n  }\n  static get remoteEvents() {\n    return [\"press\"] as const;\n  }\n}\n\n/** Icon button \u2192 host renders RBIconButton with an icon resolved from RBIcons. */\nexport class RbIconButtonElement extends RemoteElement<\n  RbIconButtonProps,\n  RbNoMethods,\n  RbNoSlots,\n  RbPressEvents\n> {\n  static get remoteProperties() {\n    return {\n      icon: { type: String },\n      variant: { type: String },\n      size: { type: String },\n      disabled: { type: Boolean },\n    };\n  }\n  static get remoteEvents() {\n    return [\"press\"] as const;\n  }\n}\n\n/** Plain text \u2014 renders its children as text on the host. */\nexport class RbTextElement extends RemoteElement<\n  RbTextProps,\n  RbNoMethods,\n  RbNoSlots,\n  RbNoEvents\n> {\n  static get remoteProperties() {\n    return {};\n  }\n}\n\n/** Text input \u2192 host renders RBTextInput. */\nexport class RbTextInputElement extends RemoteElement<\n  RbTextInputProps,\n  RbNoMethods,\n  RbNoSlots,\n  RbTextInputEvents\n> {\n  static get remoteProperties() {\n    return {\n      value: { type: String },\n      placeholder: { type: String },\n      disabled: { type: Boolean },\n    };\n  }\n  static get remoteEvents() {\n    return [\"input\"] as const;\n  }\n}\n\n/** Switch \u2192 host renders RBSwitch. */\nexport class RbSwitchElement extends RemoteElement<\n  RbSwitchProps,\n  RbNoMethods,\n  RbNoSlots,\n  RbSwitchEvents\n> {\n  static get remoteProperties() {\n    return {\n      checked: { type: Boolean },\n      disabled: { type: Boolean },\n    };\n  }\n  static get remoteEvents() {\n    return [\"change\"] as const;\n  }\n}\n\n/** Select \u2192 host renders RBSelectBox. `options` is `[{value,label}]`. */\nexport class RbSelectElement extends RemoteElement<\n  RbSelectProps,\n  RbNoMethods,\n  RbNoSlots,\n  RbSelectEvents\n> {\n  static get remoteProperties() {\n    return {\n      value: { type: String },\n      options: { type: Array },\n      placeholder: { type: String },\n      disabled: { type: Boolean },\n    };\n  }\n  static get remoteEvents() {\n    return [\"change\"] as const;\n  }\n}\n\n/** Custom element tag names in the contract. */\nexport const RB_ELEMENT_NAMES = [\n  \"rb-slider\",\n  \"rb-button\",\n  \"rb-icon-button\",\n  \"rb-text\",\n  \"rb-text-input\",\n  \"rb-switch\",\n  \"rb-select\",\n] as const;\n\nexport type RbElementName = (typeof RB_ELEMENT_NAMES)[number];\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"rb-slider\": RbSliderElement;\n    \"rb-button\": RbButtonElement;\n    \"rb-icon-button\": RbIconButtonElement;\n    \"rb-text\": RbTextElement;\n    \"rb-text-input\": RbTextInputElement;\n    \"rb-switch\": RbSwitchElement;\n    \"rb-select\": RbSelectElement;\n  }\n}\n\nlet defined = false;\n\n/**\n * Registers the rb-* custom elements. Safe to call multiple times; only the\n * first call defines anything (subsequent calls are a no-op).\n */\nexport function defineElements(): void {\n  if (defined || typeof customElements === \"undefined\") return;\n\n  defined = true;\n\n  customElements.define(\"rb-slider\", RbSliderElement);\n  customElements.define(\"rb-button\", RbButtonElement);\n  customElements.define(\"rb-icon-button\", RbIconButtonElement);\n  customElements.define(\"rb-text\", RbTextElement);\n  customElements.define(\"rb-text-input\", RbTextInputElement);\n  customElements.define(\"rb-switch\", RbSwitchElement);\n  customElements.define(\"rb-select\", RbSelectElement);\n}\n"],
+  "mappings": "AASA,SAAS,qBAAqB;AA2EvB,MAAM,wBAAwB,cAKnC;AAAA,EACA,WAAW,mBAAmB;AAC5B,WAAO;AAAA,MACL,OAAO,EAAE,MAAM,OAAO;AAAA,MACtB,KAAK,EAAE,MAAM,OAAO;AAAA,MACpB,KAAK,EAAE,MAAM,OAAO;AAAA,MACpB,MAAM,EAAE,MAAM,OAAO;AAAA,MACrB,UAAU,EAAE,MAAM,QAAQ;AAAA,IAC5B;AAAA,EACF;AAAA,EACA,WAAW,eAAe;AACxB,WAAO,CAAC,QAAQ;AAAA,EAClB;AACF;AAGO,MAAM,wBAAwB,cAKnC;AAAA,EACA,WAAW,mBAAmB;AAC5B,WAAO;AAAA,MACL,OAAO,EAAE,MAAM,OAAO;AAAA,MACtB,SAAS,EAAE,MAAM,OAAO;AAAA,MACxB,MAAM,EAAE,MAAM,OAAO;AAAA,MACrB,UAAU,EAAE,MAAM,QAAQ;AAAA,IAC5B;AAAA,EACF;AAAA,EACA,WAAW,eAAe;AACxB,WAAO,CAAC,OAAO;AAAA,EACjB;AACF;AAGO,MAAM,4BAA4B,cAKvC;AAAA,EACA,WAAW,mBAAmB;AAC5B,WAAO;AAAA,MACL,MAAM,EAAE,MAAM,OAAO;AAAA,MACrB,SAAS,EAAE,MAAM,OAAO;AAAA,MACxB,MAAM,EAAE,MAAM,OAAO;AAAA,MACrB,UAAU,EAAE,MAAM,QAAQ;AAAA,IAC5B;AAAA,EACF;AAAA,EACA,WAAW,eAAe;AACxB,WAAO,CAAC,OAAO;AAAA,EACjB;AACF;AAGO,MAAM,sBAAsB,cAKjC;AAAA,EACA,WAAW,mBAAmB;AAC5B,WAAO,CAAC;AAAA,EACV;AACF;AAGO,MAAM,2BAA2B,cAKtC;AAAA,EACA,WAAW,mBAAmB;AAC5B,WAAO;AAAA,MACL,OAAO,EAAE,MAAM,OAAO;AAAA,MACtB,aAAa,EAAE,MAAM,OAAO;AAAA,MAC5B,UAAU,EAAE,MAAM,QAAQ;AAAA,IAC5B;AAAA,EACF;AAAA,EACA,WAAW,eAAe;AACxB,WAAO,CAAC,OAAO;AAAA,EACjB;AACF;AAGO,MAAM,wBAAwB,cAKnC;AAAA,EACA,WAAW,mBAAmB;AAC5B,WAAO;AAAA,MACL,SAAS,EAAE,MAAM,QAAQ;AAAA,MACzB,UAAU,EAAE,MAAM,QAAQ;AAAA,IAC5B;AAAA,EACF;AAAA,EACA,WAAW,eAAe;AACxB,WAAO,CAAC,QAAQ;AAAA,EAClB;AACF;AAGO,MAAM,wBAAwB,cAKnC;AAAA,EACA,WAAW,mBAAmB;AAC5B,WAAO;AAAA,MACL,OAAO,EAAE,MAAM,OAAO;AAAA,MACtB,SAAS,EAAE,MAAM,MAAM;AAAA,MACvB,aAAa,EAAE,MAAM,OAAO;AAAA,MAC5B,UAAU,EAAE,MAAM,QAAQ;AAAA,IAC5B;AAAA,EACF;AAAA,EACA,WAAW,eAAe;AACxB,WAAO,CAAC,QAAQ;AAAA,EAClB;AACF;AAGO,MAAM,mBAAmB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAgBA,IAAI,UAAU;AAMP,SAAS,iBAAuB;AACrC,MAAI,WAAW,OAAO,mBAAmB,YAAa;AAEtD,YAAU;AAEV,iBAAe,OAAO,aAAa,eAAe;AAClD,iBAAe,OAAO,aAAa,eAAe;AAClD,iBAAe,OAAO,kBAAkB,mBAAmB;AAC3D,iBAAe,OAAO,WAAW,aAAa;AAC9C,iBAAe,OAAO,iBAAiB,kBAAkB;AACzD,iBAAe,OAAO,aAAa,eAAe;AAClD,iBAAe,OAAO,aAAa,eAAe;AACpD;",
+  "names": []
+}