@kortix/ui 0.14.7 → 0.14.9

package/dist/apps/app-preview-pool.d.ts

@@ -12,6 +12,8 @@ export declare function ensureFrame(key: string, url: string, attributes: {
     title: string;
     sandbox: string;
     allow: string;
+    testid?: string;
+    referrerPolicy?: ReferrerPolicy;
 }): void;
 /** Show the frame in `slot`. Returns the release: the frame goes back to the previous claim. */
 export declare function claimFrame(key: string, slot: HTMLElement, placement: FramePlacement): () => void;
@@ -19,8 +21,11 @@ export declare function claimFrame(key: string, slot: HTMLElement, placement: Fr
 export declare function restyleFrame(key: string, slot: HTMLElement, placement: FramePlacement): void;
 /** Load the App again from `url` (a fresh access session). */
 export declare function reloadFrame(key: string, url: string): void;
-/** Drop every frame whose key is not in `keep` (a new release, a deleted App, another project). */
-export declare function pruneFrames(keep: Set<string>): void;
+/**
+ * Drop every frame whose key is not in `keep` (a new release, a deleted App,
+ * another project). `owns` limits the sweep to one kind of frame.
+ */
+export declare function pruneFrames(keep: Set<string>, owns?: (key: string) => boolean): void;
 /** The frame's load status, or null before it exists. */
 export declare function frameStatus(key: string): FrameStatus | null;
 export declare function useFrameStatus(key: string): FrameStatus | null;

package/dist/apps/app-preview-pool.js

@@ -1,6 +1,7 @@
 'use client';
 /**
- * One live frame per App preview, kept for as long as the project is open.
+ * One live frame per App preview (and per artifact page), kept for as long as
+ * the project is open.
  *
  * A card thumbnail and the big view used to each own an `<iframe>`, so every
  * page switch and every open loaded the App again. Here a frame is created
@@ -76,7 +77,9 @@ export function ensureFrame(key, url, attributes) {
     frame.title = attributes.title;
     frame.setAttribute('sandbox', attributes.sandbox);
     frame.allow = attributes.allow;
-    frame.dataset.testid = 'app-live-preview';
+    frame.dataset.testid = attributes.testid ?? 'app-live-preview';
+    if (attributes.referrerPolicy)
+        frame.referrerPolicy = attributes.referrerPolicy;
     frame.dataset.frameKey = key;
     const entry = { frame, status: 'loading', claims: [] };
     frame.addEventListener('load', () => {
@@ -127,11 +130,14 @@ export function reloadFrame(key, url) {
     entry.frame.src = url;
     notify();
 }
-/** Drop every frame whose key is not in `keep` (a new release, a deleted App, another project). */
-export function pruneFrames(keep) {
+/**
+ * Drop every frame whose key is not in `keep` (a new release, a deleted App,
+ * another project). `owns` limits the sweep to one kind of frame.
+ */
+export function pruneFrames(keep, owns = () => true) {
     let changed = false;
     for (const [key, entry] of entries) {
-        if (keep.has(key) || entry.claims.length > 0)
+        if (!owns(key) || keep.has(key) || entry.claims.length > 0)
             continue;
         entry.frame.remove();
         entries.delete(key);

package/dist/apps/app-shared.d.ts

@@ -1,5 +1,5 @@
 import type { UiTranslator } from '../i18n/index.js';
-import { type App, type AppAccessMode, type AppCapability, type AppDeployment, type AppViewerTokenScope } from '@kortix/sdk';
+import { type App, type AppAccessMode, type AppCapability, type AppDeployment, type AppViewerTokenScope, type ProjectTrigger } from '@kortix/sdk';
 type DeploymentTone = 'success' | 'destructive' | 'warning' | 'muted';
 /**
  * Every deployment status, in words a person who did not build this can read.
@@ -65,31 +65,39 @@ export declare function appStatus(app: App, tI18nComplete: UiTranslator): {
     label: string;
     dot: string;
 };
+export { appAdminsOnly, gridApps } from '../_vendor/shared/app-config.js';
+/** The Apps of the project that are neither a card nor a tab: the ones the page counts as hidden. */
+export declare function hiddenApps(apps: App[], canAdmin?: boolean): App[];
 /**
- * Does this App offer `capability`? The ONE way the Apps UI branches between
- * Apps: the server lists what each App supports (`app.capabilities`), and a
- * control shows only for the Apps that support it.
+ * How an App is wired into the project's triggers: the ones that call it
+ * (`run: { app }`) and the ones its own events start (`on: { event, app }`).
  */
-/**
- * The Apps the grid shows as cards (`display`): not `listed: false`, and not a
- * tab of a parent that exists. A tab whose parent is gone stays reachable as a card.
- */
-export declare function gridApps(apps: App[], canAdmin?: boolean): App[];
+export declare function appTriggers(app: App, triggers: ProjectTrigger[]): {
+    calledBy: ProjectTrigger[];
+    startsOn: ProjectTrigger[];
+};
+/** The one-line state of the Background list: how many Apps are up, asleep, not deployed, external. */
+export declare function backgroundSummary(apps: App[]): {
+    running: number;
+    asleep: number;
+    undeployed: number;
+    external: number;
+};
 /** The Apps `app`'s detail shows as tabs (their `display.parent` is its slug). */
 export declare function childApps(apps: App[], app: App, canAdmin?: boolean): App[];
-/**
- * Its primary service is `access: admins` (a backend's admin dashboard): only
- * project admins can open it, so nobody else is shown a card or tab for it.
- */
 /**
  * The App whose live preview a card shows: the App itself, or, when it hides
  * its own (`display.preview: none`), its first tab the viewer may open (a
  * backend's dashboard). Null: the card shows an icon.
  */
 export declare function cardPreviewApp(apps: App[], app: App, canAdmin?: boolean): App | null;
-export declare function appAdminsOnly(app: App): boolean;
 /** A tab's label: the App's name without its parent's slug ("crm-data-dashboard" → "Dashboard"). */
 export declare function appTabLabel(child: App, parent: App): string;
+/**
+ * Does this App offer `capability`? The ONE way the Apps UI branches between
+ * Apps: the server lists what each App supports (`app.capabilities`), and a
+ * control shows only for the Apps that support it.
+ */
 export declare function appCan(app: App, capability: AppCapability): boolean;
 /** "2 vCPU · 4 GB · 20 GB": the machine size of an App. */
 export declare function appSizeLabel(app: App, t: UiTranslator): string;
@@ -151,4 +159,3 @@ export declare function localizedAppCopy(tI18nComplete: UiTranslator): {
         desc: string;
     }>;
 };
-export {};

package/dist/apps/app-shared.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CopyButton } from '../markdown/copy-button.js';
 import { localizeUiCatalog, translateUiCatalogText } from '../i18n/ui-catalog/localize-ui-catalog.js';
 import { PRODUCT_CATALOG_TRANSLATION_KEYS } from '../i18n/ui-catalog/product-catalog-translation-keys.generated.js';
+import { appAdminsOnly } from '../_vendor/kortix-shared.js';
 import { cn } from '../lib/utils.js';
 import { stripTrailingSlashes } from '@kortix/sdk';
 /**
@@ -50,7 +51,7 @@ export function deployNotice(latest, tI18nComplete) {
     return { label: tI18nComplete.raw('text0b5260e1b405'), tone: 'warning' };
 }
 export function appCommand(app) {
-    return `kortix apps deploy . --app ${app.app_id}`;
+    return `kortix apps deploy . --app ${app.slug}`;
 }
 /**
  * The hostname a person reads an App by.
@@ -93,29 +94,44 @@ export function appStatus(app, tI18nComplete) {
         dot: live ? 'bg-kortix-green' : deployed ? 'bg-muted-foreground/50' : 'bg-muted-foreground/25',
     };
 }
-/**
- * Does this App offer `capability`? The ONE way the Apps UI branches between
- * Apps: the server lists what each App supports (`app.capabilities`), and a
- * control shows only for the Apps that support it.
- */
-/**
- * The Apps the grid shows as cards (`display`): not `listed: false`, and not a
- * tab of a parent that exists. A tab whose parent is gone stays reachable as a card.
- */
-export function gridApps(apps, canAdmin = true) {
+// The grid rule is shared with the API's channel Apps count (`@kortix/shared/app-config`).
+export { appAdminsOnly, gridApps } from '../_vendor/kortix-shared.js';
+/** The Apps of the project that are neither a card nor a tab: the ones the page counts as hidden. */
+export function hiddenApps(apps, canAdmin = true) {
     const slugs = new Set(apps.map((app) => app.slug));
-    return apps.filter((app) => app.display?.listed !== false
+    return apps.filter((app) => app.display?.listed !== true
         && !(app.display?.parent && slugs.has(app.display.parent))
         && (canAdmin || !appAdminsOnly(app)));
 }
+/**
+ * How an App is wired into the project's triggers: the ones that call it
+ * (`run: { app }`) and the ones its own events start (`on: { event, app }`).
+ */
+export function appTriggers(app, triggers) {
+    return {
+        calledBy: triggers.filter((row) => row.target?.app === app.slug),
+        startsOn: triggers.filter((row) => row.type === 'app' && row.app === app.slug),
+    };
+}
+/** The one-line state of the Background list: how many Apps are up, asleep, not deployed, external. */
+export function backgroundSummary(apps) {
+    const out = { running: 0, asleep: 0, undeployed: 0, external: 0 };
+    for (const row of apps) {
+        if (row.external_url)
+            out.external += 1;
+        else if (!row.active_deployment_id)
+            out.undeployed += 1;
+        else if (row.desired_state === 'running' || row.hosting_type === 'static')
+            out.running += 1;
+        else
+            out.asleep += 1;
+    }
+    return out;
+}
 /** The Apps `app`'s detail shows as tabs (their `display.parent` is its slug). */
 export function childApps(apps, app, canAdmin = true) {
     return apps.filter((row) => row.display?.parent === app.slug && (canAdmin || !appAdminsOnly(row)));
 }
-/**
- * Its primary service is `access: admins` (a backend's admin dashboard): only
- * project admins can open it, so nobody else is shown a card or tab for it.
- */
 /**
  * The App whose live preview a card shows: the App itself, or, when it hides
  * its own (`display.preview: none`), its first tab the viewer may open (a
@@ -127,14 +143,16 @@ export function cardPreviewApp(apps, app, canAdmin = true) {
     const first = childApps(apps, app, canAdmin)[0];
     return first && appCan(first, 'preview') && first.viewer_can_access !== false ? first : null;
 }
-export function appAdminsOnly(app) {
-    return app.services?.find((service) => service.name === 'http')?.access === 'admins';
-}
 /** A tab's label: the App's name without its parent's slug ("crm-data-dashboard" → "Dashboard"). */
 export function appTabLabel(child, parent) {
     const name = child.name.startsWith(`${parent.slug}-`) ? child.name.slice(parent.slug.length + 1) : child.name;
     return name.charAt(0).toUpperCase() + name.slice(1);
 }
+/**
+ * Does this App offer `capability`? The ONE way the Apps UI branches between
+ * Apps: the server lists what each App supports (`app.capabilities`), and a
+ * control shows only for the Apps that support it.
+ */
 export function appCan(app, capability) {
     return app.capabilities?.includes(capability) ?? false;
 }

package/dist/apps/index.d.ts

@@ -2,6 +2,6 @@
  * @kortix/ui/apps — Live App frames, the frame pool and the App view model.
  */
 export { AppPreview, AppPreviewOverlay, PREVIEW_SPINNER_DELAY_MS, PREVIEW_TILE_ASPECT, PREVIEW_VIEWPORT_HEIGHT, PREVIEW_VIEWPORT_WIDTH, framePlacement, previewScale, scheduleSlowPreview, } from './app-preview.js';
-export { ensureFrame, frameKey, framesKeepAlive, pruneFrames, reloadFrame, } from './app-preview-pool.js';
-export { ANONYMOUS_MODES, DEPLOYMENT_COPY, appCan, appCommand, appHost, appStatus, appTabLabel, cardPreviewApp, childApps, deployNotice, gridApps, localizedAppCopy, } from './app-shared.js';
+export { claimFrame, ensureFrame, frameKey, framesKeepAlive, pruneFrames, reloadFrame, restyleFrame, useFrameStatus, type FramePlacement, } from './app-preview-pool.js';
+export { ANONYMOUS_MODES, DEPLOYMENT_COPY, appCan, appCommand, appHost, appSizeLabel, DeployCommand, appStatus, appTabLabel, cardPreviewApp, childApps, deployNotice, gridApps, hiddenApps, appTriggers, backgroundSummary, localizedAppCopy, } from './app-shared.js';
 export { isKortixAppUrl } from './kortix-app-url.js';

package/dist/apps/index.js

@@ -2,6 +2,6 @@
  * @kortix/ui/apps — Live App frames, the frame pool and the App view model.
  */
 export { AppPreview, AppPreviewOverlay, PREVIEW_SPINNER_DELAY_MS, PREVIEW_TILE_ASPECT, PREVIEW_VIEWPORT_HEIGHT, PREVIEW_VIEWPORT_WIDTH, framePlacement, previewScale, scheduleSlowPreview, } from './app-preview.js';
-export { ensureFrame, frameKey, framesKeepAlive, pruneFrames, reloadFrame, } from './app-preview-pool.js';
-export { ANONYMOUS_MODES, DEPLOYMENT_COPY, appCan, appCommand, appHost, appStatus, appTabLabel, cardPreviewApp, childApps, deployNotice, gridApps, localizedAppCopy, } from './app-shared.js';
+export { claimFrame, ensureFrame, frameKey, framesKeepAlive, pruneFrames, reloadFrame, restyleFrame, useFrameStatus, } from './app-preview-pool.js';
+export { ANONYMOUS_MODES, DEPLOYMENT_COPY, appCan, appCommand, appHost, appSizeLabel, DeployCommand, appStatus, appTabLabel, cardPreviewApp, childApps, deployNotice, gridApps, hiddenApps, appTriggers, backgroundSummary, localizedAppCopy, } from './app-shared.js';
 export { isKortixAppUrl } from './kortix-app-url.js';

package/dist/artifacts/artifact-frame.d.ts

@@ -0,0 +1,16 @@
+/**
+ * An artifact page. The frame lives in the project's frame pool
+ * (`@kortix/ui/apps`, shared with App previews): it loads once, in the
+ * background or on first show, and moves between the gallery card and the
+ * viewer without reloading. `frameKey` changes after a save, so an edit loads
+ * the new page. The ref is the slot (the viewer's full screen target).
+ */
+export declare const ArtifactFrame: import("react").ForwardRefExoticComponent<{
+    frameKey: string;
+    src: string;
+    title: string;
+    className?: string;
+    preview?: boolean;
+} & import("react").RefAttributes<HTMLDivElement>>;
+/** Create (and park) the pooled frame for an artifact page; a no-op when it exists. */
+export declare function ensureArtifactFrame(key: string, src: string, title: string): void;

package/dist/artifacts/artifact-frame.js

@@ -0,0 +1,51 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useLayoutEffect, useState } from 'react';
+import { claimFrame, ensureFrame } from '../apps/app-preview-pool.js';
+import { ARTIFACT_FRAME_ALLOW, ARTIFACT_IFRAME_SANDBOX } from './frame-policy.js';
+/**
+ * The frame's canvas: a third-party page with no background of its own reads
+ * as a white page, as it would in a browser tab, in both themes.
+ */
+const ARTIFACT_CANVAS = 'bg-white';
+/**
+ * An artifact page. The frame lives in the project's frame pool
+ * (`@kortix/ui/apps`, shared with App previews): it loads once, in the
+ * background or on first show, and moves between the gallery card and the
+ * viewer without reloading. `frameKey` changes after a save, so an edit loads
+ * the new page. The ref is the slot (the viewer's full screen target).
+ */
+export const ArtifactFrame = forwardRef(function ArtifactFrame({ frameKey, src, title, className, preview }, ref) {
+    const [slot, setSlot] = useState(null);
+    const interactive = !preview;
+    const frameClass = `${className ?? ''} ${ARTIFACT_CANVAS}`;
+    useLayoutEffect(() => {
+        if (!slot)
+            return;
+        ensureArtifactFrame(frameKey, src, title);
+        const release = claimFrame(frameKey, slot, { className: frameClass, style: {}, interactive });
+        // The viewer hands the keyboard to the page, so a deck's arrow keys work at once.
+        if (interactive)
+            slot.querySelector('iframe')?.focus({ preventScroll: true });
+        return release;
+        // The URL is read once per key: a refetch must not reload the page.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [frameKey, slot, interactive, frameClass]);
+    return (_jsx("div", { ref: (node) => {
+            setSlot(node);
+            if (typeof ref === 'function')
+                ref(node);
+            else if (ref)
+                ref.current = node;
+        }, className: "absolute inset-0" }));
+});
+/** Create (and park) the pooled frame for an artifact page; a no-op when it exists. */
+export function ensureArtifactFrame(key, src, title) {
+    ensureFrame(key, src, {
+        title,
+        sandbox: ARTIFACT_IFRAME_SANDBOX,
+        allow: ARTIFACT_FRAME_ALLOW,
+        testid: 'artifact-frame',
+        referrerPolicy: 'no-referrer',
+    });
+}

package/dist/artifacts/artifact-session.d.ts

@@ -0,0 +1,18 @@
+/**
+ * An artifact in a chat: what the agent `show`ed when it handed one over. A
+ * live preview, its title and type. It is a link: on a session page the web
+ * app's link interceptor opens it in the session panel, like a Kortix App. A link
+ * the viewer cannot open (no access, flag off) renders `fallback` instead.
+ */
+export declare function ShowArtifactCard({ url, fallback }: {
+    url: string;
+    fallback: React.ReactNode;
+}): import("react").JSX.Element;
+/**
+ * An artifact in the session panel: the page itself (a doc read as its page),
+ * with its title, a way to the full viewer (where a doc is edited) and close.
+ */
+export declare function ArtifactPanelPreview({ url, onClose }: {
+    url: string;
+    onClose: () => void;
+}): import("react").JSX.Element;

package/dist/artifacts/artifact-session.js

@@ -0,0 +1,101 @@
+'use client';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getPublicArtifact } from '@kortix/sdk';
+import { useArtifact } from '@kortix/sdk/react';
+import { ArrowSquareOut, BrowserIcon, FileTextIcon, X } from '@phosphor-icons/react';
+import { useEffect, useState } from 'react';
+import { useLocalizedUiCatalog } from '../i18n/ui-catalog/use-localized-ui-catalog.js';
+import { Button } from '../primitives/button.js';
+import Hint from '../primitives/hint.js';
+import { useUiComponents, useUiRouter } from '../providers/ui-provider.js';
+import { ArtifactFrame } from './artifact-frame.js';
+import { artifactFrameKey, parseArtifactUrl } from './frame-policy.js';
+const COPY = {
+    open: 'Open',
+    openArtifact: 'Open in Artifacts',
+    close: 'Close',
+    doc: 'Doc',
+    page: 'Page',
+    unavailable: 'This artifact is not available to you.',
+};
+const TYPE_ICON = { doc: FileTextIcon, html: BrowserIcon };
+/** The artifact a URL names, as the caller may see it: a project artifact, or a public one. */
+function useShownArtifact(url) {
+    const ref = parseArtifactUrl(url);
+    const inProject = useArtifact(ref?.projectId ?? null, ref?.projectId ? ref.artifactId : null);
+    const [shared, setShared] = useState({ artifact: null, failed: false });
+    const publicId = ref && !ref.projectId ? ref.artifactId : null;
+    useEffect(() => {
+        if (!publicId)
+            return;
+        let live = true;
+        getPublicArtifact(publicId)
+            .then((a) => {
+            if (!live)
+                return;
+            if (!a)
+                return setShared({ artifact: null, failed: true });
+            setShared({
+                artifact: { title: a.title, type: a.type, src: a.content_url, frameKey: `artifact:${a.artifact_id}:${a.updated_at}`, href: null },
+                failed: false,
+            });
+        })
+            .catch(() => live && setShared({ artifact: null, failed: true }));
+        return () => {
+            live = false;
+        };
+    }, [publicId]);
+    if (!ref)
+        return { artifact: null, failed: true };
+    if (publicId)
+        return shared;
+    const detail = inProject.data;
+    if (!detail)
+        return { artifact: null, failed: inProject.isError };
+    return {
+        artifact: {
+            title: detail.title,
+            type: detail.type,
+            src: detail.version.view_url,
+            frameKey: artifactFrameKey(detail),
+            href: `/projects/${detail.project_id}/artifacts/${detail.artifact_id}`,
+        },
+        failed: false,
+    };
+}
+/**
+ * An artifact in a chat: what the agent `show`ed when it handed one over. A
+ * live preview, its title and type. It is a link: on a session page the web
+ * app's link interceptor opens it in the session panel, like a Kortix App. A link
+ * the viewer cannot open (no access, flag off) renders `fallback` instead.
+ */
+export function ShowArtifactCard({ url, fallback }) {
+    const copy = useLocalizedUiCatalog(COPY);
+    const { artifact, failed } = useShownArtifact(url);
+    if (failed)
+        return _jsx(_Fragment, { children: fallback });
+    const Icon = artifact ? TYPE_ICON[artifact.type] : FileTextIcon;
+    return (_jsxs("a", { href: url, target: "_blank", rel: "noopener noreferrer", "data-testid": "show-artifact-card", className: "group border-border bg-card hover:border-foreground/20 flex w-full max-w-xl flex-col overflow-hidden rounded-lg border text-left transition-colors", children: [_jsx("span", { className: "bg-muted relative block aspect-[16/9] w-full overflow-hidden border-b", children: artifact ? (_jsx(ArtifactFrame, { preview: true, 
+                    // Its own frame: the chat card keeps its preview while the panel shows the artifact.
+                    frameKey: `${artifact.frameKey}:chat`, src: artifact.src, title: artifact.title, className: "pointer-events-none absolute top-0 left-0 h-[400%] w-[400%] origin-top-left scale-25 border-0" })) : null }), _jsxs("span", { className: "flex items-center gap-3 p-3", children: [_jsx("span", { className: "bg-muted flex size-8 shrink-0 items-center justify-center rounded-md", children: _jsx(Icon, { className: "text-muted-foreground size-4" }) }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "text-foreground block truncate text-sm font-medium", children: artifact?.title ?? ' ' }), _jsx("span", { className: "text-muted-foreground block text-xs", children: artifact ? (artifact.type === 'doc' ? copy.doc : copy.page) : ' ' })] }), _jsx("span", { className: "text-muted-foreground group-hover:text-foreground shrink-0 text-xs font-medium transition-colors", children: copy.open })] })] }));
+}
+/**
+ * An artifact in the session panel: the page itself (a doc read as its page),
+ * with its title, a way to the full viewer (where a doc is edited) and close.
+ */
+export function ArtifactPanelPreview({ url, onClose }) {
+    // The host's full viewer (apps/web: the Artifacts viewer) for a project artifact.
+    const { ArtifactViewer } = useUiComponents();
+    const ref = parseArtifactUrl(url);
+    if (ArtifactViewer && ref?.projectId)
+        return _jsx(ArtifactViewer, { projectId: ref.projectId, artifactId: ref.artifactId, onClose: onClose });
+    return _jsx(ArtifactPagePreview, { url: url, onClose: onClose });
+}
+/** A public artifact, or a host without the viewer: the page itself, read-only. */
+function ArtifactPagePreview({ url, onClose }) {
+    const copy = useLocalizedUiCatalog(COPY);
+    const router = useUiRouter();
+    const { artifact, failed } = useShownArtifact(url);
+    const Icon = artifact ? TYPE_ICON[artifact.type] : FileTextIcon;
+    return (_jsxs("div", { className: "flex h-full min-h-0 flex-col", children: [_jsxs("div", { className: "flex h-10 shrink-0 items-center gap-2 border-b pr-1 pl-3", children: [_jsx(Icon, { className: "text-muted-foreground size-4 shrink-0", "aria-hidden": true }), _jsx("span", { className: "text-foreground min-w-0 flex-1 truncate text-sm font-medium", children: artifact?.title ?? '' }), artifact?.href ? (_jsx(Hint, { label: copy.openArtifact, side: "bottom", children: _jsx(Button, { size: "icon-sm", variant: "ghost", "aria-label": copy.openArtifact, onClick: () => router.push(artifact.href), children: _jsx(ArrowSquareOut, { className: "size-3.5" }) }) })) : null, _jsx(Hint, { label: copy.close, side: "bottom", children: _jsx(Button, { size: "icon-sm", variant: "ghost", "aria-label": copy.close, onClick: onClose, children: _jsx(X, { className: "size-3.5" }) }) })] }), _jsx("div", { className: "bg-muted relative min-h-0 flex-1", children: artifact ? (_jsx(ArtifactFrame, { frameKey: artifact.frameKey, src: artifact.src, title: artifact.title, className: "absolute inset-0 size-full border-0" })) : failed ? (_jsx("p", { className: "text-muted-foreground p-6 text-sm", children: copy.unavailable })) : null })] }));
+}

package/dist/artifacts/frame-policy.d.ts

@@ -0,0 +1,30 @@
+/**
+ * The iframe sandbox. It allows same-origin; the content server's CSP sandbox
+ * decides: an opaque origin on the API host, the page's own origin on the
+ * dedicated content host (ARTIFACT_CONTENT_URL), where embedded players work.
+ */
+export declare const ARTIFACT_IFRAME_SANDBOX = "allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox allow-modals allow-downloads";
+/** Features an embedded player in the page may use. */
+export declare const ARTIFACT_FRAME_ALLOW = "fullscreen; clipboard-write; autoplay; encrypted-media; picture-in-picture";
+/** Artifact frames share the Apps frame pool (`@kortix/ui/apps`); their keys start with this. */
+export declare const ARTIFACT_FRAME_PREFIX = "artifact:";
+/** One pooled frame per artifact state: a save (`updated_at`) or an old version gets its own. */
+export declare function artifactFrameKey(artifact: {
+    artifact_id: string;
+    updated_at: string;
+}, version?: string | null): string;
+/**
+ * Print a doc to PDF without leaving the page: its print view (`?print=1`)
+ * loads in a hidden frame and opens the print dialog for that frame alone. The
+ * page posts `artifact-printed` after the dialog closes; the frame then goes.
+ */
+export declare function printArtifact(viewUrl: string): void;
+/**
+ * The artifact an app link names: `/projects/<project>/artifacts/<artifact>`
+ * (the app viewer, on any Kortix host) or `/share/artifact/<artifact>` (a
+ * public link, no project). Null for any other URL.
+ */
+export declare function parseArtifactUrl(url: string): {
+    projectId: string | null;
+    artifactId: string;
+} | null;

package/dist/artifacts/frame-policy.js

@@ -0,0 +1,61 @@
+/**
+ * The iframe sandbox. It allows same-origin; the content server's CSP sandbox
+ * decides: an opaque origin on the API host, the page's own origin on the
+ * dedicated content host (ARTIFACT_CONTENT_URL), where embedded players work.
+ */
+export const ARTIFACT_IFRAME_SANDBOX = 'allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox allow-modals allow-downloads';
+/** Features an embedded player in the page may use. */
+export const ARTIFACT_FRAME_ALLOW = 'fullscreen; clipboard-write; autoplay; encrypted-media; picture-in-picture';
+/** Artifact frames share the Apps frame pool (`@kortix/ui/apps`); their keys start with this. */
+export const ARTIFACT_FRAME_PREFIX = 'artifact:';
+/** One pooled frame per artifact state: a save (`updated_at`) or an old version gets its own. */
+export function artifactFrameKey(artifact, version) {
+    return `${ARTIFACT_FRAME_PREFIX}${artifact.artifact_id}:${version ?? artifact.updated_at}`;
+}
+/**
+ * Print a doc to PDF without leaving the page: its print view (`?print=1`)
+ * loads in a hidden frame and opens the print dialog for that frame alone. The
+ * page posts `artifact-printed` after the dialog closes; the frame then goes.
+ */
+export function printArtifact(viewUrl) {
+    const frame = document.createElement('iframe');
+    frame.setAttribute('sandbox', ARTIFACT_IFRAME_SANDBOX);
+    frame.setAttribute('aria-hidden', 'true');
+    frame.tabIndex = -1;
+    frame.style.cssText = 'position:fixed;right:0;bottom:0;width:1px;height:1px;border:0;opacity:0;pointer-events:none';
+    const cleanup = () => {
+        window.removeEventListener('message', onMessage);
+        frame.remove();
+    };
+    const onMessage = (event) => {
+        if (event.source === frame.contentWindow && event.data?.kortix === 'artifact-printed')
+            cleanup();
+    };
+    window.addEventListener('message', onMessage);
+    // A dialog left open past this still prints; the frame is only cleanup.
+    window.setTimeout(cleanup, 10 * 60_000);
+    frame.src = `${viewUrl}?print=1`;
+    document.body.appendChild(frame);
+}
+const UUID = '[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}';
+const IN_PROJECT = new RegExp(`/projects/(${UUID})/artifacts/(${UUID})/?$`, 'i');
+const PUBLIC = new RegExp(`/share/artifact/(${UUID})/?$`, 'i');
+/**
+ * The artifact an app link names: `/projects/<project>/artifacts/<artifact>`
+ * (the app viewer, on any Kortix host) or `/share/artifact/<artifact>` (a
+ * public link, no project). Null for any other URL.
+ */
+export function parseArtifactUrl(url) {
+    let path;
+    try {
+        path = new URL(url, 'http://localhost').pathname;
+    }
+    catch {
+        return null;
+    }
+    const inProject = IN_PROJECT.exec(path);
+    if (inProject)
+        return { projectId: inProject[1].toLowerCase(), artifactId: inProject[2].toLowerCase() };
+    const shared = PUBLIC.exec(path);
+    return shared ? { projectId: null, artifactId: shared[1].toLowerCase() } : null;
+}

package/dist/artifacts/index.d.ts

@@ -0,0 +1,3 @@
+export { ARTIFACT_FRAME_ALLOW, ARTIFACT_FRAME_PREFIX, ARTIFACT_IFRAME_SANDBOX, artifactFrameKey, parseArtifactUrl, printArtifact, } from './frame-policy.js';
+export { ArtifactFrame, ensureArtifactFrame } from './artifact-frame.js';
+export { ArtifactPanelPreview, ShowArtifactCard } from './artifact-session.js';

package/dist/artifacts/index.js

@@ -0,0 +1,5 @@
+// Kortix Artifacts in any host: the frame policy and link parsing (server-safe),
+// the pooled page frame, and the session views (chat card, panel preview).
+export { ARTIFACT_FRAME_ALLOW, ARTIFACT_FRAME_PREFIX, ARTIFACT_IFRAME_SANDBOX, artifactFrameKey, parseArtifactUrl, printArtifact, } from './frame-policy.js';
+export { ArtifactFrame, ensureArtifactFrame } from './artifact-frame.js';
+export { ArtifactPanelPreview, ShowArtifactCard } from './artifact-session.js';

package/dist/browser/sandbox-browser-chrome.d.ts

@@ -27,7 +27,7 @@ export declare function parseAddressInput(value: string): string | null;
  * controls around it (`BrowserPanel`'s overflow menu, `AppPreview`'s viewer
  * actions and close) — the component is a fragment, so it slots between them.
  */
-export declare function SandboxAddressBar({ displayValue, hasPreview, isLoading, canGoBack, canGoForward, onBack, onForward, onReload, onHome, onNavigate, suggestions, placeholder, ariaLabel, inputRef, resetOnEscape, trailing, }: {
+export declare function SandboxAddressBar({ displayValue, hasPreview, isLoading, canGoBack, canGoForward, onBack, onForward, onReload, onHome, onNavigate, suggestions, placeholder, ariaLabel, inputRef, resetOnEscape, trailing, disabled, }: {
     /** The URL the bar shows at rest — the surface's current address. */
     displayValue: string;
     hasPreview: boolean;
@@ -58,6 +58,9 @@ export declare function SandboxAddressBar({ displayValue, hasPreview, isLoading,
     /** Actions on the open page, rendered at the address's trailing edge —
      *  `AppPreview` puts `Copy link` here. */
     trailing?: ReactNode;
+    /** The address takes no input (the session's computer is booting). Pair it
+     *  with `hasPreview={false}`, which disables the buttons. */
+    disabled?: boolean;
 }): import("react").JSX.Element;
 /**
  * The "still loading" overlay both preview surfaces paint over the iframe.

package/dist/browser/sandbox-browser-chrome.js

@@ -89,7 +89,7 @@ const NO_SUGGESTIONS = [];
  * controls around it (`BrowserPanel`'s overflow menu, `AppPreview`'s viewer
  * actions and close) — the component is a fragment, so it slots between them.
  */
-export function SandboxAddressBar({ displayValue, hasPreview, isLoading, canGoBack, canGoForward, onBack, onForward, onReload, onHome, onNavigate, suggestions = NO_SUGGESTIONS, placeholder, ariaLabel, inputRef, resetOnEscape = true, trailing, }) {
+export function SandboxAddressBar({ displayValue, hasPreview, isLoading, canGoBack, canGoForward, onBack, onForward, onReload, onHome, onNavigate, suggestions = NO_SUGGESTIONS, placeholder, ariaLabel, inputRef, resetOnEscape = true, trailing, disabled, }) {
     const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
     const [addressValue, setAddressValue] = useState(displayValue);
     const [isEditing, setIsEditing] = useState(false);
@@ -121,7 +121,7 @@ export function SandboxAddressBar({ displayValue, hasPreview, isLoading, canGoBa
         onNavigate(internal);
     }, [addressValue, onNavigate, suggestions]);
     const suggestionsId = useId();
-    return (_jsxs(_Fragment, { children: [_jsxs(ButtonGroup, { className: "shrink-0", children: [_jsx(Hint, { label: tI18nComplete.raw('text76900f1bfd16'), side: "bottom", children: _jsx(Button, { variant: "secondary", size: "icon", onClick: onBack, disabled: !hasPreview || !canGoBack, children: _jsx(ArrowLeft, { className: "size-4" }) }) }), _jsx(Hint, { label: tI18nComplete.raw('textf1c65e14817e'), side: "bottom", children: _jsx(Button, { variant: "secondary", size: "icon", onClick: onForward, disabled: !hasPreview || !canGoForward, children: _jsx(ArrowRight, { className: "size-4" }) }) })] }), _jsx("form", { onSubmit: handleAddressSubmit, className: "flex min-w-0 flex-1 items-center px-1", children: _jsxs(ButtonGroup, { className: "w-full min-w-0", children: [_jsx(Hint, { label: tI18nComplete.raw('text3a78695388b3'), side: "bottom", children: _jsx(Button, { type: "button", variant: "secondary", size: "icon", onClick: onHome, disabled: !hasPreview, "aria-label": tI18nComplete.raw('text3a78695388b3'), children: _jsx(Home, { className: "size-3.5" }) }) }), _jsxs("div", { className: cn('bg-muted flex h-7 min-w-0 flex-1 items-center gap-1 rounded-md border border-transparent px-2 text-xs tracking-tight transition-colors', addressError && 'border-kortix-red/60 focus-within:border-kortix-red/60 animate-shake'), children: [_jsxs("div", { className: "group/address relative flex h-full min-w-0 flex-1 items-center", children: [_jsx(Input, { ref: inputRef, type: "text", size: "xs", value: urlParts ? displayValue : addressValue, "aria-label": ariaLabel, list: suggestions.length ? suggestionsId : undefined, onChange: (e) => {
+    return (_jsxs(_Fragment, { children: [_jsxs(ButtonGroup, { className: "shrink-0", children: [_jsx(Hint, { label: tI18nComplete.raw('text76900f1bfd16'), side: "bottom", children: _jsx(Button, { variant: "secondary", size: "icon", onClick: onBack, disabled: !hasPreview || !canGoBack, children: _jsx(ArrowLeft, { className: "size-4" }) }) }), _jsx(Hint, { label: tI18nComplete.raw('textf1c65e14817e'), side: "bottom", children: _jsx(Button, { variant: "secondary", size: "icon", onClick: onForward, disabled: !hasPreview || !canGoForward, children: _jsx(ArrowRight, { className: "size-4" }) }) })] }), _jsx("form", { onSubmit: handleAddressSubmit, className: "flex min-w-0 flex-1 items-center px-1", children: _jsxs(ButtonGroup, { className: "w-full min-w-0", children: [_jsx(Hint, { label: tI18nComplete.raw('text3a78695388b3'), side: "bottom", children: _jsx(Button, { type: "button", variant: "secondary", size: "icon", onClick: onHome, disabled: !hasPreview, "aria-label": tI18nComplete.raw('text3a78695388b3'), children: _jsx(Home, { className: "size-3.5" }) }) }), _jsxs("div", { className: cn('bg-muted flex h-7 min-w-0 flex-1 items-center gap-1 rounded-md border border-transparent px-2 text-xs tracking-tight transition-colors', addressError && 'border-kortix-red/60 focus-within:border-kortix-red/60 animate-shake'), children: [_jsxs("div", { className: "group/address relative flex h-full min-w-0 flex-1 items-center", children: [_jsx(Input, { ref: inputRef, type: "text", size: "xs", disabled: disabled, value: urlParts ? displayValue : addressValue, "aria-label": ariaLabel, list: suggestions.length ? suggestionsId : undefined, onChange: (e) => {
                                                 setAddressValue(e.target.value);
                                                 if (addressError)
                                                     setAddressError(false);

package/dist/customize/agents/agent-cover-card.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+/**
+ * An Agents-page card led by the agent's pixel-mark cover. The cover gives
+ * every agent a face that is the same wherever the agent appears, so a long
+ * list is scanned by shape and tone before names are read.
+ */
+export declare function AgentCoverCard({ slug, href, onIntent, title, description, badges, meta, coverLabel, }: {
+    slug: string;
+    href: string;
+    onIntent?: () => void;
+    title: ReactNode;
+    description?: string | null;
+    badges?: ReactNode;
+    meta?: ReactNode;
+    /** A short pill on the cover's top-left corner — "Default". */
+    coverLabel?: string;
+}): import("react").JSX.Element;

package/dist/customize/agents/agent-cover-card.js

@@ -0,0 +1,13 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { UiLink as Link } from '../../providers/ui-provider.js';
+import { AgentMarkGlyph, agentMarkVars } from '../../internal/components/agent-mark.js';
+import { cn } from '../../internal/lib/utils.js';
+/**
+ * An Agents-page card led by the agent's pixel-mark cover. The cover gives
+ * every agent a face that is the same wherever the agent appears, so a long
+ * list is scanned by shape and tone before names are read.
+ */
+export function AgentCoverCard({ slug, href, onIntent, title, description, badges, meta, coverLabel, }) {
+    return (_jsxs(Link, { href: href, prefetch: true, onPointerEnter: onIntent, onFocus: onIntent, style: agentMarkVars(slug), className: cn('group bg-card border-border/60 flex flex-col overflow-hidden rounded-md border text-left', 'hover:border-border transition-[border-color] duration-(--duration-normal) ease-out', 'focus-visible:ring-ring/50 focus-visible:ring-2 focus-visible:outline-none'), children: [_jsxs("span", { className: "relative flex h-31 items-center justify-center bg-(--mark-tile)", children: [_jsx(AgentMarkGlyph, { slug: slug, size: 56 }), coverLabel ? (_jsx("span", { className: "bg-background/20 absolute top-2.5 left-2.5 rounded-sm px-2 py-0.5 text-xs font-medium text-(--mark-ink) backdrop-blur-sm", children: coverLabel })) : null] }), _jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-1 px-3.5 pt-3 pb-3.5", children: [_jsxs("span", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "text-foreground truncate text-sm font-medium", children: title }), badges] }), description ? (_jsx("span", { className: "text-muted-foreground line-clamp-2 text-xs text-pretty", children: description })) : null, meta ? (_jsx("span", { className: "text-muted-foreground mt-auto flex flex-wrap items-center gap-x-2 gap-y-0.5 pt-1.5 text-xs", children: meta })) : null] })] }));
+}