@matterfact/embed 0.7.0 → 0.9.0

package/examples/embed-demo/src/styles.css

@@ -86,15 +86,21 @@ nav {
   gap: 4px;
   margin-left: 12px;
 }
-nav a {
+nav a,
+nav button {
   color: var(--muted);
   text-decoration: none;
   font-size: 13.5px;
   font-weight: 500;
   padding: 6px 11px;
   border-radius: 7px;
+  background: none;
+  border: 0;
+  font-family: inherit;
+  cursor: pointer;
 }
-nav a.active {
+nav a.active,
+nav button.active {
   color: var(--ink);
   background: var(--surface-2);
 }
@@ -133,6 +139,33 @@ nav a.active {
   background: var(--pos);
 }
 
+/* Placement switch (Corner | Panel) — a small segmented control in the header. */
+.placement {
+  display: flex;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  overflow: hidden;
+}
+.placement .seg {
+  cursor: pointer;
+  background: var(--surface-2);
+  color: var(--muted);
+  border: 0;
+  padding: 6px 12px;
+  font: inherit;
+  font-size: 13px;
+}
+.placement .seg + .seg {
+  border-left: 1px solid var(--line);
+}
+.placement .seg:hover {
+  color: var(--ink);
+}
+.placement .seg.on {
+  background: var(--accent);
+  color: #fff;
+}
+
 .layout {
   display: grid;
   grid-template-columns: 1fr var(--panel-w);
@@ -141,6 +174,11 @@ nav a.active {
 .app[data-panel='closed'] .layout {
   grid-template-columns: 1fr 0;
 }
+/* Corner placement draws no aside, so the page is all content — the widget
+   positions itself over it. */
+.app[data-placement='corner'] .layout {
+  grid-template-columns: 1fr;
+}
 
 main {
   overflow-y: auto;
@@ -352,3 +390,110 @@ aside {
 .setup li.bad {
   color: var(--neg);
 }
+
+/* Hoist mock demo (?hoist=1) — see mockXH.ts / HoistDemo.tsx. Reuses everything
+   above (header/layout/table/aside); these are the few bits unique to it. */
+.mode-link {
+  color: var(--muted);
+  text-decoration: none;
+  font-size: 12px;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  padding: 5px 11px;
+  white-space: nowrap;
+}
+.mode-link:hover {
+  color: var(--ink);
+  border-color: var(--accent);
+}
+.nav-sep {
+  color: var(--line);
+  padding: 0 2px;
+}
+.hint {
+  color: var(--muted);
+  font-weight: 500;
+  text-transform: none;
+  letter-spacing: 0;
+}
+.ticker-link {
+  font: inherit;
+  font-weight: 700;
+  background: none;
+  border: 0;
+  padding: 0;
+  color: var(--ink);
+  cursor: pointer;
+}
+.ticker-link:hover {
+  color: var(--accent);
+  text-decoration: underline;
+}
+.company-subnav {
+  display: flex;
+  gap: 6px;
+  margin-bottom: 20px;
+}
+.subtab {
+  font: inherit;
+  font-size: 13px;
+  font-weight: 600;
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  padding: 7px 12px;
+  cursor: pointer;
+  color: var(--muted);
+}
+.subtab.active {
+  color: var(--ink);
+  border-color: var(--accent);
+  background: var(--surface-2);
+}
+.hoist-chart {
+  display: block;
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  margin-bottom: 16px;
+}
+.hoist-actions {
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--line);
+  font-size: 12.5px;
+}
+.hoist-actions label {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  color: var(--muted);
+}
+.hoist-actions select {
+  font: inherit;
+  font-size: 12.5px;
+  background: var(--surface-2);
+  color: var(--ink);
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  padding: 4px 6px;
+}
+
+/* The Hoist demo's nav-policy control, in the header so it survives the corner
+   placement (where there is no aside to hold it). */
+.hoist-policy {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  font-size: 12px;
+  color: var(--muted);
+}
+.hoist-policy select {
+  font: inherit;
+  font-size: 12px;
+  color: var(--ink);
+  background: var(--surface-2);
+  border: 1px solid var(--line);
+  border-radius: 7px;
+  padding: 4px 6px;
+}

package/examples/embed-demo/vite.config.ts

@@ -6,6 +6,6 @@ import react from '@vitejs/plugin-react';
 // drifts to a different (unregistered) port.
 export default defineConfig({
   plugins: [react()],
-  server: { host: 'localhost', port: 8000, strictPort: true },
-  preview: { host: 'localhost', port: 8000, strictPort: true },
+  server: { host: 'localhost', port: 3010, strictPort: true },
+  preview: { host: 'localhost', port: 3010, strictPort: true },
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@matterfact/embed",
-  "version": "0.7.0",
+  "version": "0.9.0",
   "description": "The matterfact embeddable agent: mount the chat in a cross-origin iframe (a <script> loader for any site, or a <MatterfactAgent> React component), give the agent eyes on the host page, and embed matterfact artifacts inline with <MatterfactArtifact>.",
   "license": "Apache-2.0",
   "private": false,

package/dist/chunk-7I37ZFAJ.js

@@ -1,2 +0,0 @@
-import{a,b,c,d,e,f,g,h,i,j,k,l}from"./chunk-D7R6WVHG.js";export{c as artifactIdFromPath,d as buildPageContext,j as callTool,g as grantsFromIframeSrcs,b as isPrivate,f as provideContext,e as readPageContext,a as redact,i as sendRegion,h as sendSnapshot,l as start,k as stop};
-//# sourceMappingURL=chunk-7I37ZFAJ.js.map

package/dist/chunk-AXKXNYRT.js

@@ -1,381 +0,0 @@
-// src/context.ts
-var widgetOrigin = "";
-var MAX_ACTIVITY = 40;
-var send = null;
-var activitySeq = 0;
-var activity = [];
-var lastUrl = "";
-var pageContextOn = true;
-var contextProvider;
-var navFire = null;
-var origPushState = null;
-var origReplaceState = null;
-var snapshotModule = null;
-var PII = [
-  /\b[\w.+-]+@[\w-]+\.[\w.]{2,}\b/g,
-  // email
-  /\b(?:\d[ -]?){13,19}\b/g,
-  // card-ish
-  /\b\d{3}[- ]?\d{2}[- ]?\d{4}\b/g,
-  // ssn — dashed, spaced, OR bare 9 digits
-  /\b\d{9,}\b/g,
-  // long bare digit runs: account / MRN / routing numbers
-  /(?:\+?\d{1,2}[\s.-]?)?\(?\d{3}\)?[\s.-]\d{3}[\s.-]\d{4}\b/g,
-  // us phone
-  /\b(?:sk|pk|rk|ak)_(?:live|test)_[A-Za-z0-9]{8,}\b/g,
-  // stripe-style api keys
-  /\beyJ[\w-]+\.[\w-]+\.[\w-]+\b/g
-  // jwt
-];
-function redact(text) {
-  let out = text;
-  for (const re of PII) out = out.replace(re, "[redacted]");
-  return out;
-}
-function isPrivate(el) {
-  if (el.closest("[data-mf-private]")) return true;
-  const tag = el.tagName;
-  if (tag === "INPUT") {
-    const t = el.type;
-    if (t === "password" || t === "hidden") return true;
-  }
-  return false;
-}
-function artifactIdFromPath(pathname) {
-  const m = pathname.match(/^\/(?:embed\/)?artifacts\/(.+?)\/?$/);
-  return m ? decodeURIComponent(m[1]) : null;
-}
-function embeddedMatterfactEntities() {
-  if (!widgetOrigin) return [];
-  const out = [];
-  for (const frame of Array.from(document.querySelectorAll("iframe"))) {
-    let u;
-    try {
-      u = new URL(frame.getAttribute("src") || "", location.href);
-    } catch {
-      continue;
-    }
-    if (u.origin !== widgetOrigin) continue;
-    const id = artifactIdFromPath(u.pathname);
-    if (!id) continue;
-    if (out.some((e) => e.id === id)) continue;
-    out.push({
-      kind: "artifact",
-      id,
-      label: redact(frame.getAttribute("title") || "") || id
-    });
-  }
-  return out;
-}
-function opaqueFrameCount() {
-  return Array.from(document.querySelectorAll("iframe")).filter((f) => {
-    try {
-      const u = new URL(f.getAttribute("src") || "", location.href);
-      return u.origin !== location.origin && u.origin !== widgetOrigin;
-    } catch {
-      return false;
-    }
-  }).length;
-}
-function buildPageContext(declared) {
-  const found = embeddedMatterfactEntities();
-  const opaque = opaqueFrameCount();
-  return {
-    // Path only. A query string is where session ids, tokens and email addresses
-    // live; it is not ours to take.
-    url: location.origin + location.pathname,
-    path: location.pathname,
-    title: redact(document.title),
-    locale: document.documentElement.lang || void 0,
-    ...declared,
-    // After the spread: what we FOUND is additive to what the host DECLARED, never a
-    // replacement. A host that declares its own entities still gets the artifacts we
-    // spotted, and vice versa.
-    entities: [...declared.entities ?? [], ...found],
-    data: {
-      ...declared.data ?? {},
-      ...opaque ? { opaque_frames: opaque } : {}
-    }
-  };
-}
-function readPageContext() {
-  return buildPageContext(
-    window.matterfact?.context ?? {}
-  );
-}
-async function resolveDeclaredContext() {
-  const mf = window.matterfact;
-  if (contextProvider) {
-    const c = await contextProvider();
-    if (c) return c;
-  }
-  if (mf?.getPageContext) {
-    const c = await mf.getPageContext();
-    if (c) return c;
-  }
-  return mf?.context ?? {};
-}
-async function publishContext() {
-  if (!pageContextOn) return;
-  const declared = await resolveDeclaredContext();
-  send?.({ type: "host.context", context: buildPageContext(declared) });
-}
-function provideContext() {
-  void publishContext();
-}
-function grantsFromIframeSrcs(srcs, origin) {
-  const out = [];
-  for (const raw of srcs) {
-    let u;
-    try {
-      u = new URL(raw || "", location.href);
-    } catch {
-      continue;
-    }
-    if (u.origin !== origin) continue;
-    const id = artifactIdFromPath(u.pathname);
-    if (!id) continue;
-    const owner = u.searchParams.get("owner") || "";
-    const token = u.searchParams.get("t") || "";
-    if (!owner || !token) continue;
-    if (out.some((g) => g.id === id)) continue;
-    out.push({ id, owner, token });
-  }
-  return out;
-}
-function readArtifactGrants() {
-  if (!widgetOrigin) return [];
-  const srcs = Array.from(document.querySelectorAll("iframe")).map(
-    (f) => f.getAttribute("src") || ""
-  );
-  return grantsFromIframeSrcs(srcs, widgetOrigin);
-}
-function publishArtifactGrants() {
-  send?.({ type: "host.artifactGrants", grants: readArtifactGrants() });
-}
-function pushActivity(e) {
-  activity.push({ ...e, seq: ++activitySeq, ts: Date.now() });
-  if (activity.length > MAX_ACTIVITY) activity.shift();
-  send?.({ type: "host.activity", events: [activity[activity.length - 1]] });
-}
-function controlLabel(el) {
-  const aria = el.getAttribute("aria-label");
-  if (aria) return aria;
-  const id = el.id;
-  if (id) {
-    const forLabel = document.querySelector(`label[for="${CSS.escape(id)}"]`);
-    const t = forLabel?.textContent?.trim();
-    if (t) return t;
-  }
-  const wrapping = el.closest("label")?.textContent?.trim();
-  if (wrapping) return wrapping;
-  const placeholder = el.getAttribute("placeholder");
-  if (placeholder) return placeholder;
-  return "";
-}
-var FORM_CONTROLS = /* @__PURE__ */ new Set(["INPUT", "SELECT", "TEXTAREA"]);
-function describe(el) {
-  const role = el.getAttribute("role") || el.tagName.toLowerCase();
-  const label = el.getAttribute("aria-label") || (FORM_CONTROLS.has(el.tagName) ? controlLabel(el) : el.innerText?.trim().slice(0, 60)) || el.getAttribute("title") || "";
-  return label ? `${role} "${redact(label)}"` : role;
-}
-var ACTIONABLE = 'a[href],button,input,select,textarea,summary,[role="button"],[role="link"],[role="menuitem"],[role="tab"],[role="option"],[role="checkbox"],[role="switch"],[role="radio"],[onclick],[tabindex]';
-function onClick(ev) {
-  const target = ev.target;
-  if (!target || !(target instanceof Element)) return;
-  const label = target.closest("label");
-  const labelled = label ? label.getAttribute("for") && document.getElementById(label.getAttribute("for")) || label.querySelector("input,select,textarea") : null;
-  const actionable = labelled ?? target.closest(ACTIONABLE);
-  if (!actionable || isPrivate(actionable)) return;
-  pushActivity({ type: "click", summary: `clicked ${describe(actionable)}` });
-}
-function onSubmit(ev) {
-  const el = ev.target;
-  if (!el || isPrivate(el)) return;
-  pushActivity({ type: "submit", summary: `submitted ${describe(el)}` });
-}
-function onChange(ev) {
-  const el = ev.target;
-  if (!el || !(el instanceof Element) || isPrivate(el)) return;
-  const tag = el.tagName;
-  const type = el.type;
-  if (tag === "INPUT" && (type === "password" || type === "hidden")) return;
-  let summary = `changed ${describe(el)}`;
-  if (tag === "SELECT") {
-    const opt = el.selectedOptions[0]?.text;
-    if (opt) summary = `${describe(el)} \u2192 "${redact(opt)}"`;
-  } else if (type === "checkbox" || type === "radio") {
-    summary = `${el.checked ? "checked" : "unchecked"} ${describe(el)}`;
-  }
-  pushActivity({ type: "input", summary });
-}
-function watchNavigation() {
-  const fire = () => {
-    const url = location.pathname;
-    if (url === lastUrl) return;
-    lastUrl = url;
-    pushActivity({ type: "nav", summary: `navigated to ${url}` });
-    void publishContext();
-    publishArtifactGrants();
-  };
-  navFire = fire;
-  for (const name of ["pushState", "replaceState"]) {
-    const orig = history[name];
-    if (name === "pushState") origPushState = orig;
-    else origReplaceState = orig;
-    history[name] = function(...args) {
-      const r = orig.apply(this, args);
-      fire();
-      return r;
-    };
-  }
-  window.addEventListener("popstate", fire);
-}
-var lastFocus = {};
-async function readFocus() {
-  const focus = {};
-  const sel = window.getSelection?.();
-  if (sel && !sel.isCollapsed) {
-    const anchor = sel.anchorNode?.parentElement ?? null;
-    if (!anchor || !anchor.closest("[data-mf-private]")) {
-      const text = sel.toString().trim().slice(0, 500);
-      if (text) focus.selection = redact(text);
-    }
-  }
-  const active = document.activeElement;
-  if (active && active !== document.body && !isPrivate(active) && !active.closest("[data-mf-private]")) {
-    const { snapshot } = await loadSnapshotModule();
-    focus.focused = {
-      label: redact(describeControl(active)),
-      role: active.getAttribute("role") || active.tagName.toLowerCase()
-    };
-  }
-  const doc = document.documentElement;
-  const scrollable = doc.scrollHeight - doc.clientHeight;
-  focus.scroll = scrollable > 0 ? Math.round(doc.scrollTop / scrollable * 100) / 100 : 0;
-  return focus;
-}
-function describeControl(el) {
-  return describe(el);
-}
-async function loadSnapshotModule() {
-  const m = await import('./snapshot-MUXE7KXX.js');
-  snapshotModule = m;
-  return m;
-}
-var focusTimer = null;
-function scheduleFocus() {
-  if (focusTimer) return;
-  focusTimer = setTimeout(async () => {
-    focusTimer = null;
-    lastFocus = await readFocus();
-    send?.({ type: "host.focus", focus: lastFocus });
-  }, 250);
-}
-var snapshotSeq = 0;
-async function sendSnapshot(emit) {
-  if (!pageContextOn) return;
-  const { snapshot } = await loadSnapshotModule();
-  const { yaml, truncated, visibleRefs } = snapshot();
-  emit({
-    type: "host.snapshot",
-    snapshot: { yaml: redact(yaml), seq: ++snapshotSeq, truncated }
-  });
-  lastFocus = { ...lastFocus, visibleRefs };
-  emit({ type: "host.focus", focus: lastFocus });
-}
-async function sendRegion(ref, emit) {
-  if (!pageContextOn) return;
-  const { snapshotRegion, resolveRef } = await loadSnapshotModule();
-  const el = resolveRef(ref);
-  if (!el) {
-    emit({
-      type: "host.region",
-      ref,
-      yaml: "(this element is no longer on the page)"
-    });
-    return;
-  }
-  const { yaml } = snapshotRegion(el);
-  emit({ type: "host.region", ref, yaml: redact(yaml) });
-}
-async function callTool(call, emit) {
-  emit({
-    type: "host.toolResult",
-    callId: call.callId,
-    ok: false,
-    error: "Host tools are read-only in this version; no action was taken."
-  });
-}
-function stop() {
-  document.removeEventListener("click", onClick, { capture: true });
-  document.removeEventListener("submit", onSubmit, { capture: true });
-  document.removeEventListener("change", onChange, { capture: true });
-  document.removeEventListener("selectionchange", scheduleFocus);
-  document.removeEventListener("focusin", scheduleFocus, { capture: true });
-  window.removeEventListener("scroll", scheduleFocus, { capture: true });
-  if (navFire) {
-    window.removeEventListener("popstate", navFire);
-    navFire = null;
-  }
-  if (origPushState) {
-    history.pushState = origPushState;
-    origPushState = null;
-  }
-  if (origReplaceState) {
-    history.replaceState = origReplaceState;
-    origReplaceState = null;
-  }
-  if (focusTimer) {
-    clearTimeout(focusTimer);
-    focusTimer = null;
-  }
-  send = null;
-  contextProvider = void 0;
-  activity.length = 0;
-  lastFocus = {};
-  widgetOrigin = "";
-  snapshotModule?.clearRefs();
-}
-function start(emit, origin, pageContext = true, provider) {
-  stop();
-  send = emit;
-  widgetOrigin = origin || "";
-  lastUrl = location.pathname;
-  pageContextOn = pageContext;
-  contextProvider = provider;
-  if (pageContextOn) {
-    void publishContext();
-    publishArtifactGrants();
-    watchNavigation();
-    document.addEventListener("click", onClick, {
-      capture: true,
-      passive: true
-    });
-    document.addEventListener("submit", onSubmit, {
-      capture: true,
-      passive: true
-    });
-    document.addEventListener("change", onChange, {
-      capture: true,
-      passive: true
-    });
-    document.addEventListener("selectionchange", scheduleFocus, {
-      passive: true
-    });
-    document.addEventListener("focusin", scheduleFocus, {
-      capture: true,
-      passive: true
-    });
-    window.addEventListener("scroll", scheduleFocus, {
-      capture: true,
-      passive: true
-    });
-  }
-  const theme = matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-  emit({ type: "host.theme", mode: theme });
-}
-
-export { artifactIdFromPath, buildPageContext, callTool, grantsFromIframeSrcs, isPrivate, provideContext, readPageContext, redact, sendRegion, sendSnapshot, start, stop };
-//# sourceMappingURL=chunk-AXKXNYRT.js.map
-//# sourceMappingURL=chunk-AXKXNYRT.js.map