@open-flow/ui 0.2.0

package/LICENSE

@@ -0,0 +1,94 @@
+Elastic License 2.0 (ELv2)
+
+Copyright © 2026 Ecorona LLC
+
+**Acceptance**
+
+By using the software, you agree to all of the terms and conditions below.
+
+**Copyright License**
+
+The licensor grants you a non-exclusive, royalty-free, worldwide,
+non-sublicensable, non-transferable license to use, copy, distribute, make
+available, and prepare derivative works of the software, in each case subject
+to the limitations and conditions below.
+
+**Limitations**
+
+You may not provide the software to third parties as a hosted or managed
+service, where the service provides users with access to any substantial set
+of the features or functionality of the software.
+
+You may not move, change, disable, or circumvent the license key functionality
+in the software, and you may not remove or obscure any functionality in the
+software that is protected by the license key.
+
+You may not alter, remove, or obscure any licensing, copyright, or other
+notices of the licensor in the software. Any use of the licensor's trademarks
+is subject to applicable law.
+
+**Patents**
+
+The licensor grants you a license, under any patent claims the licensor can
+license, or becomes able to license, to make, have made, use, sell, offer for
+sale, import and have imported the software, in each case subject to the
+limitations and conditions in this license. This license does not cover any
+patent claims that you cause to be infringed by modifications or additions to
+the software. If you or your company make any written claim that the software
+infringes or contributes to infringement of any patent, your patent license
+for the software granted under these terms ends immediately. If your company
+makes such a claim, your patent license ends immediately for work on behalf of
+your company.
+
+**Notices**
+
+You must ensure that anyone who gets a copy of any part of the software from
+you also gets a copy of these terms.
+
+If you modify the software, you must include in any modified copies of the
+software prominent notices stating that you have modified the software.
+
+**No Other Rights**
+
+These terms do not imply any licenses other than those expressly granted in
+these terms.
+
+**Termination**
+
+If you use the software in violation of these terms, such use is not licensed,
+and your licenses will automatically terminate. If the licensor provides you
+with a notice of your violation, and you cease all violation of this license
+no later than 30 days after you receive that notice, your licenses will be
+reinstated retroactively. However, if you violate these terms after such
+reinstatement, any additional violation of these terms will cause your
+licenses to terminate automatically and permanently.
+
+**No Liability**
+
+*As far as the law allows, the software comes as is, without any warranty or
+condition, and the licensor will not be liable to you for any damages arising
+out of these terms or the use or nature of the software, under any kind of
+legal claim.*
+
+**Definitions**
+
+The **licensor** is the entity offering these terms, and the **software** is
+the software the licensor makes available under these terms, including any
+portion of it.
+
+**you** refers to the individual or entity agreeing to these terms.
+
+**your company** is any legal entity, sole proprietorship, or other kind of
+organization that you work for, plus all organizations that have control over,
+are under the control of, or are under common control with that organization.
+**control** means ownership of substantially all the assets of an entity, or
+the power to direct its management and policies by vote, contract, or
+otherwise. Control can be direct or indirect.
+
+**your licenses** are all the licenses granted to you for the software under
+these terms.
+
+**use** means anything you do with the software requiring one of your
+licenses.
+
+**trademark** means trademarks, service marks, and similar rights.

package/README.md

@@ -0,0 +1,40 @@
+# open-flow
+
+Un taller vivo sobre la app Next.js que ya tienes — componentes reales, tokens
+reales, recorridos reales. Nada es una copia: el visor importa los componentes
+de tu propia app, así que la vista previa y el componente publicado no pueden
+divergir, porque son el mismo código.
+
+```
+pnpm add -D @open-flow/ui
+```
+
+Público y sin configuración: cualquier repositorio lo instala sin tokens ni
+registros adicionales.
+
+## Las dos mitades
+
+- **`@open-flow/ui`** (este repositorio, código abierto): el visor completo —
+  Elementos, Componentes, Flujos con su tablero de espejos, Superficies, el
+  overlay ⌥P para señalar sobre páginas reales, y la API de demos.
+- **El motor de escaneo** (privado): el analizador que lee tu repositorio y
+  produce el mapa que este visor pinta. Se distribuye por separado, con
+  autorización de Ecorona LLC.
+
+El visor funciona sobre los artefactos que el motor genera (`.workbench/`);
+sin el motor, puedes montar el visor con artefactos ya generados.
+
+## Desarrollo
+
+```
+pnpm install
+pnpm build        # tsc + minificado
+pnpm test         # vitest
+pnpm typecheck
+```
+
+## Licencia
+
+Elastic License 2.0 — el código es visible y modificable; no puede ofrecerse
+como servicio gestionado a terceros ni eludirse la separación con el motor.
+Ver [LICENSE](./LICENSE). _(Texto pendiente de revisión legal por Ecorona LLC.)_

package/dist/app.d.ts

@@ -0,0 +1,10 @@
+import type { NewTicketInput, TicketSummary } from "./pin";
+import type { RegistryEntry } from "./registry";
+import type { CreateResult } from "./ticket-drawer";
+export interface WorkbenchClientProps {
+    manifest: unknown;
+    registry: RegistryEntry[];
+    onCreateTicket: (input: NewTicketInput) => Promise<CreateResult>;
+    onLoadTickets?: () => Promise<TicketSummary[]>;
+}
+export declare function WorkbenchClient(props: WorkbenchClientProps): import("react").JSX.Element;

package/dist/app.js

@@ -0,0 +1 @@
+"use client";import{jsx as r}from"react/jsx-runtime";import{Suspense as p,useEffect as d,useMemo as l,useState as h}from"react";import{useSearchParams as g}from"next/navigation";import{FrameView as v}from"./frame-view";import{parseManifest as w}from"./parse-manifest";import{WorkbenchApp as b}from"./workbench-app";function V(n){return r(p,{fallback:null,children:r(x,{...n})})}function k(n){const e=o=>n.get(o)??void 0;return{tab:e("tab"),component:e("component"),flow:e("flow"),surface:e("surface"),vp:e("vp"),zoom:e("zoom"),theme:e("theme"),chrome:e("chrome")}}function x({manifest:n,registry:e,onCreateTicket:o,onLoadTickets:i}){const t=g(),[u,c]=h([]),m=l(()=>w(n),[n]);d(()=>{if(!i)return;let s=!0;return i().then(a=>{s&&c(a)}),()=>{s=!1}},[i]);const f=t.get("route")??void 0;return t.get("view")==="frame"||f?r(v,{manifest:m,registry:e,componentId:t.get("component")??void 0,route:f,viewport:t.get("viewport")??void 0,theme:t.get("theme")??void 0,scenario:t.get("scenario")??void 0}):r(b,{manifest:m,registry:e,tickets:u,view:k(t),onCreateTicket:o})}export{V as WorkbenchClient};

package/dist/component-preview.d.ts

@@ -0,0 +1,25 @@
+import { type ReactNode } from "react";
+import type { ComponentEntry, Renderability } from "./manifest.types";
+import { type RegistryEntry } from "./registry";
+export declare function VerdictBadge({ verdict }: {
+    verdict: Renderability;
+}): import("react").JSX.Element;
+export declare function ComponentPreview({ entry, registry, }: {
+    entry: ComponentEntry;
+    registry: RegistryEntry | undefined;
+}): import("react").JSX.Element;
+export declare function ScenarioPreview({ entry, registry, scenario, }: {
+    entry: ComponentEntry;
+    registry: RegistryEntry | undefined;
+    scenario: string;
+}): import("react").JSX.Element;
+export declare function VariantScenarios({ entry, registry, render, }: {
+    entry: ComponentEntry;
+    registry: RegistryEntry | undefined;
+    render: (name: string, description: string | undefined, node: ReactNode) => ReactNode;
+}): import("react").JSX.Element | null;
+export declare function ComponentScenarios({ entry, registry, render, }: {
+    entry: ComponentEntry;
+    registry: RegistryEntry | undefined;
+    render: (name: string, description: string | undefined, node: ReactNode) => ReactNode;
+}): import("react").JSX.Element | null;

package/dist/component-preview.js

@@ -0,0 +1 @@
+"use client";import{jsx as n,jsxs as l,Fragment as c}from"react/jsx-runtime";import{Fragment as b,Suspense as s}from"react";import{cx as g}from"./cx";import{PreviewErrorBoundary as m}from"./error-boundary";import{sampleProps as v,useComponentModule as u}from"./registry";const h={demo:{label:"demo",hint:"Escrita a mano, junto al componente.",tone:"bg-emerald-100 text-emerald-900 dark:bg-emerald-950 dark:text-emerald-200"},auto:{label:"autom\xE1tico",hint:"No necesita props: esto es el componente tal cual.",tone:"bg-zinc-100 text-zinc-700 dark:bg-zinc-800 dark:text-zinc-300"},synthesized:{label:"props inventados",hint:"El taller rellen\xF3 los props obligatorios. Sirve para ver la forma, no para juzgar el contenido.",tone:"bg-amber-100 text-amber-900 dark:bg-amber-950 dark:text-amber-200"},"needs-demo":{label:"necesita demo",hint:"Sus props obligatorios no se pueden inventar \u2014 una funci\xF3n, un objeto o un tipo importado.",tone:"bg-zinc-200 text-zinc-700 dark:bg-zinc-800 dark:text-zinc-300"},server:{label:"componente de servidor",hint:"No existe en el grafo del cliente. M\xEDralo en un flujo, que renderiza la p\xE1gina real.",tone:"bg-sky-100 text-sky-900 dark:bg-sky-950 dark:text-sky-200"}};function C({verdict:e}){const r=h[e];return n("span",{title:r.hint,className:g("rounded px-1.5 py-0.5 text-[10px] font-medium",r.tone),children:r.label})}function f({entry:e}){const r=h[e.verdict],a=e.props.filter(t=>t.required&&!t.sample);return l("div",{className:"rounded-lg border border-dashed border-zinc-300 p-6 text-sm dark:border-zinc-700",children:[n("p",{className:"font-medium text-zinc-700 dark:text-zinc-200",children:r.hint}),a.length>0&&l(c,{children:[n("p",{className:"mt-3 text-[11px] uppercase tracking-wider text-zinc-400",children:"Props que no se pudieron inventar"}),n("ul",{className:"mt-1 space-y-0.5 font-mono text-[11px] text-zinc-600 dark:text-zinc-400",children:a.map(t=>l("li",{children:[t.name,": ",t.typeText||"?"]},t.name))})]}),e.verdict==="needs-demo"&&l("p",{className:"mt-3 text-[11px] text-zinc-500 dark:text-zinc-400",children:["Crea ",n("code",{className:"font-mono",children:e.file.replace(/\.tsx$/,".demo.tsx")})," y el taller lo usar\xE1 en lugar de esto."]})]})}function p({entry:e,registry:r,overrides:a}){const t=u(r);if(t.error)return n("p",{className:"rounded-lg border border-red-300 bg-red-50 p-4 text-sm text-red-800 dark:border-red-800 dark:bg-red-950 dark:text-red-200",children:t.error});if(t.demo)return n(c,{children:t.demo.render()});const{Component:o}=t;if(!o)return n(f,{entry:e});const{props:d,children:i}=v(e.props);return n(o,{...d,...a,children:i})}function P({entry:e,registry:r}){return!r||e.verdict==="server"||e.verdict==="needs-demo"?n(f,{entry:e}):n(m,{label:e.file,component:e.name,children:n(s,{fallback:n(x,{}),children:n(p,{entry:e,registry:r})})})}function E({entry:e,registry:r,scenario:a}){return!r||e.verdict==="server"||e.verdict==="needs-demo"?n(f,{entry:e}):n(m,{label:`${e.file} \xB7 ${a}`,component:e.name,children:n(s,{fallback:n(x,{}),children:n(k,{entry:e,registry:r,scenario:a})})})}function k({entry:e,registry:r,scenario:a}){const o=u(r).demo?.scenarios?.find(i=>i.name===a);if(o)return n(c,{children:o.render()});const d=e.variants.find(i=>i.name===a);return d?n("div",{className:"flex flex-wrap items-start gap-4",children:d.values.map(i=>l("figure",{className:"flex flex-col items-start gap-1",children:[n(p,{entry:e,registry:r,overrides:{[d.name]:i}}),l("figcaption",{className:"font-mono text-[10px] text-zinc-500 dark:text-zinc-400",children:[i,i===d.default&&" \xB7"]})]},i))}):n(p,{entry:e,registry:r})}function q({entry:e,registry:r,render:a}){return!r||r.demo||e.variants.length===0||e.verdict==="server"||e.verdict==="needs-demo"?null:n(c,{children:e.variants.map(t=>n(b,{children:a(t.name,t.default?`${t.values.length} valores \xB7 por defecto ${t.default}`:`${t.values.length} valores`,n("div",{className:"flex flex-wrap items-start gap-4",children:t.values.map(o=>l("figure",{className:"flex flex-col items-start gap-1",children:[n(m,{label:e.file,component:e.name,children:n(s,{fallback:n(x,{}),children:n(p,{entry:e,registry:r,overrides:{[t.name]:o}})})}),l("figcaption",{className:"font-mono text-[10px] text-zinc-500 dark:text-zinc-400",children:[o,o===t.default&&" \xB7"]})]},o))}))},t.name))})}function F({entry:e,registry:r,render:a}){return r?.demo?n(s,{fallback:null,children:n(z,{entry:e,registry:r,render:a})}):null}function z({entry:e,registry:r,render:a}){const o=u(r).demo?.scenarios??[];return o.length===0?null:n(c,{children:o.map(d=>n(m,{label:`${e.file} \xB7 ${d.name}`,component:e.name,children:a(d.name,d.description,d.render())},d.name))})}function x(){return n("div",{className:"h-24 animate-pulse rounded-lg bg-zinc-100 dark:bg-zinc-800","aria-hidden":!0})}export{P as ComponentPreview,F as ComponentScenarios,E as ScenarioPreview,q as VariantScenarios,C as VerdictBadge};

package/dist/config-context.d.ts

@@ -0,0 +1,8 @@
+import { type ReactNode } from "react";
+import type { Manifest, ViewerConfig } from "./manifest.types";
+export declare function ManifestProvider({ manifest, children, }: {
+    manifest: Manifest;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function useManifest(): Manifest;
+export declare function useViewerConfig(): ViewerConfig;

package/dist/config-context.js

@@ -0,0 +1 @@
+"use client";import{jsx as r}from"react/jsx-runtime";import{createContext as o,useContext as i}from"react";const t=o(null);function a({manifest:e,children:n}){return r(t.Provider,{value:e,children:n})}function s(){const e=i(t);if(!e)throw new Error("Falta <ManifestProvider>: el visor necesita un manifiesto.");return e}function c(){return s().config}export{a as ManifestProvider,s as useManifest,c as useViewerConfig};

package/dist/cx.d.ts

@@ -0,0 +1 @@
+export declare function cx(...parts: Array<string | false | null | undefined>): string;

package/dist/cx.js

@@ -0,0 +1 @@
+function o(...n){return n.filter(Boolean).join(" ")}export{o as cx};

package/dist/demo.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from "react";
+export interface Scenario {
+    name: string;
+    description?: string;
+    render: () => ReactNode;
+}
+export interface Demo {
+    title?: string;
+    description?: string;
+    render: () => ReactNode;
+    scenarios?: Scenario[];
+    preferDark?: boolean;
+}
+export interface DemoModule {
+    default: Demo;
+}
+export declare function defineDemo(demo: Demo): Demo;
+export declare function scenario(name: string, render: () => ReactNode, description?: string): Scenario;

package/dist/demo.js

@@ -0,0 +1 @@
+function o(e){return e}function t(e,n,r){return{name:e,render:n,description:r}}export{o as defineDemo,t as scenario};

package/dist/dev-actions.d.ts

@@ -0,0 +1,9 @@
+import type { NewTicketInput, TicketSummary } from "./pin";
+export declare function createTicket(input: NewTicketInput): Promise<{
+    ok: boolean;
+    id?: string;
+    file?: string;
+    prompt?: string;
+    error?: string;
+}>;
+export declare function loadTickets(): Promise<TicketSummary[]>;

package/dist/dev-actions.js

@@ -0,0 +1 @@
+"use server";import{readTickets as r,writeTicket as t}from"./server";async function i(e){return t(e)}async function n(){return r()}export{i as createTicket,n as loadTickets};

package/dist/dev-actions.noop.d.ts

@@ -0,0 +1,3 @@
+import type { NewTicketInput, TicketSummary } from "./pin";
+export declare function createTicket(_input: NewTicketInput): Promise<never>;
+export declare function loadTickets(): Promise<TicketSummary[]>;

package/dist/dev-actions.noop.js

@@ -0,0 +1 @@
+const e="El taller s\xF3lo escribe tickets en desarrollo.";async function r(t){throw new Error(e)}async function n(){return[]}export{r as createTicket,n as loadTickets};

package/dist/dom-realm.d.ts

@@ -0,0 +1,4 @@
+export declare function isElement(value: unknown): value is Element;
+export declare function readProp(value: unknown, key: string): unknown;
+export declare function setStyle(element: Element, property: string, value: string): void;
+export declare function readStyle(element: Element, property: string): string;

package/dist/dom-realm.js

@@ -0,0 +1 @@
+function y(t){return typeof t!="object"||t===null?!1:Reflect.get(t,"nodeType")===1}function o(t,e){if(!(t===null||typeof t!="object"&&typeof t!="function"))try{return Reflect.get(t,e)}catch{return}}function c(t){const e=o(t,"style");return!e||typeof e!="object"||!("setProperty"in e)?null:e}function i(t,e,n){const r=c(t);if(!r)return;const f=o(r,"setProperty");typeof f=="function"&&Reflect.apply(f,r,[e,n])}function u(t,e){const n=c(t);return n===null?"":String(o(n,e)??"")}export{y as isElement,o as readProp,u as readStyle,i as setStyle};

package/dist/edit-mode.d.ts

@@ -0,0 +1,7 @@
+import { type ComponentIndex } from "./hover-inspect";
+import { type PickTarget } from "./pick-highlight";
+import type { Pin } from "./pin";
+export declare function useInspect(enabled: boolean, getRoot: () => HTMLElement | null, index: ComponentIndex, callbacks: {
+    onPin: (pin: Pick<Pin, "element" | "node">) => void;
+    onHover: (target: PickTarget | null) => void;
+}, resetKey?: string | number): void;

package/dist/edit-mode.js

@@ -0,0 +1 @@
+"use client";import{useEffect as L,useRef as P}from"react";import{isElement as C,readProp as T}from"./dom-realm";import{lightSiblings as H,resolveNode as A}from"./hover-inspect";import{mapRect as O}from"./pick-highlight";import{BOX_ATTR as S}from"./pick-box";import{reportRuntimeError as X}from"./runtime-errors";const $=80;function j(n,i){return i||n.closest(`[${S}]`)!==null}function b(n){const i=typeof n.className=="string"?n.className:"",a=[];let r=n;for(let m=0;m<4&&r&&r.tagName!=="BODY";m++){const c=typeof r.className=="string"?r.className.split(/\s+/)[0]??"":"";a.unshift(c?`${r.tagName.toLowerCase()}.${c}`:r.tagName.toLowerCase()),r=r.parentElement}return{tag:n.tagName.toLowerCase(),classes:i.trim().split(/\s+/).slice(0,8).join(" "),text:(n.textContent??"").trim().replace(/\s+/g," ").slice(0,$),path:a.join(" > ")}}function k(n){return n.component?{component:n.component,file:n.file,surface:n.surface}:null}function Y(n,i,a,r,m=0){const c=P(r);L(()=>{c.current=r},[r]);const f=P(a);L(()=>{f.current=a},[a]),L(()=>{if(!n)return;const v=i();if(!v)return;let g=null,h=null;const p=()=>{g?.(),g=null,h=null},D=(e,o)=>{const t=e.target;if(!C(t)||!j(t,o))return;e.preventDefault(),e.stopPropagation();const s=A(t,f.current);c.current.onPin({element:b(t),node:k(s)})},R=(e,o)=>{const t=e.target;if(!C(t))return;if(!j(t,o!==null)){c.current.onHover(null),p();return}const s=A(t,f.current);c.current.onHover({rect:O(t,o),node:s}),s.component!==h&&(p(),s.component&&(h=s.component,g=H(t.ownerDocument,s.component,f.current)))},y=()=>{c.current.onHover(null),p()},l=[],N=(e,o,t)=>{const s=u=>R(u,t),w=u=>D(u,t!==null);if(e.addEventListener("click",w,!0),e.addEventListener("mouseover",s,!0),e.addEventListener("mouseleave",y,!0),l.push(()=>{e.removeEventListener("click",w,!0),e.removeEventListener("mouseover",s,!0),e.removeEventListener("mouseleave",y,!0)}),o!==null){const u=x=>{const B=String(T(x,"message")??"Promesa rechazada sin capturar");X({message:B,route:o,component:null,file:null})},E=T(e,"defaultView"),d=(E&&typeof E.addEventListener=="function"?E:null)??e;d.addEventListener("error",u,!0),d.addEventListener("unhandledrejection",u,!0),l.push(()=>{d.removeEventListener("error",u,!0),d.removeEventListener("unhandledrejection",u,!0)})}};N(v,null,null);for(const e of Array.from(v.querySelectorAll("iframe"))){const o=()=>{try{const t=e.contentDocument;if(!t)return;N(t,e.getAttribute("src"),e),t.body?.style.setProperty("cursor","crosshair"),l.push(()=>t.body?.style.removeProperty("cursor"))}catch{}};o(),e.addEventListener("load",o),l.push(()=>e.removeEventListener("load",o))}return()=>{p();for(const e of l)e()}},[n,i,m])}export{Y as useInspect};

package/dist/edit-session.d.ts

@@ -0,0 +1,23 @@
+import { type PickTarget } from "./pick-highlight";
+import type { Pin, RuntimeError } from "./pin";
+export interface EditSession {
+    editing: boolean;
+    toggleEditing: () => void;
+    pins: Pin[];
+    addPin: (pin: Pick<Pin, "element" | "node">) => void;
+    updatePin: (index: number, note: string) => void;
+    removePin: (index: number) => void;
+    clearPins: () => void;
+    hovering: PickTarget | null;
+    setHovering: (target: PickTarget | null) => void;
+    errors: RuntimeError[];
+    drawerOpen: boolean;
+    openDrawer: () => void;
+    closeDrawer: () => void;
+}
+export declare function useEditSession(options?: {
+    bareKeys?: boolean;
+}): EditSession;
+export declare function EditSessionOverlay({ session }: {
+    session: EditSession;
+}): import("react").JSX.Element | null;

package/dist/edit-session.js

@@ -0,0 +1 @@
+"use client";import{jsx as S}from"react/jsx-runtime";import{useCallback as r,useEffect as g,useState as s}from"react";import{isElement as h,readProp as p}from"./dom-realm";import{PickHighlight as x}from"./pick-highlight";import{subscribeRuntimeErrors as T}from"./runtime-errors";function O(o){const u=o?.bareKeys??!1,[E,d]=s(!1),[m,a]=s([]),[y,f]=s(null),[w,l]=s(!1),[k,P]=s([]);g(()=>T(P),[]);const b=r(t=>{a(e=>[...e,{...t,note:""}]),l(!0)},[]),c=r(()=>{d(t=>(t&&f(null),!t))},[]);return g(()=>{const t=e=>{const n=e.target;h(n)&&(p(n,"isContentEditable")===!0||["INPUT","TEXTAREA","SELECT"].includes(String(p(n,"tagName"))))||(u&&(e.key==="e"||e.key==="E")&&(e.preventDefault(),c()),e.key==="Escape"&&(d(!1),f(null)),u&&(e.key==="n"||e.key==="N")&&(e.preventDefault(),l(!0)))};return window.addEventListener("keydown",t),()=>window.removeEventListener("keydown",t)},[c,u]),{editing:E,toggleEditing:c,pins:m,addPin:b,updatePin:r((t,e)=>{a(n=>n.map((i,D)=>D===t?{...i,note:e}:i))},[]),removePin:r(t=>{a(e=>e.filter((n,i)=>i!==t))},[]),clearPins:r(()=>a([]),[]),hovering:y,setHovering:f,errors:k,drawerOpen:w,openDrawer:r(()=>l(!0),[]),closeDrawer:r(()=>l(!1),[])}}function j({session:o}){return o.editing?S(x,{target:o.hovering}):null}export{j as EditSessionOverlay,O as useEditSession};

package/dist/error-boundary.d.ts

@@ -0,0 +1,17 @@
+import { Component, type ErrorInfo, type ReactNode } from "react";
+interface Props {
+    label: string;
+    component?: string;
+    children: ReactNode;
+}
+interface State {
+    error: Error | null;
+}
+export declare class PreviewErrorBoundary extends Component<Props, State> {
+    state: State;
+    static getDerivedStateFromError(error: Error): State;
+    componentDidCatch(error: Error, info: ErrorInfo): void;
+    componentDidUpdate(previous: Props): void;
+    render(): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;
+}
+export {};

package/dist/error-boundary.js

@@ -0,0 +1 @@
+"use client";import{jsx as r,jsxs as o}from"react/jsx-runtime";import{Component as s}from"react";import{reportRuntimeError as a}from"./runtime-errors";class i extends s{state={error:null};static getDerivedStateFromError(e){return{error:e}}componentDidCatch(e,t){console.error(`[workbench] el componente lanz\xF3: ${this.props.label}`,e,t),a({message:e.message,component:this.props.component??null,file:this.props.label,route:null})}componentDidUpdate(e){e.label!==this.props.label&&this.state.error&&this.setState({error:null})}render(){const{error:e}=this.state;return e?o("div",{className:"m-4 rounded-lg border border-red-300 bg-red-50 p-4 text-sm dark:border-red-800 dark:bg-red-950",children:[r("p",{className:"font-semibold text-red-800 dark:text-red-200",children:"Este componente lanz\xF3 un error"}),r("p",{className:"mt-1 font-mono text-[11px] text-red-700 dark:text-red-300",children:this.props.label}),r("pre",{className:"mt-3 overflow-x-auto whitespace-pre-wrap font-mono text-[11px] text-red-900 dark:text-red-200",children:e.message}),r("p",{className:"mt-3 text-[11px] text-red-700 dark:text-red-300",children:"Si el taller invent\xF3 los props, es probable que falte una demo \u2014 el panel lo dice. Arregla el archivo y vuelve a seleccionarlo; no hace falta recargar."})]}):this.props.children}}export{i as PreviewErrorBoundary};

package/dist/frame-view.d.ts

@@ -0,0 +1,11 @@
+import type { Manifest } from "./manifest.types";
+import { type RegistryEntry } from "./registry";
+export declare function FrameView({ manifest, registry, componentId, route, viewport: initialViewport, theme: initialTheme, scenario, }: {
+    manifest: Manifest;
+    registry: RegistryEntry[];
+    componentId?: string;
+    route?: string;
+    viewport?: string;
+    theme?: string;
+    scenario?: string;
+}): import("react").JSX.Element;

package/dist/frame-view.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import{useCallback as M,useMemo as j,useRef as H,useState as p}from"react";import{ComponentPreview as I,ScenarioPreview as O}from"./component-preview";import{ManifestProvider as V}from"./config-context";import{useInspect as _}from"./edit-mode";import{EditSessionOverlay as A,useEditSession as B}from"./edit-session";import{InlineSurface as x,RouteFrame as T}from"./frame";import{buildComponentIndex as U}from"./hover-inspect";import{viewportById as Z,workbenchUrl as q}from"./manifest";import{PickBox as K}from"./pick-box";import{indexRegistry as k}from"./registry";import{ScreenFrame as y,useScale as D,FRAME_CHROME as G}from"./screen-frame";import{AUTO as N,ScreenToolbar as J}from"./screen-toolbar";function le({manifest:r,registry:f,componentId:h,route:n,viewport:S,theme:c,scenario:s}){const g=r.config,[d,E]=p(S??N),[m,R]=p("fit"),[u,P]=p(c==="dark"||c==="split"?c:"light"),i=B({bareKeys:!0}),w=H(null),$=j(()=>U(r.components),[r.components]),o=r.components.find(F=>F.id===h),t=d===N?null:Z(g,d),{ref:z,scale:v}=D(m,t?.width??0,G),l=u==="dark"?"dark":"light";_(i.editing,M(()=>w.current,[]),$,{onPin:i.addPin,onHover:i.setHovering},`${h??n}:${d}:${m}:${l}`);const b=o?s?e(O,{entry:o,registry:k(f).get(o.id),scenario:s}):e(I,{entry:o,registry:k(f).get(o.id)}):a("p",{className:"p-6 text-sm text-zinc-500",children:["Nada que mostrar. Falta ",e("code",{children:"?component="})," o ",e("code",{children:"?route="}),"."]}),C=n?t?e(y,{viewport:t,scale:v,label:n,editing:i.editing,children:e(T,{src:n,title:n,width:t.width,height:t.height})}):e(K,{enabled:i.editing,className:"h-full",children:e("iframe",{src:n,title:n,className:"h-full w-full border-0"})}):t?e(y,{viewport:t,scale:v,label:o?.name,editing:i.editing,children:e(x,{theme:l,editing:!1,children:b})}):e(x,{theme:l,editing:i.editing,children:b});return a(V,{manifest:r,children:[e("div",{className:l==="dark"?"dark":void 0,children:a("div",{className:"flex h-screen flex-col bg-white dark:bg-zinc-900",children:[e(J,{viewport:d,onViewport:E,zoom:m,onZoom:R,theme:u,onTheme:P,zoomEnabled:t!==null,identity:n??(s?`${o?.name} \xB7 ${s}`:o?.name),backHref:q(g,""),editing:i.editing,onToggleEdit:i.toggleEditing,pinCount:i.pins.length}),e("div",{ref:z,className:"min-h-0 flex-1 overflow-auto",children:e("div",{ref:w,className:"h-full p-4",children:C})})]})}),e(A,{session:i})]})}export{le as FrameView};

package/dist/frame.d.ts

@@ -0,0 +1,29 @@
+import { type ReactNode } from "react";
+export declare function FrameShell({ label, meta, children, className, }: {
+    label?: ReactNode;
+    meta?: ReactNode;
+    children: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
+export declare function InlineSurface({ theme, children, padded, editing, }: {
+    theme: "light" | "dark";
+    children: ReactNode;
+    padded?: boolean;
+    editing?: boolean;
+}): import("react").JSX.Element;
+export declare function RouteFrame({ src, title, width, height, theme, frameRef, onLoad, }: {
+    src: string;
+    title: string;
+    width: number;
+    height: number;
+    theme?: "light" | "dark";
+    frameRef?: (frame: HTMLIFrameElement | null) => void;
+    onLoad?: (frame: HTMLIFrameElement) => void;
+}): import("react").JSX.Element;
+export declare function MirrorFrame({ srcdoc, title, width, height, theme, }: {
+    srcdoc: string;
+    title: string;
+    width: number;
+    height: number;
+    theme: "light" | "dark";
+}): import("react").JSX.Element;

package/dist/frame.js

@@ -0,0 +1 @@
+"use client";import{jsx as s,jsxs as x}from"react/jsx-runtime";import{useEffect as b,useRef as p}from"react";import{cx as f}from"./cx";import{isElement as g}from"./dom-realm";import{PickBox as k}from"./pick-box";function L({label:t,meta:n,children:o,className:c}){return x("div",{className:f("overflow-hidden rounded-lg border border-zinc-300 bg-white shadow-sm","dark:border-zinc-700 dark:bg-zinc-900",c),children:[(t||n)&&x("div",{className:"flex items-center justify-between gap-3 border-b border-zinc-200 bg-zinc-50 px-3 py-1.5 text-[11px] font-medium tracking-wide text-zinc-600 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-300",children:[s("span",{className:"truncate",children:t}),n&&s("span",{className:"truncate font-mono text-[10px] text-zinc-500 dark:text-zinc-400",children:n})]}),o]})}function y({theme:t,children:n,padded:o=!0,editing:c}){return s("div",{className:f(t==="dark"&&"dark"),children:s(k,{enabled:c,className:f("bg-background text-foreground",o&&"p-6"),children:n})})}function N({src:t,title:n,width:o,height:c,theme:i,frameRef:l,onLoad:a}){const d=p(null);return b(()=>{if(i===void 0)return;const e=d.current;if(!e)return;const r=()=>{try{e.contentDocument?.documentElement.classList.toggle("dark",i==="dark")}catch{}};r(),e.addEventListener("load",r);const u=[300,1200,2500].map(m=>setTimeout(r,m));return()=>{e.removeEventListener("load",r);for(const m of u)clearTimeout(m)}},[i,t]),s("iframe",{ref:e=>{d.current=e,l?.(e)},src:t,title:n,width:o,height:c,onLoad:e=>a?.(e.currentTarget),className:"border-0 bg-white",style:{width:o,height:c}})}function j({srcdoc:t,title:n,width:o,height:c,theme:i}){const l=p(null);return b(()=>{const a=l.current;if(!a)return;const d=r=>{const u=r.target;g(u)&&u.closest("a[href]")&&r.preventDefault()},e=()=>{try{const r=a.contentDocument;if(!r)return;r.documentElement.classList.toggle("dark",i==="dark"),r.addEventListener("click",d,!0)}catch{}};return e(),a.addEventListener("load",e),()=>{a.removeEventListener("load",e);try{a.contentDocument?.removeEventListener("click",d,!0)}catch{}}},[i,t]),s("iframe",{ref:l,srcDoc:t,title:n,sandbox:"allow-same-origin","data-workbench-mirror":"",tabIndex:-1,width:o,height:c,className:"border-0 bg-white",style:{width:o,height:c}})}export{L as FrameShell,y as InlineSurface,j as MirrorFrame,N as RouteFrame};

package/dist/hover-inspect.d.ts

@@ -0,0 +1,17 @@
+export interface IndexedComponent {
+    name: string;
+    file: string;
+    surface: string | null;
+}
+export interface ResolvedNode {
+    tag: string;
+    component: string | null;
+    file: string | null;
+    candidates: IndexedComponent[];
+    surface: string | null;
+}
+export type ComponentIndex = Map<string, IndexedComponent[]>;
+export declare function buildComponentIndex(components: readonly IndexedComponent[]): ComponentIndex;
+export declare function componentNameOf(element: Element, index: ComponentIndex, maxDepth?: number): string | null;
+export declare function resolveNode(element: Element, index: ComponentIndex): ResolvedNode;
+export declare function lightSiblings(root: Document | Element, component: string, index: ComponentIndex): () => void;

package/dist/hover-inspect.js

@@ -0,0 +1 @@
+"use client";import{isElement as g,readProp as i,readStyle as a,setStyle as u}from"./dom-realm";const h="__reactFiber$";function I(n){const e=new Map;for(const t of n){const o=e.get(t.name);o?o.push(t):e.set(t.name,[t])}return e}function y(n){for(const e of Object.keys(n))if(e.startsWith(h))return i(n,e);return null}function p(n){if(typeof n=="function"){const e=i(n,"displayName");if(typeof e=="string"&&e.length>0)return e;const t=i(n,"name");return typeof t=="string"&&t.length>0?t:null}if(typeof n=="object"&&n!==null){const e=i(n,"displayName");return typeof e=="string"&&e.length>0?e:p(i(n,"render")??i(n,"type"))}return null}function m(n,e,t=24){let o=y(n);for(let r=0;r<t&&o;r++){const f=p(i(o,"type"));if(f&&e.has(f))return f;o=i(o,"return")}return null}function N(n,e){const t=m(n,e),o=t?e.get(t)??[]:[],r=o.length===1?o[0]:void 0;return{tag:n.tagName.toLowerCase(),component:t,file:r?.file??null,candidates:o,surface:r?.surface??null}}const b="2px solid rgb(251 191 36)",c=600;function O(n,e,t){const o=[],r=n.querySelectorAll("*"),f=Math.min(r.length,c);for(let s=0;s<f;s++){const l=r[s];g(l)&&m(l,t,6)===e&&(o.push({element:l,outline:a(l,"outline"),offset:a(l,"outlineOffset")}),u(l,"outline",b),u(l,"outline-offset","1px"))}return r.length>c&&console.info(`[workbench] ${r.length} elementos en el documento; s\xF3lo se revisaron los primeros ${c} para resaltar ${e}.`),()=>{for(const{element:s,outline:l,offset:d}of o)u(s,"outline",l),u(s,"outline-offset",d)}}export{I as buildComponentIndex,m as componentNameOf,O as lightSiblings,N as resolveNode};

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { byGroup, flowById, frameUrl, groupLabel, surfaceForRoute, surfaceFromPins, viewportById, workbenchUrl, MANIFEST_VERSION, } from "./manifest";
+export type { ComponentEntry, Flow, FlowStep, HardcodedColor, LearnedFile, Manifest, Origin, PropSample, PropSpec, Renderability, RouteEntry, RouteKind, SampleKind, SampleValue, ScanStats, Surface, SurfaceFiles, Token, TokenGroup, TokenKind, TokenUse, Viewport, ViewerConfig, Weight, } from "./manifest";
+export { parseManifest } from "./parse-manifest";
+export type { RegistryEntry } from "./registry";
+export type { NewTicketInput, Pin, RuntimeError, TicketSummary } from "./pin";

package/dist/index.js

@@ -0,0 +1 @@
+import{byGroup as e,flowById as f,frameUrl as a,groupLabel as p,surfaceForRoute as s,surfaceFromPins as t,viewportById as u,workbenchUrl as l,MANIFEST_VERSION as m}from"./manifest";import{parseManifest as b}from"./parse-manifest";export{m as MANIFEST_VERSION,e as byGroup,f as flowById,a as frameUrl,p as groupLabel,b as parseManifest,s as surfaceForRoute,t as surfaceFromPins,u as viewportById,l as workbenchUrl};

package/dist/manifest.d.ts

@@ -0,0 +1,19 @@
+import type { ComponentEntry, Flow, Viewport, ViewerConfig } from "./manifest.types";
+export type { ComponentEntry, Flow, FlowStep, HardcodedColor, LearnedFile, Manifest, Origin, PropSample, PropSpec, Renderability, RouteEntry, RouteKind, SampleKind, SampleValue, ScanStats, Surface, SurfaceFiles, Token, TokenGroup, TokenKind, TokenUse, Viewport, ViewerConfig, Weight, } from "./manifest.types";
+export { MANIFEST_VERSION } from "./manifest.types";
+export declare function groupLabel(config: ViewerConfig, group: string): string;
+export declare function viewportById(config: ViewerConfig, id: string | undefined): Viewport;
+export declare function workbenchUrl(config: ViewerConfig, segment: string, params?: URLSearchParams): string;
+export declare function byGroup(components: ComponentEntry[]): Array<[string, ComponentEntry[]]>;
+export declare function surfaceFromPins(pins: Array<{
+    node: {
+        surface: string | null;
+    } | null;
+}>, fallback: string): string;
+export declare function surfaceForRoute(routes: ReadonlyArray<{
+    path: string;
+    surface: string | null;
+    dynamic: boolean;
+}>, pathname: string): string | null;
+export declare function frameUrl(config: ViewerConfig, params: Record<string, string>): string;
+export declare function flowById(flows: Flow[], id: string | undefined): Flow | undefined;

package/dist/manifest.js

@@ -0,0 +1 @@
+import{MANIFEST_VERSION as h}from"./manifest.types";function s(e,t){return e.groupLabels[t]??t}function u(e,t){const r=e.viewports.find(n=>n.id===t),o=e.viewports[0];if(r)return r;if(o)return o;throw new Error("El manifiesto no declara ning\xFAn viewport.")}function f(e,t,r){const o=e.mountPath.replace(/\/+$/,""),n=t?`${o}/${t}`:o;return r?`${n}?${r.toString()}`:n}function c(e){const t=new Map;for(const r of e){const o=t.get(r.group);o?o.push(r):t.set(r.group,[r])}return[...t.entries()]}function p(e,t){const r=new Map;for(const n of e){const i=n.node?.surface;i&&r.set(i,(r.get(i)??0)+1)}let o=null;for(const[n,i]of r)(o===null||i>(r.get(o)??0))&&(o=n);return o??t}function a(e,t){const r=e.find(n=>n.path===t);return r?r.surface:e.filter(n=>n.dynamic).map(n=>({route:n,stem:n.path.split(/[:*]/)[0]??""})).filter(({stem:n})=>n.length>1&&t.startsWith(n)).sort((n,i)=>i.stem.length-n.stem.length)[0]?.route.surface??null}function l(e,t){return f(e,"",new URLSearchParams({view:"frame",...t}))}function d(e,t){return e.find(r=>r.id===t)??e[0]}export{h as MANIFEST_VERSION,c as byGroup,d as flowById,l as frameUrl,s as groupLabel,a as surfaceForRoute,p as surfaceFromPins,u as viewportById,f as workbenchUrl};

package/dist/manifest.types.d.ts

@@ -0,0 +1,169 @@
+export type Viewport = {
+    id: string;
+    label: string;
+    width: number;
+    height: number;
+    note: string | null;
+};
+export type ViewerConfig = {
+    title: string;
+    subtitle: string;
+    mountPath: string;
+    groupLabels: {
+        [key in string]: string;
+    };
+    viewports: Array<Viewport>;
+};
+export type TokenKind = "color" | "value";
+export type Token = {
+    name: string;
+    light: string | null;
+    dark: string | null;
+    note: string | null;
+    kind: TokenKind;
+};
+export type TokenGroup = {
+    id: string;
+    label: string;
+    tokens: Array<Token>;
+};
+export type Renderability = "auto" | "synthesized" | "needs-demo" | "server" | "demo";
+export type SampleKind = "string" | "number" | "boolean" | "node" | "enum" | "callback" | "list";
+export type SampleValue = string | number | boolean | Array<SampleValue> | null;
+export type PropSample = {
+    kind: SampleKind;
+    value: SampleValue;
+};
+export type PropSpec = {
+    name: string;
+    typeText: string;
+    required: boolean;
+    sample: PropSample | null;
+};
+export type VariantGroup = {
+    name: string;
+    values: Array<string>;
+    default: string | null;
+};
+export type ComponentEntry = {
+    id: string;
+    name: string;
+    group: string;
+    file: string;
+    importPath: string;
+    exportName: string | null;
+    verdict: Renderability;
+    props: Array<PropSpec>;
+    variants: Array<VariantGroup>;
+    demoFile: string | null;
+    surface: string | null;
+};
+export type RouteKind = "page" | "handler";
+export type RouteEntry = {
+    path: string;
+    file: string;
+    group: string | null;
+    kind: RouteKind;
+    dynamic: boolean;
+    surface: string | null;
+};
+export type Origin = "config" | "spider";
+export type FlowStep = {
+    label: string;
+    route: string;
+    viewport: string;
+    note: string | null;
+    spec: string | null;
+    exists: boolean;
+};
+export type Flow = {
+    id: string;
+    title: string;
+    description: string | null;
+    origin: Origin;
+    steps: Array<FlowStep>;
+};
+export type LearnedFile = {
+    file: string;
+    ticket: string | null;
+};
+export type SurfaceFiles = {
+    anchors: Array<string>;
+    members: Array<string>;
+    mounts: Array<string>;
+    learned: Array<LearnedFile>;
+};
+export type TokenUse = {
+    token: string;
+    uses: number;
+};
+export type HardcodedColor = {
+    file: string;
+    values: Array<string>;
+};
+export type Weight = "quick" | "full";
+export type Surface = {
+    id: string;
+    label: string;
+    description: string;
+    origin: Origin;
+    main: string | null;
+    files: SurfaceFiles;
+    shared: Array<string>;
+    logic: Array<string>;
+    routes: Array<string>;
+    absent: Array<string>;
+    tokens: Array<TokenUse>;
+    hardcodedColors: Array<HardcodedColor>;
+    components: Array<string>;
+    gotchas: Array<string>;
+    predictedFiles: Array<string>;
+    weight: Weight;
+};
+export type ParseFailure = {
+    file: string;
+    message: string;
+};
+export type ScanStats = {
+    filesScanned: number;
+    elapsedMs: bigint;
+    parseFailures: Array<ParseFailure>;
+    untraceableHrefs: number;
+    missingStylesheet: string | null;
+    droppedFlows: number;
+};
+export type Manifest = {
+    version: number;
+    generatedBy: string;
+    config: ViewerConfig;
+    tokens: Array<TokenGroup>;
+    components: Array<ComponentEntry>;
+    routes: Array<RouteEntry>;
+    flows: Array<Flow>;
+    surfaces: Array<Surface>;
+    stats: ScanStats;
+};
+export type OverlayComponent = {
+    name: string;
+    file: string;
+    surface: string | null;
+};
+export type OverlayRoute = {
+    path: string;
+    surface: string | null;
+    dynamic: boolean;
+};
+export type OverlaySurface = {
+    id: string;
+    label: string;
+    weight: Weight;
+    predictedFileCount: number;
+};
+export type OverlayManifest = {
+    version: number;
+    config: ViewerConfig;
+    components: Array<OverlayComponent>;
+    routes: Array<OverlayRoute>;
+    surfaces: Array<OverlaySurface>;
+};
+export declare const MANIFEST_VERSION = 1;

package/dist/manifest.types.js

@@ -0,0 +1 @@
+const o=1;export{o as MANIFEST_VERSION};

package/dist/mirror.d.ts

@@ -0,0 +1,7 @@
+export declare const QUIET_MS = 500;
+export declare const CAPTURE_MAX_MS = 8000;
+export declare const CAPTURE_TOTAL_MS = 30000;
+export declare const MIRROR_MAX_BYTES = 2000000;
+export declare function serializeMirror(doc: Document, route: string, origin: string): string;
+export declare function whenQuiet(doc: Document, quietMs?: number, maxMs?: number): Promise<"quiet" | "restless">;
+export declare function captureMirror(frame: HTMLIFrameElement, route: string): Promise<string | null>;