@unoverse-platform/studio 0.1.102 → 0.1.104

package/vendor/sdk/lib/dom/element.ts

@@ -0,0 +1,69 @@
+/**
+ * The element layer of the plain-DOM renderer: styles, attributes and children, set in place.
+ * No virtual DOM: an element is built once and each update writes only what changed.
+ */
+import type { CssStyle } from "../style";
+
+/** CSS properties whose plain numbers are not lengths (`zIndex: 2`, never `2px`). */
+const UNITLESS = new Set([
+  "animationIterationCount", "aspectRatio", "borderImageOutset", "borderImageSlice", "borderImageWidth",
+  "boxFlex", "boxFlexGroup", "boxOrdinalGroup", "columnCount", "columns", "flex", "flexGrow", "flexPositive",
+  "flexShrink", "flexNegative", "flexOrder", "gridArea", "gridRow", "gridRowEnd", "gridRowSpan", "gridRowStart",
+  "gridColumn", "gridColumnEnd", "gridColumnSpan", "gridColumnStart", "fontWeight", "lineClamp", "lineHeight",
+  "opacity", "order", "orphans", "scale", "tabSize", "widows", "zIndex", "zoom", "fillOpacity", "floodOpacity",
+  "stopOpacity", "strokeDasharray", "strokeDashoffset", "strokeMiterlimit", "strokeOpacity", "strokeWidth",
+]);
+
+const kebab = (name: string) =>
+  name.startsWith("--") ? name : name.replace(/[A-Z]/g, (m) => "-" + m.toLowerCase()).replace(/^ms-/, "-ms-");
+
+/** A style value as CSS text, or null when the property is not set. */
+function cssValue(name: string, v: unknown): string | null {
+  if (v == null || typeof v === "boolean" || v === "") return null;
+  if (typeof v === "number" && v !== 0 && !UNITLESS.has(name) && !name.startsWith("--")) return `${v}px`;
+  return String(v).trim();
+}
+
+const applied = new WeakMap<Element, Record<string, string>>();
+
+/**
+ * Set an element's inline style to `next`, touching only the properties that changed. A
+ * property this layer never set (a behaviour's `opacity`, a stage's `transform`) is left alone.
+ */
+export function setStyle(el: HTMLElement | SVGElement, next: CssStyle | undefined): void {
+  const prev = applied.get(el) ?? {};
+  const now: Record<string, string> = {};
+  for (const [k, v] of Object.entries(next ?? {})) {
+    const css = cssValue(k, v);
+    if (css != null) now[kebab(k)] = css;
+  }
+  for (const k of Object.keys(prev)) if (!(k in now)) el.style.removeProperty(k);
+  for (const [k, v] of Object.entries(now)) if (prev[k] !== v) el.style.setProperty(k, v);
+  applied.set(el, now);
+  if (!el.getAttribute("style")) el.removeAttribute("style");
+}
+
+/** Set or remove an attribute: absent, null or false removes it, true sets it empty. */
+export function setAttr(el: Element, name: string, v: unknown): void {
+  if (v == null || v === false) el.removeAttribute(name);
+  else {
+    const s = v === true ? "" : String(v);
+    if (el.getAttribute(name) !== s) el.setAttribute(name, s);
+  }
+}
+
+/** Put exactly `nodes` in `parent`, in order, moving only what is out of place. */
+export function setChildren(parent: Node, nodes: Node[]): void {
+  let i = 0;
+  for (const n of nodes) {
+    const at = parent.childNodes[i] ?? null;
+    if (at !== n) parent.insertBefore(n, at);
+    i++;
+  }
+  while (parent.childNodes.length > i) parent.removeChild(parent.lastChild!);
+}
+
+/** A text node whose content follows the value (strings and numbers; anything else is empty). */
+export function textOf(v: unknown): string {
+  return typeof v === "string" ? v : typeof v === "number" || typeof v === "bigint" ? String(v) : "";
+}

package/vendor/sdk/lib/dom/isolate.ts

@@ -0,0 +1,37 @@
+/**
+ * THE SHADOW ROOT: every component and app draws inside its own open shadow root, so the
+ * page's styles cannot reach in and ours cannot leak out. The SDK owns the boundary once,
+ * for every host.
+ *
+ * Shadow DOM blocks style SELECTORS but NOT inheritance: inherited properties (font, colour,
+ * line-height, letter-spacing) still pierce it, and <button>/<input> fall back to the UA
+ * font. `:host { all: initial }` neutralizes the inherited cascade; `display: contents`
+ * keeps the host out of layout (the consumer owns the outer box). The container inside then
+ * takes the served `theme.root`, the sole typographic baseline.
+ */
+export const RESET_CSS = `
+  :host { all: initial; display: contents; }
+  .uno-isolate-root { box-sizing: border-box; }
+  .uno-isolate-root *, .uno-isolate-root *::before, .uno-isolate-root *::after { box-sizing: border-box; }
+  .uno-isolate-root button, .uno-isolate-root input, .uno-isolate-root textarea, .uno-isolate-root select {
+    font: inherit; letter-spacing: inherit; color: inherit; margin: 0;
+  }
+  /* Scrollbars hidden by default across every scroll container — scrolling still works,
+     the bar is just not painted. Generic chrome that design definitions can't author per-node (pseudo-
+     elements), so it lives with the structural reset. */
+  .uno-isolate-root * { scrollbar-width: none; }
+  .uno-isolate-root *::-webkit-scrollbar { width: 0; height: 0; display: none; }
+`;
+
+/** A host element carrying a shadow root, and the container everything draws into. */
+export function isolatedRoot(doc: Document): { host: HTMLDivElement; root: HTMLDivElement } {
+  const host = doc.createElement("div");
+  host.style.display = "contents";
+  const shadow = host.shadowRoot ?? host.attachShadow({ mode: "open" });
+  const reset = doc.createElement("style");
+  reset.textContent = RESET_CSS;
+  const root = doc.createElement("div");
+  root.className = "uno-isolate-root";
+  shadow.append(reset, root);
+  return { host, root };
+}

package/vendor/sdk/lib/dom/markdown.ts

@@ -0,0 +1,388 @@
+/**
+ * `Markdown`, in plain DOM: a bound markdown string drawn as elements. The text is parsed
+ * (./markdownParse) into a tree of tags, and each element takes its look from the SERVED prose
+ * recipe (`theme.prose` ← design/styles/semantic/prose). ⛔ AUTHORS ZERO STYLE VALUES: this
+ * file maps element → recipe key and supplies behaviour only (links open in a new tab, a
+ * broken image falls back to its alt text, a citation opens its pop-up).
+ *
+ * Updated in place as an answer streams: an element whose tag is unchanged is kept, so an
+ * image keeps its broken state and an open citation stays open.
+ */
+import type { ResolvedTheme, UnoverseNode } from "../core/types";
+import { styleToCss, type CssStyle } from "../style";
+import { citationOf, fitPopover, holdOpenCitation, keepCitationsWhole } from "../citations";
+import { setAttr, setChildren, setStyle } from "./element";
+import { svgOf, type Prim } from "./primitives";
+import { parseMarkdown } from "./markdownParse";
+import type { Data, MarkdownTree, RenderCtx } from "./types";
+
+interface Env {
+  doc: Document;
+  theme(): ResolvedTheme;
+  inheritLink(): boolean;
+  cite(): { action?: string; data: Data };
+  onAction: RenderCtx["onAction"];
+  /** Re-draw the whole answer (an element changed what it puts on the page). */
+  refresh(): void;
+}
+
+interface Rec {
+  key: string;
+  readonly nodes: Node[];
+  update(t: MarkdownTree): void;
+  destroy(): void;
+}
+
+type El = Exclude<MarkdownTree, string>;
+
+/** The prose recipe's style for one key. */
+const prose = (theme: ResolvedTheme) => {
+  const p = (theme.prose ?? {}) as Record<string, unknown>;
+  const s = (k: string) => (p[k] as CssStyle | undefined) ?? {};
+  const headings = (p.heading as Record<string, string>) ?? {};
+  const head = (tag: string) => (theme.text?.[headings[tag]] as CssStyle | undefined) ?? {};
+  return { p, s, head };
+};
+
+/** The served style each element takes, by tag. */
+function recipeFor(tag: string, theme: ResolvedTheme): CssStyle | undefined {
+  const { p, s, head } = prose(theme);
+  switch (tag) {
+    case "p": return s("paragraph");
+    case "strong": return s("strong");
+    case "em": return s("emphasis");
+    case "del": return s("strikethrough");
+    case "code": return s("code");
+    case "pre": return s("codeBlock");
+    case "blockquote": return s("blockquote");
+    case "hr": return s("rule");
+    case "th": return { ...s("cell"), ...s("headerCell") };
+    case "td": return s("cell");
+    case "ul": return { ...s("list"), listStyleType: p.bulletStyle as string };
+    case "ol": return { ...s("list"), listStyleType: p.orderedStyle as string };
+    case "li": return s("listItem");
+    case "h1": case "h2": case "h3": case "h4": case "h5": case "h6": return head(tag);
+    default: return undefined;
+  }
+}
+
+const PROP_ATTR: Record<string, string> = { className: "class", htmlFor: "for", readOnly: "readonly", tabIndex: "tabindex", colSpan: "colspan", rowSpan: "rowspan" };
+
+/** A parsed element's own props as attributes (style handled by the caller). */
+function setProps(el: Element, props: Record<string, unknown>, prev: Set<string>): Set<string> {
+  const now = new Set<string>();
+  for (const [k, v] of Object.entries(props)) {
+    if (k === "key" || k === "children" || k === "style" || typeof v === "function") continue;
+    const name = PROP_ATTR[k] ?? k;
+    if (v == null || v === false || (k === "className" && v === "")) continue;
+    now.add(name);
+    setAttr(el, name, v);
+  }
+  for (const name of prev) if (!now.has(name)) el.removeAttribute(name);
+  return now;
+}
+
+const keyOf = (t: MarkdownTree): string =>
+  typeof t === "string" ? "#text" : t.tag === "a" && typeof t.props.href === "string" && t.props.href.startsWith("cite:") ? "a:cite" : t.tag;
+
+function children(env: Env, parent: Node, recs: Rec[], trees: MarkdownTree[]): void {
+  trees.forEach((t, i) => {
+    const key = keyOf(t);
+    if (recs[i]?.key !== key) {
+      recs[i]?.destroy();
+      recs[i] = create(env, key);
+    }
+    recs[i].update(t);
+  });
+  for (const r of recs.splice(trees.length)) r.destroy();
+  setChildren(parent, recs.flatMap((r) => r.nodes));
+}
+
+function create(env: Env, key: string): Rec {
+  if (key === "#text") {
+    const n = env.doc.createTextNode("");
+    return { key, nodes: [n], update: (t) => void (n.data !== t && (n.data = t as string)), destroy() {} };
+  }
+  if (key === "a:cite") return citeMark(env);
+  if (key === "a") return externalLink(env);
+  if (key === "table") return scrollableTable(env);
+  if (key === "img") return markdownImage(env);
+  return element(env, key);
+}
+
+function element(env: Env, tag: string): Rec {
+  const el = env.doc.createElement(tag);
+  const recs: Rec[] = [];
+  let attrs = new Set<string>();
+  return {
+    key: tag,
+    nodes: [el],
+    update(t) {
+      const { props, children: kids } = t as El;
+      attrs = setProps(el, props, attrs);
+      // The recipe's style wins over the parser's own (the overrides' merge order).
+      setStyle(el, recipeFor(tag, env.theme()) ?? (props.style as CssStyle | undefined));
+      children(env, el, recs, kids);
+    },
+    destroy() {
+      for (const r of recs) r.destroy();
+    },
+  };
+}
+
+/** A web link: opens in a new tab, with the served external-link glyph after it. */
+function externalLink(env: Env): Rec {
+  const el = env.doc.createElement("a");
+  const recs: Rec[] = [];
+  let attrs = new Set<string>();
+  let arrow: { glyph: unknown; svg: SVGSVGElement } | null = null;
+  return {
+    key: "a",
+    nodes: [el],
+    update(t) {
+      const { props, children: kids } = t as El;
+      const theme = env.theme();
+      const { s } = prose(theme);
+      attrs = setProps(el, { ...props, target: "_blank", rel: "noopener noreferrer" }, attrs);
+      setStyle(el, env.inheritLink() ? { ...s("link"), color: "inherit" } : s("link"));
+      const li = (theme.icons?.externalLink ?? {}) as Parameters<typeof svgOf>[1];
+      if (!li.children?.length) arrow = null;
+      else if (arrow?.glyph !== li) arrow = { glyph: li, svg: svgOf(env.doc, li, s("linkIcon")) };
+      children(env, el, recs, kids);
+      if (arrow) el.appendChild(arrow.svg);
+    },
+    destroy() {
+      for (const r of recs) r.destroy();
+    },
+  };
+}
+
+/** Wide tables scroll instead of crushing their columns. */
+function scrollableTable(env: Env): Rec {
+  const wrap = env.doc.createElement("div");
+  const table = env.doc.createElement("table");
+  wrap.appendChild(table);
+  const recs: Rec[] = [];
+  let attrs = new Set<string>();
+  return {
+    key: "table",
+    nodes: [wrap],
+    update(t) {
+      const { props, children: kids } = t as El;
+      const { s } = prose(env.theme());
+      setStyle(wrap, s("tableWrap"));
+      attrs = setProps(table, props, attrs);
+      setStyle(table, s("table"));
+      children(env, table, recs, kids);
+    },
+    destroy() {
+      for (const r of recs) r.destroy();
+    },
+  };
+}
+
+/** A broken image URL degrades to its alt text, not a broken-image icon. */
+function markdownImage(env: Env): Rec {
+  let broken = false;
+  let src: string | undefined;
+  const img = env.doc.createElement("img");
+  const fallback = env.doc.createElement("span");
+  img.addEventListener("error", () => {
+    broken = true;
+    env.refresh();
+  });
+  let showing: Node = img;
+  return {
+    key: "img",
+    get nodes() {
+      return [showing];
+    },
+    update(t) {
+      const { props } = t as El;
+      const { s } = prose(env.theme());
+      if (props.src !== src) {
+        src = props.src as string | undefined;
+        broken = false;
+      }
+      const alt = props.alt as string | undefined;
+      if (!src || broken) {
+        setStyle(fallback, s("imageFallback"));
+        fallback.textContent = alt || "Image unavailable";
+        showing = fallback;
+        return;
+      }
+      setAttr(img, "src", src);
+      setAttr(img, "alt", alt || "");
+      setAttr(img, "title", props.title);
+      setAttr(img, "loading", "lazy");
+      setAttr(img, "decoding", "async");
+      setStyle(img, s("image"));
+      showing = img;
+    },
+    destroy() {},
+  };
+}
+
+/**
+ * A CITATION (docs/unoverse/data/objects/citations-in-answers.md): a `cite:` link is a marker
+ * after the fact it supports. Tapped, a pop-up shows the quoted words, the document and the
+ * page, and an Open button that fires the node's `citeAction` with the citation. Every look is
+ * a served prose key (citeAnchor, citeMark, citePopover, citeQuote, citeSource, citeOpen).
+ */
+function citeMark(env: Env): Rec {
+  const doc = env.doc;
+  const anchor = doc.createElement("span");
+  const mark = doc.createElement("button");
+  mark.type = "button";
+  anchor.appendChild(mark);
+  const recs: Rec[] = [];
+  let plain: Node[] | null = null;
+  let open = false;
+  let c: ReturnType<typeof citationOf> = null;
+  let place = { shift: 0, above: false };
+  let pop: HTMLSpanElement | null = null;
+  let stopOpen: (() => void) | null = null;
+
+  const drawPop = () => {
+    if (!open || !c) {
+      pop?.remove();
+      pop = null;
+      return;
+    }
+    const { s } = prose(env.theme());
+    const { action, data } = env.cite();
+    pop ??= doc.createElement("span");
+    setAttr(pop, "role", "dialog");
+    setStyle(pop, { ...s("citePopover"), transform: `translateX(${place.shift}px)`, ...(place.above ? { top: "auto", bottom: "100%" } : {}) });
+    const parts: Node[] = [];
+    const source = [c.doc, c.page ? `p. ${c.page}` : ""].filter(Boolean).join(" · ");
+    if (c.quote) {
+      const q = doc.createElement("span");
+      setStyle(q, { display: "block", ...s("citeQuote") });
+      q.textContent = `“${c.quote}”`;
+      parts.push(q);
+    }
+    if (source) {
+      const src = doc.createElement("span");
+      setStyle(src, { display: "block", ...s("citeSource") });
+      src.textContent = source;
+      parts.push(src);
+    }
+    if (action && env.onAction) {
+      const btn = doc.createElement("button");
+      btn.type = "button";
+      setStyle(btn, s("citeOpen"));
+      btn.textContent = "Open";
+      const citation = c;
+      btn.addEventListener("click", () => {
+        setOpen(false);
+        env.onAction?.(action, { ...data, citation });
+      });
+      parts.push(btn);
+    }
+    setChildren(pop, parts);
+    if (pop.parentNode !== anchor) anchor.appendChild(pop);
+  };
+
+  // ALWAYS ON SCREEN: measured as it opens, and again when the window changes size.
+  const fit = () => {
+    if (!pop) return;
+    const a = anchor.getBoundingClientRect();
+    place = fitPopover(a, { width: pop.offsetWidth, height: pop.offsetHeight }, { width: window.innerWidth, height: window.innerHeight });
+    drawPop();
+  };
+
+  const setOpen = (next: boolean) => {
+    if (next === open) return;
+    open = next;
+    setAttr(mark, "aria-expanded", String(open));
+    stopOpen?.();
+    stopOpen = null;
+    drawPop();
+    if (!open) return;
+    fit();
+    const away = (e: Event) => {
+      if (!e.composedPath().includes(anchor)) setOpen(false);
+    };
+    const esc = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    window.addEventListener("resize", fit);
+    document.addEventListener("pointerdown", away);
+    document.addEventListener("keydown", esc);
+    stopOpen = () => {
+      window.removeEventListener("resize", fit);
+      document.removeEventListener("pointerdown", away);
+      document.removeEventListener("keydown", esc);
+    };
+  };
+  mark.addEventListener("click", () => setOpen(!open));
+
+  return {
+    key: "a:cite",
+    get nodes() {
+      return plain ?? [anchor];
+    },
+    update(t) {
+      const { props, children: kids } = t as El;
+      c = citationOf(props.href as string, props.title as string | undefined);
+      if (!c) {
+        // Not a readable citation: its words only.
+        const holder = doc.createDocumentFragment();
+        children(env, holder, recs, kids);
+        plain = recs.flatMap((r) => r.nodes);
+        return;
+      }
+      plain = null;
+      const { s } = prose(env.theme());
+      setStyle(anchor, s("citeAnchor"));
+      const source = [c.doc, c.page ? `p. ${c.page}` : ""].filter(Boolean).join(" · ");
+      setAttr(mark, "aria-expanded", String(open));
+      setAttr(mark, "aria-label", source ? `Source: ${source}` : "Source");
+      setStyle(mark, s("citeMark"));
+      children(env, mark, recs, kids);
+      drawPop();
+    },
+    destroy() {
+      stopOpen?.();
+      for (const r of recs) r.destroy();
+    },
+  };
+}
+
+/**
+ * The Markdown primitive. The container takes `node.style`; its content is the parsed text.
+ * `inheritLinkColor: true` makes links take the node's own color (a CTA whose label must
+ * match it); otherwise links keep the served link recipe.
+ */
+export function markdownView(ctx: RenderCtx): Prim {
+  const el = ctx.doc.createElement("div");
+  const recs: Rec[] = [];
+  let node: UnoverseNode;
+  let data: Data;
+  let trees: MarkdownTree[] = [];
+  const env: Env = {
+    doc: ctx.doc,
+    theme: () => ctx.theme,
+    inheritLink: () => (node as { inheritLinkColor?: boolean }).inheritLinkColor === true,
+    cite: () => ({ action: (node as { citeAction?: string }).citeAction, data }),
+    onAction: (...a) => ctx.onAction?.(...a),
+    refresh: () => children(env, el, recs, trees),
+  };
+  return {
+    nodes: [el],
+    update(n, d) {
+      node = n;
+      data = d;
+      setStyle(el, styleToCss(n.style, ctx.theme, d));
+      // Bound, or literal as a `Ref`'s `with` leaves it, exactly as Text reads its value.
+      const value = (n.bind?.value ? (d[n.bind.value] as string) : (n as { value?: unknown }).value) ?? "";
+      const parsed = parseMarkdown(holdOpenCitation(keepCitationsWhole(String(value))));
+      trees = parsed == null ? [] : [parsed];
+      children(env, el, recs, trees);
+    },
+    destroy() {
+      for (const r of recs) r.destroy();
+    },
+  };
+}