@trycua/cua 0.2.0

package/dist/teleport/controller.js

@@ -0,0 +1,107 @@
+/**
+ * {@link TeleportPickerController}: the headless state machine bound to a
+ * {@link TeleportHost}. Frameworks subscribe to it (React:
+ * `useSyncExternalStore(c.subscribe, () => c.state)`; the web component
+ * re-renders on each change).
+ */
+import { canConfirm, canPlan, initialState, planSensitive, reduce, } from "./model.js";
+function message(e) {
+    return e instanceof Error ? e.message : String(e);
+}
+export class TeleportPickerController {
+    #state;
+    #listeners = new Set();
+    #generation = 0;
+    host;
+    constructor(host, options) {
+        this.host = host;
+        this.#state = initialState(options.spaceName);
+        if (options.preselect) {
+            this.#state = reduce(this.#state, {
+                type: "preselect",
+                entry: options.preselect.entry,
+                files: options.preselect.files ?? [],
+            });
+        }
+    }
+    get state() {
+        return this.#state;
+    }
+    /** Subscribe to changes; returns the unsubscribe. */
+    subscribe = (listener) => {
+        this.#listeners.add(listener);
+        return () => this.#listeners.delete(listener);
+    };
+    dispatch = (event) => {
+        const next = reduce(this.#state, event);
+        if (next === this.#state)
+            return;
+        this.#state = next;
+        for (const l of [...this.#listeners])
+            l();
+    };
+    /** Loads (or reloads) the catalog. */
+    async load() {
+        const gen = ++this.#generation;
+        try {
+            const entries = await this.host.catalog();
+            if (gen === this.#generation)
+                this.dispatch({ type: "loaded", entries });
+        }
+        catch (e) {
+            if (gen === this.#generation)
+                this.dispatch({ type: "failed", message: message(e), cause: e });
+        }
+    }
+    /** Opens the options for the selected (or given) app. */
+    choose(id) {
+        this.dispatch(id === undefined ? { type: "choose" } : { type: "choose", id });
+    }
+    /** Opens the native chooser and adds what the user picked. */
+    async chooseFiles() {
+        if (!this.host.chooseFiles)
+            return;
+        const files = await this.host.chooseFiles();
+        if (files.length)
+            this.dispatch({ type: "files", files });
+    }
+    /** Builds the plan (sizes, installs, consent items). */
+    async plan() {
+        const s = this.#state;
+        if (s.step !== "options" || !canPlan(s) || !s.entry || !s.move)
+            return;
+        this.dispatch({ type: "plan" });
+        try {
+            const groups = planSensitive(s);
+            const plan = await this.host.plan(s.entry, {
+                moves: s.move,
+                files: s.files,
+                ...(groups.length ? { sensitiveGroups: groups } : {}),
+            });
+            this.dispatch({ type: "planned", plan });
+        }
+        catch (e) {
+            this.dispatch({ type: "failed", message: message(e), cause: e });
+        }
+    }
+    /** Runs the approved plan with the user's consent. */
+    async confirm() {
+        const s = this.#state;
+        if (s.step !== "consent" || !canConfirm(s) || !s.plan)
+            return;
+        const plan = s.plan;
+        this.dispatch({ type: "confirm" });
+        try {
+            const report = await this.host.run(plan, {
+                approved: true,
+                acknowledgeSensitive: s.acknowledged,
+                saveToKeyvault: s.saveToKeyvault,
+                acknowledgeRelayPlaintext: s.acknowledgedRelayPlaintext,
+            }, (event) => this.dispatch({ type: "progress", event }));
+            this.dispatch({ type: "finished", report });
+        }
+        catch (e) {
+            this.dispatch({ type: "failed", message: message(e), cause: e });
+        }
+    }
+}

package/dist/teleport/drop.d.ts

@@ -0,0 +1,62 @@
+/**
+ * Drag payloads, read the same way as the Rust core
+ * (`cua_teleport::ux::drop`; both run `testdata/drops.json`).
+ *
+ * Paths and `file://` URIs sort into apps (`.app`, `.desktop`, `.lnk`),
+ * files and folders, and URLs. In a plain browser a Finder drop carries no
+ * paths, only file names; {@link classifyBrowserDrop} then matches an
+ * `X.app` name against the catalog.
+ */
+import type { CatalogEntry } from "./model.js";
+export declare const MAX_DROP_ITEMS = 256;
+export type DropKind = "empty" | "app" | "files" | "url";
+export interface DropPayload {
+    kind: DropKind;
+    apps: string[];
+    files: string[];
+    urls: string[];
+    ignored: string[];
+}
+export declare function isAppPath(path: string): boolean;
+/** `file:///a%20b/` -> `/a b/`; `null` for another host. */
+export declare function fileUriToPath(uri: string): string | null;
+/** Parses paths, `file://` URIs, URLs or `text/uri-list` blobs. */
+export declare function parseDrop(items: readonly string[]): DropPayload;
+/** What a browser drop carries (a `DataTransfer`, flattened). */
+export interface BrowserDrop {
+    /** `text/uri-list`, when present. */
+    uriList?: string;
+    /** `text/plain`, when present. */
+    text?: string;
+    /** Dropped file names (no paths in a browser). */
+    fileNames?: string[];
+}
+/** Reads a DOM `DataTransfer` into a {@link BrowserDrop}. */
+export declare function readDataTransfer(dt: {
+    getData(type: string): string;
+    files?: ArrayLike<{
+        name: string;
+    }>;
+}): BrowserDrop;
+export type BrowserDropResult = {
+    kind: "app";
+    entry: CatalogEntry | null;
+    name: string;
+    path?: string;
+} | {
+    kind: "files";
+    names: string[];
+    paths: string[];
+} | {
+    kind: "url";
+    urls: string[];
+} | {
+    kind: "empty";
+};
+/** The catalog row an app file name or bundle path names (`Blender.app`). */
+export declare function entryForAppName(catalog: readonly CatalogEntry[], nameOrPath: string): CatalogEntry | null;
+/**
+ * Classifies a browser drop: URIs first (a Dock or Finder drag in Chromium
+ * carries `file://` URIs), then file names (`X.app` is an app).
+ */
+export declare function classifyBrowserDrop(drop: BrowserDrop, catalog: readonly CatalogEntry[]): BrowserDropResult;

package/dist/teleport/drop.js

@@ -0,0 +1,138 @@
+/**
+ * Drag payloads, read the same way as the Rust core
+ * (`cua_teleport::ux::drop`; both run `testdata/drops.json`).
+ *
+ * Paths and `file://` URIs sort into apps (`.app`, `.desktop`, `.lnk`),
+ * files and folders, and URLs. In a plain browser a Finder drop carries no
+ * paths, only file names; {@link classifyBrowserDrop} then matches an
+ * `X.app` name against the catalog.
+ */
+export const MAX_DROP_ITEMS = 256;
+export function isAppPath(path) {
+    const l = path.toLowerCase();
+    return l.endsWith(".app") || l.endsWith(".desktop") || l.endsWith(".lnk");
+}
+function isAbsolute(p) {
+    return p.startsWith("/") || /^[A-Za-z]:[\\/]/.test(p) || p.startsWith("\\\\");
+}
+function trimSeparators(p) {
+    const t = p.replace(/[/\\]+$/, "");
+    return t === "" ? p : t;
+}
+function percentDecode(s) {
+    const bytes = [];
+    for (let i = 0; i < s.length;) {
+        if (s[i] === "%") {
+            const hex = s.slice(i + 1, i + 3);
+            if (!/^[0-9a-fA-F]{2}$/.test(hex))
+                return null;
+            bytes.push(parseInt(hex, 16));
+            i += 3;
+        }
+        else {
+            const code = s.codePointAt(i);
+            const ch = String.fromCodePoint(code);
+            for (const b of new TextEncoder().encode(ch))
+                bytes.push(b);
+            i += ch.length;
+        }
+    }
+    try {
+        return new TextDecoder("utf-8", { fatal: true }).decode(new Uint8Array(bytes));
+    }
+    catch {
+        return null;
+    }
+}
+/** `file:///a%20b/` -> `/a b/`; `null` for another host. */
+export function fileUriToPath(uri) {
+    let rest = uri.slice("file://".length);
+    if (rest.startsWith("localhost"))
+        rest = rest.slice("localhost".length);
+    if (!rest.startsWith("/"))
+        return null;
+    const decoded = percentDecode(rest);
+    if (decoded == null)
+        return null;
+    if (/^\/[A-Za-z]:/.test(decoded) && decoded.length > 3)
+        return decoded.slice(1);
+    return decoded;
+}
+/** Parses paths, `file://` URIs, URLs or `text/uri-list` blobs. */
+export function parseDrop(items) {
+    const out = { kind: "empty", apps: [], files: [], urls: [], ignored: [] };
+    const seen = new Set();
+    const lines = items
+        .flatMap((i) => i.split(/\r?\n/))
+        .map((l) => l.trim())
+        .filter((l) => l !== "" && !l.startsWith("#"))
+        .slice(0, MAX_DROP_ITEMS);
+    for (const line of lines) {
+        if (seen.has(line))
+            continue;
+        seen.add(line);
+        const lower = line.toLowerCase();
+        if (lower.startsWith("http://") || lower.startsWith("https://")) {
+            out.urls.push(line);
+            continue;
+        }
+        let path = line;
+        if (lower.startsWith("file://")) {
+            const p = fileUriToPath(line);
+            if (p == null) {
+                out.ignored.push(line);
+                continue;
+            }
+            path = p;
+        }
+        if (!isAbsolute(path)) {
+            out.ignored.push(line);
+            continue;
+        }
+        const t = trimSeparators(path);
+        if (isAppPath(t))
+            out.apps.push(t);
+        else
+            out.files.push(t);
+    }
+    out.kind = out.apps.length ? "app" : out.files.length ? "files" : out.urls.length ? "url" : "empty";
+    return out;
+}
+/** Reads a DOM `DataTransfer` into a {@link BrowserDrop}. */
+export function readDataTransfer(dt) {
+    const names = [];
+    if (dt.files)
+        for (let i = 0; i < dt.files.length; i++)
+            names.push(dt.files[i].name);
+    return { uriList: dt.getData("text/uri-list") || undefined, text: dt.getData("text/plain") || undefined, fileNames: names };
+}
+/** The catalog row an app file name or bundle path names (`Blender.app`). */
+export function entryForAppName(catalog, nameOrPath) {
+    const base = trimSeparators(nameOrPath).split(/[/\\]/).pop() ?? nameOrPath;
+    const name = base.replace(/\.(app|desktop|lnk)$/i, "");
+    const lower = name.toLowerCase();
+    return (catalog.find((e) => e.hostPath != null && trimSeparators(e.hostPath) === trimSeparators(nameOrPath)) ??
+        catalog.find((e) => e.name === name) ??
+        catalog.find((e) => e.hostAppId?.toLowerCase() === lower || e.id === lower) ??
+        null);
+}
+/**
+ * Classifies a browser drop: URIs first (a Dock or Finder drag in Chromium
+ * carries `file://` URIs), then file names (`X.app` is an app).
+ */
+export function classifyBrowserDrop(drop, catalog) {
+    const parsed = parseDrop([drop.uriList ?? "", drop.text ?? ""].filter(Boolean));
+    if (parsed.kind === "app") {
+        const path = parsed.apps[0];
+        return { kind: "app", entry: entryForAppName(catalog, path), name: path, path };
+    }
+    const appName = (drop.fileNames ?? []).find(isAppPath);
+    if (appName)
+        return { kind: "app", entry: entryForAppName(catalog, appName), name: appName };
+    if (parsed.kind === "files" || (drop.fileNames ?? []).length > 0) {
+        return { kind: "files", names: drop.fileNames ?? [], paths: parsed.files };
+    }
+    if (parsed.kind === "url")
+        return { kind: "url", urls: parsed.urls };
+    return { kind: "empty" };
+}

package/dist/teleport/dropZone.d.ts

@@ -0,0 +1,59 @@
+/**
+ * The one drop zone for a Space: a dashed well captioned "Drop a file or
+ * window", with "Send file…" and "Teleport an app…" below it. Files, app
+ * bundles and dragged windows all land on the same zone; the host decides what
+ * each becomes (a verified file send, or the "Teleport an app…" picker). The
+ * same zone as the Cua Spaces app's.
+ *
+ * - {@link dropZoneStatusLine}: what the zone says it did, concretely (a
+ *   file is only "sent" once the Space verified it).
+ * - {@link renderTeleportDropZone}: the markup, for any framework.
+ * - `<cua-drop-zone>` ({@link defineDropZoneElement}): the web component.
+ *   Set `.status` and, for drags the DOM does not see (a webview's native
+ *   file drop, a window drag), `.over`. Fires `cua-drop` (`detail`: the
+ *   `DataTransfer` of a DOM drop), `cua-send-file` and `cua-teleport-app`.
+ *   Put `data-teleport-target` on it to make it a window-drag target.
+ */
+export declare const DROP_ZONE_CAPTION = "Drop a file or window";
+export declare const DROP_ZONE_SEND_FILE = "Send file\u2026";
+export declare const DROP_ZONE_TELEPORT_APP = "Teleport an app\u2026";
+/** One file the Space verified. */
+export interface DropZoneFile {
+    name: string;
+    bytes: number;
+    /** Where it landed in the Space. */
+    dest: string;
+}
+export type DropZoneStatus = {
+    kind: "idle";
+} | {
+    kind: "sending";
+    label: string;
+} | {
+    kind: "sent";
+    files: DropZoneFile[];
+} | {
+    kind: "failed";
+    message: string;
+};
+export declare const idleDropZone: DropZoneStatus;
+/** The status line under the buttons, or null when there is nothing to say. */
+export declare function dropZoneStatusLine(status: DropZoneStatus): string | null;
+/** "Sending report.pdf…" / "Sending 3 files…". */
+export declare function sendingLabel(names: readonly string[]): string;
+/** Whether a client-space point is inside `element`'s box. */
+export declare function isInsideZone(element: {
+    getBoundingClientRect(): DOMRect;
+} | null, point: {
+    x: number;
+    y: number;
+}): boolean;
+export declare const DROP_ZONE_STYLES = "\n:host { --fg: var(--cua-teleport-fg, #16181d); --muted: var(--cua-teleport-muted, #6b7280);\n  --accent: var(--cua-teleport-accent, #2563eb); --border: var(--cua-teleport-border, #d1d5db);\n  --danger: var(--cua-teleport-danger, #b91c1c); --radius: var(--cua-teleport-radius, 10px);\n  display: block; color: var(--fg); font: 13px/1.35 system-ui, -apple-system, sans-serif; }\n@media (prefers-color-scheme: dark) { :host { --fg: var(--cua-teleport-fg, #eceef2); --muted: var(--cua-teleport-muted, #9aa0aa);\n  --accent: var(--cua-teleport-accent, #5b8def); --border: var(--cua-teleport-border, #3a3d44); --danger: var(--cua-teleport-danger, #f87171); } }\n.zone { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 12px 12px; text-align: center;\n  border: 1.5px dashed var(--border); border-radius: var(--radius); background: color-mix(in srgb, var(--fg) 4%, transparent); }\n.zone[data-drop-target=true] { border-style: solid; border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }\n.zone[data-busy=true] { opacity: .72; }\n.caption { margin: 0; color: var(--muted); font-size: 12.5px; }\n.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 2px; }\nbutton { padding: 4px 12px; font: inherit; font-size: 12.5px; color: var(--fg); cursor: pointer;\n  background: color-mix(in srgb, var(--fg) 8%, transparent); border: 1px solid var(--border); border-radius: 999px; }\nbutton:hover:not(:disabled) { background: color-mix(in srgb, var(--fg) 14%, transparent); }\nbutton:disabled { opacity: .5; cursor: default; }\n.status { margin: 2px 0 0; max-width: 40ch; color: var(--muted); font-size: 11.5px; overflow-wrap: anywhere; }\n.status[data-kind=failed] { color: var(--danger); }\n";
+/** The zone's markup. Buttons carry `data-act="send-file"` / `data-act="teleport-app"`. */
+export declare function renderTeleportDropZone(state: {
+    over?: boolean;
+    status?: DropZoneStatus;
+    canSendFile?: boolean;
+}): string;
+/** Registers `<cua-drop-zone>` (idempotent). Nothing is registered on import. */
+export declare function defineDropZoneElement(registry?: CustomElementRegistry): void;

package/dist/teleport/dropZone.js

@@ -0,0 +1,166 @@
+/**
+ * The one drop zone for a Space: a dashed well captioned "Drop a file or
+ * window", with "Send file…" and "Teleport an app…" below it. Files, app
+ * bundles and dragged windows all land on the same zone; the host decides what
+ * each becomes (a verified file send, or the "Teleport an app…" picker). The
+ * same zone as the Cua Spaces app's.
+ *
+ * - {@link dropZoneStatusLine}: what the zone says it did, concretely (a
+ *   file is only "sent" once the Space verified it).
+ * - {@link renderTeleportDropZone}: the markup, for any framework.
+ * - `<cua-drop-zone>` ({@link defineDropZoneElement}): the web component.
+ *   Set `.status` and, for drags the DOM does not see (a webview's native
+ *   file drop, a window drag), `.over`. Fires `cua-drop` (`detail`: the
+ *   `DataTransfer` of a DOM drop), `cua-send-file` and `cua-teleport-app`.
+ *   Put `data-teleport-target` on it to make it a window-drag target.
+ */
+import { formatBytes } from "./model.js";
+export const DROP_ZONE_CAPTION = "Drop a file or window";
+export const DROP_ZONE_SEND_FILE = "Send file…";
+export const DROP_ZONE_TELEPORT_APP = "Teleport an app…";
+export const idleDropZone = Object.freeze({ kind: "idle" });
+/** The status line under the buttons, or null when there is nothing to say. */
+export function dropZoneStatusLine(status) {
+    switch (status.kind) {
+        case "idle":
+            return null;
+        case "sending":
+            return `Sending ${status.label}…`;
+        case "sent": {
+            const [first] = status.files;
+            if (!first)
+                return null;
+            if (status.files.length === 1)
+                return `${first.name} (${formatBytes(first.bytes)}) verified in ${first.dest}`;
+            const total = status.files.reduce((sum, f) => sum + f.bytes, 0);
+            return `${status.files.length} files (${formatBytes(total)}) verified`;
+        }
+        case "failed":
+            return status.message;
+    }
+}
+/** "Sending report.pdf…" / "Sending 3 files…". */
+export function sendingLabel(names) {
+    if (names.length === 1)
+        return names[0].split(/[\\/]/).pop() || names[0];
+    return `${names.length} files`;
+}
+/** Whether a client-space point is inside `element`'s box. */
+export function isInsideZone(element, point) {
+    if (!element)
+        return false;
+    const b = element.getBoundingClientRect();
+    if (b.width === 0 && b.height === 0)
+        return false;
+    return point.x >= b.left && point.x <= b.right && point.y >= b.top && point.y <= b.bottom;
+}
+export const DROP_ZONE_STYLES = `
+:host { --fg: var(--cua-teleport-fg, #16181d); --muted: var(--cua-teleport-muted, #6b7280);
+  --accent: var(--cua-teleport-accent, #2563eb); --border: var(--cua-teleport-border, #d1d5db);
+  --danger: var(--cua-teleport-danger, #b91c1c); --radius: var(--cua-teleport-radius, 10px);
+  display: block; color: var(--fg); font: 13px/1.35 system-ui, -apple-system, sans-serif; }
+@media (prefers-color-scheme: dark) { :host { --fg: var(--cua-teleport-fg, #eceef2); --muted: var(--cua-teleport-muted, #9aa0aa);
+  --accent: var(--cua-teleport-accent, #5b8def); --border: var(--cua-teleport-border, #3a3d44); --danger: var(--cua-teleport-danger, #f87171); } }
+.zone { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 12px 12px; text-align: center;
+  border: 1.5px dashed var(--border); border-radius: var(--radius); background: color-mix(in srgb, var(--fg) 4%, transparent); }
+.zone[data-drop-target=true] { border-style: solid; border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
+.zone[data-busy=true] { opacity: .72; }
+.caption { margin: 0; color: var(--muted); font-size: 12.5px; }
+.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 2px; }
+button { padding: 4px 12px; font: inherit; font-size: 12.5px; color: var(--fg); cursor: pointer;
+  background: color-mix(in srgb, var(--fg) 8%, transparent); border: 1px solid var(--border); border-radius: 999px; }
+button:hover:not(:disabled) { background: color-mix(in srgb, var(--fg) 14%, transparent); }
+button:disabled { opacity: .5; cursor: default; }
+.status { margin: 2px 0 0; max-width: 40ch; color: var(--muted); font-size: 11.5px; overflow-wrap: anywhere; }
+.status[data-kind=failed] { color: var(--danger); }
+`;
+const esc = (s) => String(s ?? "").replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
+/** The zone's markup. Buttons carry `data-act="send-file"` / `data-act="teleport-app"`. */
+export function renderTeleportDropZone(state) {
+    const status = state.status ?? idleDropZone;
+    const busy = status.kind === "sending";
+    const line = dropZoneStatusLine(status);
+    const off = busy ? " disabled" : "";
+    return `<div class="zone" part="zone"${state.over ? ' data-drop-target="true"' : ""}${busy ? ' data-busy="true"' : ""}>
+    <p class="caption">${esc(DROP_ZONE_CAPTION)}</p>
+    <div class="actions">${state.canSendFile === false ? "" : `<button type="button" data-act="send-file"${off}>${esc(DROP_ZONE_SEND_FILE)}</button>`}<button type="button" data-act="teleport-app"${off}>${esc(DROP_ZONE_TELEPORT_APP)}</button></div>
+    ${line ? `<p class="status" role="status" data-kind="${status.kind}">${esc(line)}</p>` : ""}
+  </div>`;
+}
+/** Registers `<cua-drop-zone>` (idempotent). Nothing is registered on import. */
+export function defineDropZoneElement(registry = customElements) {
+    if (registry.get("cua-drop-zone"))
+        return;
+    class DropZone extends HTMLElement {
+        #over = false;
+        #domOver = false;
+        #status = idleDropZone;
+        set over(v) {
+            this.#over = !!v;
+            this.#render();
+        }
+        get over() {
+            return this.#over || this.#domOver;
+        }
+        set status(s) {
+            this.#status = s ?? idleDropZone;
+            this.#render();
+        }
+        get status() {
+            return this.#status;
+        }
+        connectedCallback() {
+            if (!this.shadowRoot) {
+                const root = this.attachShadow({ mode: "open" });
+                root.addEventListener("click", this.#onClick);
+                this.addEventListener("dragover", this.#onDragOver);
+                this.addEventListener("dragleave", this.#onDragLeave);
+                this.addEventListener("drop", this.#onDrop);
+            }
+            this.#render();
+        }
+        #fire(type, detail) {
+            this.dispatchEvent(new CustomEvent(type, { detail, bubbles: true, composed: true }));
+        }
+        #onClick = (ev) => {
+            const act = ev.target.closest("[data-act]")?.dataset.act;
+            if (act === "send-file")
+                this.#fire("cua-send-file");
+            if (act === "teleport-app")
+                this.#fire("cua-teleport-app");
+        };
+        #onDragOver = (ev) => {
+            ev.preventDefault();
+            if (!this.#domOver) {
+                this.#domOver = true;
+                this.#render();
+            }
+        };
+        #onDragLeave = (ev) => {
+            const into = ev.relatedTarget;
+            if (into && (into === this || this.contains(into) || this.shadowRoot?.contains(into)))
+                return;
+            this.#domOver = false;
+            this.#render();
+        };
+        #onDrop = (ev) => {
+            ev.preventDefault();
+            this.#domOver = false;
+            this.#render();
+            const dt = ev.dataTransfer;
+            if (dt)
+                this.#fire("cua-drop", dt);
+        };
+        #render() {
+            if (!this.shadowRoot)
+                return;
+            this.toggleAttribute("data-over", this.over);
+            this.shadowRoot.innerHTML = `<style>${DROP_ZONE_STYLES}</style>${renderTeleportDropZone({
+                over: this.over,
+                status: this.#status,
+                canSendFile: !this.hasAttribute("no-send-file"),
+            })}`;
+        }
+    }
+    registry.define("cua-drop-zone", DropZone);
+}

package/dist/teleport/element.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Framework-agnostic web components over the headless picker:
+ *
+ * - `<cua-teleport-picker>`: "Teleport an app…" (search, icons, recents,
+ *   capability levels, the move choice, the consent screen listing every
+ *   path and secret, progress). Set `.host` (a {@link TeleportHost}) and the
+ *   `space-name` attribute; optional `.preselect` jumps to one app. Fires
+ *   `cua-teleport-close` and `cua-teleport-done` (`detail`: the report).
+ * - `<cua-drop-zone>`: the one dashed zone for files, apps and windows
+ *   (see `dropZone.ts`).
+ * - `<cua-teleport-drop>`: the drop zone shown while a window or app is
+ *   dragged: the dragged window's preview, the app and its capability, the
+ *   target Space. Set `.state` (a {@link WindowDropState}) and `space-name`.
+ *
+ * Call {@link defineTeleportElements} once in a browser or webview; nothing
+ * is registered on import, so Node can import this module.
+ *
+ * Theming: CSS custom properties `--cua-teleport-bg`, `-fg`, `-muted`,
+ * `-accent`, `-border`, `-danger`, `-radius`; light and dark defaults follow
+ * `prefers-color-scheme`.
+ */
+import { TeleportPickerController } from "./controller.js";
+import type { WindowDropState } from "./windowDrag.js";
+export declare const TELEPORT_STYLES = "\n:host { --bg: var(--cua-teleport-bg, #ffffff); --fg: var(--cua-teleport-fg, #16181d);\n  --muted: var(--cua-teleport-muted, #6b7280); --accent: var(--cua-teleport-accent, #2563eb);\n  --border: var(--cua-teleport-border, #e5e7eb); --danger: var(--cua-teleport-danger, #b91c1c);\n  --radius: var(--cua-teleport-radius, 10px); --row: color-mix(in srgb, var(--fg) 5%, var(--bg));\n  display: block; color: var(--fg); background: var(--bg); font: 13px/1.4 system-ui, -apple-system, sans-serif; }\n@media (prefers-color-scheme: dark) { :host { --bg: var(--cua-teleport-bg, #1c1d21); --fg: var(--cua-teleport-fg, #eceef2);\n  --muted: var(--cua-teleport-muted, #9aa0aa); --accent: var(--cua-teleport-accent, #5b8def);\n  --border: var(--cua-teleport-border, #2e3036); --danger: var(--cua-teleport-danger, #f87171); } }\n.panel { display: flex; flex-direction: column; gap: 12px; padding: 16px; min-height: 100%; box-sizing: border-box; }\nh1 { font-size: 15px; margin: 0; font-weight: 600; }\n.hint { color: var(--muted); margin: 0; }\ninput[type=search] { width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border);\n  background: var(--bg); color: var(--fg); font: inherit; }\n.list { display: flex; flex-direction: column; gap: 2px; overflow: auto; flex: 1; min-height: 120px; }\n.section { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; margin: 8px 4px 2px; }\n.row { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: center; padding: 6px 8px;\n  border-radius: 8px; border: 1px solid transparent; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }\n.row[aria-selected=true] { background: var(--row); border-color: var(--accent); }\n.row:disabled { cursor: default; opacity: .55; }\n.icon { width: 28px; height: 28px; border-radius: 7px; object-fit: contain; }\n.mono { width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; background: var(--row); font-weight: 600; }\n.name { font-weight: 500; } .sub { color: var(--muted); font-size: 12px; }\n.badge { font-size: 11px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); white-space: nowrap; }\n.badge.full { color: var(--accent); border-color: var(--accent); }\n.choices { display: flex; flex-direction: column; gap: 6px; }\n.choice { display: flex; gap: 8px; align-items: flex-start; padding: 8px; border: 1px solid var(--border); border-radius: 8px; }\n.files { display: flex; flex-direction: column; gap: 4px; }\n.file { display: flex; justify-content: space-between; gap: 8px; padding: 4px 8px; background: var(--row); border-radius: 6px; font-family: ui-monospace, monospace; font-size: 12px; }\n.items { display: flex; flex-direction: column; gap: 4px; }\n.item { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: baseline; padding: 6px 8px; border-radius: 6px; background: var(--row); }\n.item .k { font-size: 11px; color: var(--muted); text-transform: uppercase; }\n.item.secret .k { color: var(--danger); }\n.detail { color: var(--muted); font-size: 12px; word-break: break-all; }\n.warn { color: var(--muted); font-size: 12px; margin: 0; }\n.error { color: var(--danger); }\n.bar { height: 6px; border-radius: 3px; background: var(--row); overflow: hidden; }\n.bar > span { display: block; height: 100%; background: var(--accent); }\nfooter { display: flex; justify-content: flex-end; gap: 8px; margin-top: auto; }\nbutton.btn { padding: 6px 14px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--fg); font: inherit; cursor: pointer; }\na.btn { padding: 6px 14px; border-radius: 8px; border: 1px solid var(--border); font: inherit; text-decoration: none; }\na.primary, button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }\nbutton.btn:disabled { opacity: .5; cursor: default; }\n.drop { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: center; padding: 12px; border-radius: var(--radius);\n  border: 2px dashed var(--border); }\n.drop.over { border-color: var(--accent); }\n.drop .thumb { width: 96px; height: 64px; border-radius: 6px; object-fit: cover; background: var(--row); }\n";
+export declare function renderPicker(c: TeleportPickerController, icons: Map<string, string | null>): string;
+export declare function renderDropZone(state: WindowDropState, spaceName: string): string;
+/** Registers `<cua-teleport-picker>`, `<cua-teleport-drop>` and `<cua-drop-zone>` (idempotent). */
+export declare function defineTeleportElements(registry?: CustomElementRegistry): void;