uidex 0.5.1 → 0.6.0

package/dist/react/index.cjs

@@ -115,6 +115,7 @@ function freezeEntity(entity, flows) {
 function createRegistry() {
   const store = emptyStore();
   let flowsCache = null;
+  const patternCache = /* @__PURE__ */ new Map();
   const getFlows = () => {
     if (flowsCache === null) flowsCache = Array.from(store.flow.values());
     return flowsCache;
@@ -124,6 +125,7 @@ function createRegistry() {
     const key = entityKey(entity);
     store[entity.kind].set(key, entity);
     flowsCache = null;
+    patternCache.delete(entity.kind);
   };
   const get = (kind, id) => {
     assertEntityKind(kind);
@@ -131,6 +133,38 @@ function createRegistry() {
     if (raw === void 0) return void 0;
     return freezeEntity(raw, getFlows());
   };
+  const getPatternsForKind = (kind) => {
+    const cached = patternCache.get(kind);
+    if (cached !== void 0)
+      return cached;
+    const patterns = [];
+    for (const [key, entity] of store[kind]) {
+      if (key.endsWith("*")) {
+        patterns.push({
+          prefix: key.slice(0, -1),
+          entity
+        });
+      }
+    }
+    patternCache.set(
+      kind,
+      patterns
+    );
+    return patterns;
+  };
+  const matchPattern = (kind, id) => {
+    assertEntityKind(kind);
+    const patterns = getPatternsForKind(kind);
+    if (patterns.length === 0) return void 0;
+    let best;
+    for (const entry of patterns) {
+      if (id.startsWith(entry.prefix) && (best === void 0 || entry.prefix.length > best.prefix.length)) {
+        best = entry;
+      }
+    }
+    if (best === void 0) return void 0;
+    return freezeEntity(best.entity, getFlows());
+  };
   const list = (kind) => {
     assertEntityKind(kind);
     const flows = getFlows();
@@ -181,6 +215,7 @@ function createRegistry() {
   return {
     add,
     get,
+    matchPattern,
     list,
     query,
     byScope,
@@ -1130,6 +1165,9 @@ var tailwind_built_default = `/*! tailwindcss v4.2.2 | MIT License | https://tai
   .relative {
     position: relative;
   }
+  .static {
+    position: static;
+  }
   .inset-0 {
     inset: calc(var(--spacing) * 0);
   }
@@ -3520,16 +3558,18 @@ function createCursorTooltip(deps) {
   const renderBody = () => {
     body.replaceChildren();
     if (typeof currentContent === "string") {
-      applyColor(DEFAULT_TOOLTIP_COLOR);
+      applyColor("#a1a1aa");
+      el2.style.opacity = "0.6";
       body.append(document.createTextNode(currentContent));
       return;
     }
     if (!currentContent) return;
+    el2.style.opacity = "1";
     const { entity, node } = currentContent;
     const style = KIND_STYLE[entity.kind];
     const demoted = entity.kind === "primitive";
     applyColor(style?.color ?? DEFAULT_TOOLTIP_COLOR);
-    el2.style.opacity = demoted ? "0.55" : "1";
+    if (demoted) el2.style.opacity = "0.55";
     if (style) {
       const svg2 = (0, import_lucide2.createElement)(style.icon);
       svg2.setAttribute("aria-hidden", "true");
@@ -3580,7 +3620,7 @@ function createCursorTooltip(deps) {
 // src/browser/surface/inspector.ts
 function entityForRef(ref2, registry) {
   if (registry) {
-    const found = registry.get(ref2.kind, ref2.id);
+    const found = registry.get(ref2.kind, ref2.id) ?? registry.matchPattern?.(ref2.kind, ref2.id);
     if (found) return found;
   }
   if (ref2.kind === "route") return { kind: "route", path: ref2.id, page: ref2.id };
@@ -3646,7 +3686,8 @@ function createInspector(options) {
     resolveAll = (target) => defaultResolveAllMatches(target, registry),
     onHover,
     onSelect,
-    onCycle
+    onCycle,
+    onObscured
   } = options;
   let mounted = false;
   let currentEl = null;
@@ -3655,6 +3696,13 @@ function createInspector(options) {
   let layerIndex = 0;
   let lastCursor = { x: 0, y: 0 };
   const makeStack = () => stack.length > 0 ? { matches: stack, index: layerIndex, current: stack[layerIndex] } : null;
+  const onDocumentLeave = () => {
+    currentEl = null;
+    stack = [];
+    layerIndex = 0;
+    session.highlight.unhover();
+    onObscured?.(lastCursor);
+  };
   const onMouseMove = (e) => {
     if (!(e.target instanceof Element)) return;
     const matches = resolveAll(e.target);
@@ -3707,6 +3755,7 @@ function createInspector(options) {
         document.head.appendChild(cursorStyleEl);
       }
       document.addEventListener("mousemove", onMouseMove);
+      document.addEventListener("mouseleave", onDocumentLeave);
       document.addEventListener("click", onClick, true);
       document.addEventListener("contextmenu", onContextMenu, true);
     },
@@ -3721,6 +3770,7 @@ function createInspector(options) {
         cursorStyleEl = null;
       }
       document.removeEventListener("mousemove", onMouseMove);
+      document.removeEventListener("mouseleave", onDocumentLeave);
       document.removeEventListener("click", onClick, true);
       document.removeEventListener("contextmenu", onContextMenu, true);
       session.highlight.unhover();
@@ -4619,6 +4669,10 @@ function createSurfaceShell(options) {
     },
     onCycle: (stack, cursor) => {
       showStack(stack, cursor);
+    },
+    onObscured: (cursor) => {
+      overlay.hide();
+      tooltip.update("iframe", cursor);
     }
   });
   cleanup.add(inspector);
@@ -5516,6 +5570,14 @@ var badgeVariants = cva(badgeBase, {
     }
   }
 });
+function badgeTpl(content, options = {}) {
+  const { variant, size, class: extra } = options;
+  return import_lit_html2.html`
+    <span class=${cn(badgeVariants({ variant, size }), extra)} data-slot="badge"
+      >${content}</span
+    >
+  `;
+}
 
 // src/browser/views/primitives/chip.ts
 var CHIP_CLASS = "inline-flex items-center gap-1.5 text-xs font-medium text-muted-foreground";
@@ -6844,7 +6906,10 @@ function renderDetailSurface(surface, ctx, root) {
               >
                 ${surface.title}
               </h2>` : import_lit_html2.nothing}
-          <span class="ml-auto">${kindBadgeTpl(surface.entityKind)}</span>
+          <span class="ml-auto flex items-center gap-1">
+            ${surface.unregistered ? badgeTpl("Unregistered", { variant: "warning", size: "sm" }) : import_lit_html2.nothing}
+            ${kindBadgeTpl(surface.entityKind)}
+          </span>
         </div>
         ${surface.subtitle ? subtitleTpl(surface.subtitle) : import_lit_html2.nothing}
         <div
@@ -9714,12 +9779,11 @@ function createEntityDetailView(config) {
       if (!ctx.ref || ctx.ref.kind !== kind) {
         return { kind: "detail", entityKind: kind };
       }
-      const entity = ctx.registry.get(kind, ctx.ref.id);
-      if (!entity) {
-        return { kind: "detail", entityKind: kind, notFound: ctx.ref };
-      }
-      const metaEntity = entity;
-      const meta = metaEntity.meta;
+      const exactEntity = ctx.registry.get(kind, ctx.ref.id);
+      const patternEntity = exactEntity ? void 0 : ctx.registry.matchPattern?.(kind, ctx.ref.id);
+      const entity = exactEntity ?? patternEntity;
+      const metaEntity = entity ? entity : null;
+      const meta = metaEntity?.meta;
       const actions = [];
       const cloud = ctx.cloud;
       actions.push({ ...reportAction(ctx.ref), group: "Report" });
@@ -9737,14 +9801,16 @@ function createEntityDetailView(config) {
         actions.push({ ...highlightElementAction(ctx.ref), group: "Inspect" });
         actions.push({ ...copyScreenshotAction(ctx.ref), group: "Inspect" });
       }
-      actions.push({
-        ...copyPathAction(ctx.ref, metaEntity.loc),
-        group: "Inspect"
-      });
-      actions.push({
-        ...copySnapshotAction(ctx.ref, metaEntity.loc),
-        group: "Inspect"
-      });
+      if (metaEntity?.loc) {
+        actions.push({
+          ...copyPathAction(ctx.ref, metaEntity.loc),
+          group: "Inspect"
+        });
+        actions.push({
+          ...copySnapshotAction(ctx.ref, metaEntity.loc),
+          group: "Inspect"
+        });
+      }
       const sections = [];
       if (meta?.description) {
         sections.push({ id: "description", text: meta.description });
@@ -9752,8 +9818,10 @@ function createEntityDetailView(config) {
       if (offerAcceptance && meta?.acceptance?.length) {
         sections.push({ id: "acceptance", items: meta.acceptance });
       }
-      for (const s of config.extraSections?.(ctx, entity) ?? []) {
-        sections.push(s);
+      if (entity) {
+        for (const s of config.extraSections?.(ctx, entity) ?? []) {
+          sections.push(s);
+        }
       }
       if (!DOM_BACKED_KINDS2.has(kind)) {
         sections.push({
@@ -9782,8 +9850,9 @@ function createEntityDetailView(config) {
       return {
         kind: "detail",
         entityKind: kind,
-        title: displayName(metaEntity),
-        subtitle: config.subtitle?.(ctx, entity),
+        title: patternEntity ? ctx.ref.id : metaEntity ? displayName(metaEntity) : ctx.ref.id,
+        subtitle: exactEntity ? config.subtitle?.(ctx, exactEntity) : void 0,
+        unregistered: !entity,
         actions,
         sections
       };