@elytracms/studio 0.0.1

package/convex/sync.ts

@@ -0,0 +1,322 @@
+import { makeFunctionReference } from 'convex/server'
+import type { GenericActionCtx, GenericDataModel } from 'convex/server'
+import { v } from 'convex/values'
+import { verifyCliToken } from '@elytracms/operations'
+import type { VerifiedCliToken } from '@elytracms/operations'
+import type { CliTokenRepository, PersistenceAdapter } from '@elytracms/persistence'
+import { httpAction, internalQuery } from './functions'
+import type { QueryCtx } from './functions'
+import type { ProjectRole } from './guard'
+
+/**
+ * EC-157 — the builder-sync HTTP endpoint. Serves the contract fixed in
+ * `@elytracms/export-sync`'s `registrySyncEndpoints` from this deployment's
+ * `.convex.site` origin, so a host repo's `builder check` / `typegen` run against
+ * the real builder instead of a `fetchImpl` double:
+ *
+ * - `GET  /api/projects/:projectId/registry-sync/snapshot?mode=&environment=` — the
+ *   typegen/check snapshot: locale config and the graph revision for the requested
+ *   mode. Collection schemas and routes/redirects are config-owned (EC-183/EC-207,
+ *   AD-11) — the CLI reads them from `elytra.config.ts`, not this snapshot.
+ *
+ * ## Package-shipped, deployment-agnostic (EC-223/EC-252)
+ *
+ * This module ships inside `@elytracms/studio`; the consumer's `convex/sync.ts` is a
+ * one-line `export *` shim. It therefore NEVER imports the per-deployment
+ * `./_generated/api` — it addresses sibling functions by STRING ref via
+ * `makeFunctionReference` (resolved against the consumer's deployment), exactly like
+ * `publishing.ts`. That decoupling is also what makes it typecheck under a cross-repo
+ * `link:` loop: there is no `ApiFromModules` inference to unify across two `convex`
+ * instances (the bug EC-252 fixes — a copied `sync.ts` collapsed `api.cliTokens.byHash`
+ * to `{}`).
+ *
+ * ## Auth (EC-150 CLI tokens)
+ *
+ * The endpoint requires `Authorization: Bearer <ect_…>`. Tokens are verified by
+ * `verifyCliToken` (`@elytracms/operations`): the presented plaintext is SHA-256-hashed
+ * and looked up via `cliTokens.byHash`; unknown and revoked tokens are rejected with
+ * a 401. Single-tenant (EC-182): a deployment hosts one project, so a token carries
+ * no per-project scope — it just needs at least the `viewer` capability the snapshot
+ * read requires.
+ *
+ * ## Error contract
+ *
+ * Failures are structured JSON bodies — `{ error: { code, message, issues? } }` —
+ * matching `RegistrySyncErrorBody` in `@elytracms/export-sync`; even unexpected
+ * exceptions return a structured body, never an opaque crash page. The CLI surfaces
+ * them as `transport` issues.
+ */
+
+type ActionCtx = GenericActionCtx<GenericDataModel>
+
+// Sibling functions are addressed by STRING ref (resolved against the consumer's
+// deployment), never `./_generated/api` — see the module note. The explicit arg +
+// return generics keep the call sites typed without `ApiFromModules` inference.
+type CliTokenRow = {
+  tokenId: string
+  label: string
+  tokenHash: string
+  createdAt: string
+  revokedAt?: string
+}
+const cliTokensByHash = makeFunctionReference<
+  'query',
+  { tokenHash: string },
+  CliTokenRow | null
+>('cliTokens:byHash')
+const syncExportSnapshot = makeFunctionReference<
+  'query',
+  { projectId: string; mode: SnapshotMode; environment: string },
+  BuilderSnapshot
+>('sync:exportSnapshot')
+
+// --- Structured responses ----------------------------------------------------
+
+interface SyncErrorIssue {
+  code: string
+  message: string
+  componentId?: string
+}
+
+function jsonResponse(value: unknown, status = 200): Response {
+  return new Response(JSON.stringify(value), {
+    status,
+    headers: { 'content-type': 'application/json' },
+  })
+}
+
+function errorResponse(
+  status: number,
+  code: string,
+  message: string,
+  issues?: SyncErrorIssue[],
+): Response {
+  return jsonResponse(
+    { error: { code, message, ...(issues && issues.length > 0 ? { issues } : {}) } },
+    status,
+  )
+}
+
+// --- Routing -----------------------------------------------------------------
+
+const PROJECTS_PREFIX = '/api/projects/'
+
+type SyncEndpoint = 'snapshot'
+
+interface SyncRoute {
+  projectId: string
+  endpoint: SyncEndpoint
+}
+
+/** Parse `/api/projects/:projectId/registry-sync/<rest>` (Convex routes by prefix only). */
+function parseSyncRoute(method: string, pathname: string): SyncRoute | undefined {
+  if (!pathname.startsWith(PROJECTS_PREFIX)) return undefined
+  const segments = pathname
+    .slice(PROJECTS_PREFIX.length)
+    .split('/')
+    .map((segment) => decodeURIComponent(segment))
+  const [projectId, scope, ...rest] = segments
+  if (!projectId || scope !== 'registry-sync') return undefined
+  const tail = rest.join('/')
+  if (tail === 'snapshot' && method === 'GET') return { projectId, endpoint: 'snapshot' }
+  return undefined
+}
+
+// --- Token auth (EC-150) -------------------------------------------------------
+
+const ROLE_RANK: Record<ProjectRole, number> = { viewer: 0, editor: 1, admin: 2 }
+
+/** What each endpoint requires; the snapshot read is `viewer`-level (EC-150). */
+const REQUIRED_ROLE: Record<SyncEndpoint, ProjectRole> = {
+  snapshot: 'viewer',
+}
+
+/**
+ * A {@link CliTokenRepository} over this deployment's `cliTokens` table, narrowed to
+ * the verification path. `verifyCliToken` only ever calls `findByHash`; the write
+ * methods live behind the admin-only operations layer and are not reachable here.
+ */
+function cliTokenRepository(ctx: ActionCtx): CliTokenRepository {
+  const unsupported = (method: string) =>
+    Promise.reject(new Error(`cli-token ${method} is not available on the sync endpoint`))
+  return {
+    createToken: () => unsupported('createToken'),
+    listTokens: () => unsupported('listTokens'),
+    revokeToken: () => unsupported('revokeToken'),
+    async findByHash(tokenHash) {
+      const doc = await ctx.runQuery(cliTokensByHash, { tokenHash })
+      if (!doc) return undefined
+      return {
+        id: doc.tokenId,
+        label: doc.label,
+        tokenHash: doc.tokenHash,
+        createdAt: doc.createdAt,
+        ...(doc.revokedAt ? { revokedAt: doc.revokedAt } : {}),
+      }
+    },
+  }
+}
+
+type AuthResult = { ok: true; verified: VerifiedCliToken } | { ok: false; response: Response }
+
+/** Resolve and verify the Bearer CLI token, then check it grants the required role. */
+async function authorize(
+  ctx: ActionCtx,
+  request: Request,
+  route: SyncRoute,
+): Promise<AuthResult> {
+  const header = request.headers.get('authorization')
+  if (!header || !header.toLowerCase().startsWith('bearer ')) {
+    return {
+      ok: false,
+      response: errorResponse(
+        401,
+        'unauthorized',
+        'Missing CLI token — send "Authorization: Bearer <token>" (issue one with tokens.issue).',
+      ),
+    }
+  }
+  const token = header.slice('bearer '.length).trim()
+  // verifyCliToken only reads `adapter.cliTokens`; the rest of the adapter surface
+  // is deliberately absent here (the assertion documents exactly that contract).
+  const adapter = { cliTokens: cliTokenRepository(ctx) } as PersistenceAdapter
+  const verified = await verifyCliToken(adapter, token)
+  if (verified === null) {
+    return {
+      ok: false,
+      response: errorResponse(401, 'unauthorized', 'Unknown, malformed, or revoked CLI token.'),
+    }
+  }
+  if (ROLE_RANK[verified.role] < ROLE_RANK[REQUIRED_ROLE[route.endpoint]]) {
+    return {
+      ok: false,
+      response: errorResponse(
+        403,
+        'forbidden',
+        `This endpoint requires the "${REQUIRED_ROLE[route.endpoint]}" role (token grants "${verified.role}").`,
+      ),
+    }
+  }
+  return { ok: true, verified }
+}
+
+// --- The HTTP action ------------------------------------------------------------
+
+export const registrySync = httpAction(async (ctx, request) => {
+  const pathname = new URL(request.url).pathname
+  try {
+    const route = parseSyncRoute(request.method, pathname)
+    if (!route) {
+      return errorResponse(
+        404,
+        'not-found',
+        `No registry-sync endpoint matches ${request.method} ${pathname}.`,
+      )
+    }
+    const auth = await authorize(ctx, request, route)
+    if (!auth.ok) return auth.response
+    const { projectId } = route
+
+    // snapshot
+    const params = new URL(request.url).searchParams
+    const mode = params.get('mode') ?? 'published'
+    if (mode !== 'published' && mode !== 'draft') {
+      return errorResponse(
+        400,
+        'invalid-request',
+        `Invalid mode "${mode}" (expected published|draft).`,
+      )
+    }
+    const environment = params.get('environment') ?? 'production'
+    const snapshot = await ctx.runQuery(syncExportSnapshot, {
+      projectId,
+      mode,
+      environment,
+    })
+    return jsonResponse(snapshot)
+  } catch (cause) {
+    // Even unexpected failures keep the structured contract — never an opaque crash.
+    return errorResponse(
+      500,
+      'internal',
+      `Registry sync failed: ${cause instanceof Error ? cause.message : String(cause)}`,
+    )
+  }
+})
+
+// --- Typegen/check snapshot -----------------------------------------------------
+
+type SnapshotMode = 'published' | 'draft'
+
+interface GraphRevisionPayload {
+  revision: number
+  serializedGraph: string
+}
+
+interface BuilderSnapshot {
+  projectId: string
+  mode: SnapshotMode
+  environment: string
+  project: null
+  localeConfig: { default: string; locales: string[] }
+  collections: never[]
+  graph: GraphRevisionPayload | null
+}
+
+/** The publishing-state-pinned revision (single-environment; mirrors `delivery.ts`). */
+async function loadPinnedGraph(ctx: QueryCtx): Promise<GraphRevisionPayload | null> {
+  const state = await ctx.db.query('publishingState').first()
+  const pinned = state?.status === 'published' ? state.publishedRevision : undefined
+  if (pinned === undefined) return null
+  const row = await ctx.db
+    .query('graphRevisions')
+    .withIndex('by_revision', (q) => q.eq('revision', pinned))
+    .first()
+  return row ? { revision: row.revision, serializedGraph: row.serializedGraph } : null
+}
+
+async function loadLatestGraph(ctx: QueryCtx): Promise<GraphRevisionPayload | null> {
+  const row = await ctx.db
+    .query('graphRevisions')
+    .withIndex('by_revision')
+    .order('desc')
+    .first()
+  return row ? { revision: row.revision, serializedGraph: row.serializedGraph } : null
+}
+
+/**
+ * Everything `builder typegen`/`builder check` need from live builder state, in the
+ * `BuilderSnapshot` wire shape of `@elytracms/export-sync`'s `createHttpBuilderSource`.
+ * Unlike `delivery:snapshot` this is token-gated and serves exactly one graph per
+ * request: published = the pinned revision for `environment`, draft = latest.
+ * Component manifests are code-owned, so the snapshot no longer carries them.
+ */
+export const exportSnapshot = internalQuery({
+  args: {
+    projectId: v.string(),
+    mode: v.union(v.literal('published'), v.literal('draft')),
+    environment: v.string(),
+  },
+  handler: async (ctx, { projectId, mode, environment }): Promise<BuilderSnapshot> => {
+    // `environment` is a vestigial wire-compat field on the CLI snapshot contract
+    // (EC-179 §2): a deployment IS one environment, so the pinned read is single-row.
+    const graph = mode === 'published' ? await loadPinnedGraph(ctx) : await loadLatestGraph(ctx)
+
+    // AD-11 (EC-182/EC-183/EC-207): project identity, locale config, CMS
+    // collection schemas, AND routes/redirects are all config-owned —
+    // `builder typegen`/`check` run in the consuming repo and read them from
+    // `elytra.config.ts`, not the wire. The DB carries only data (documents,
+    // assets, graph). `project`/`localeConfig`/`collections` stay in the wire
+    // shape as config-sourced placeholders until the CLI reads config directly
+    // (C1) — the snapshot no longer carries a schema or a route table to return.
+    return {
+      projectId,
+      mode,
+      environment,
+      project: null,
+      localeConfig: { default: 'en', locales: ['en'] },
+      collections: [],
+      graph,
+    }
+  },
+})

package/convex/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "noEmit": true,
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "jsx": "react-jsx",
+    "skipLibCheck": true,
+    "types": ["node"]
+  },
+  "include": ["./**/*.ts"]
+}

package/convex/users.ts

@@ -0,0 +1,23 @@
+import { getAuthUserId } from '@convex-dev/auth/server'
+import { query } from './functions'
+
+/**
+ * Current-user lookup (EC-150). The Convex `AuthAdapter` implementation calls
+ * this after sign-in (and on session restore) to materialize the studio's
+ * `AuthSession`. Returns `null` when the caller is unauthenticated — never an
+ * error, so the adapter can treat it as "signed out".
+ */
+export const me = query({
+  args: {},
+  handler: async (ctx) => {
+    const userId = await getAuthUserId(ctx)
+    if (userId === null) return null
+    const user = await ctx.db.get(userId)
+    if (user === null) return null
+    return {
+      id: String(userId),
+      email: user.email ?? '',
+      ...(user.name ? { name: user.name } : {}),
+    }
+  },
+})

package/convex/webhooks.ts

@@ -0,0 +1,85 @@
+import { internalActionGeneric } from 'convex/server'
+import { v } from 'convex/values'
+
+/**
+ * EC-146 instant publish — Convex-side webhook delivery variant.
+ *
+ * The v1 dispatcher (`src/lib/webhooks`) runs in the browser next to the
+ * operations client and POSTs to the host directly (CORS + bundle-visible
+ * secret, documented there). For Convex-backed deployments this action keeps
+ * the secret server-side instead: `publishing:publish` / `publishing:unpublish`
+ * schedule it via `ctx.scheduler.runAfter(0, internal.webhooks.deliver, …)`
+ * (EC-180) with the already-computed tag set, and the action signs + POSTs from
+ * the Convex runtime. No CORS applies and the secret lives in Convex env config.
+ *
+ * It is an **internal** action: only server-side callers (the scheduler) may
+ * invoke it — a secret-signing HTTP emitter must never be client-callable.
+ *
+ * Environment (set via `npx convex env set …`):
+ * - `CANVAS_REVALIDATE_ENDPOINT` — the host's revalidate route URL
+ * - `CANVAS_REVALIDATE_SECRET`   — shared HMAC secret (= host `REVALIDATE_SECRET`)
+ * - `CANVAS_PROJECT_SCOPE`        — the host's `cache.scope` (= `ELYTRA_PROJECT_ID`),
+ *   read by the publishing mutations to scope the sweep tag (`p:<scope>:project`)
+ *
+ * Signature scheme mirrors `src/lib/webhooks/signing.ts` and is verified by
+ * `@elytracms/next`'s `evaluateRevalidateRequest`: HMAC-SHA256 over the exact
+ * raw JSON body, hex-encoded, sent as `x-elytra-signature: sha256=<hex>`.
+ * Uses Web Crypto (`crypto.subtle`), which the Convex runtime provides.
+ */
+
+const SIGNATURE_HEADER = 'x-elytra-signature'
+
+function toHex(buffer: ArrayBuffer): string {
+  return [...new Uint8Array(buffer)].map((byte) => byte.toString(16).padStart(2, '0')).join('')
+}
+
+async function signBody(rawBody: string, secret: string): Promise<string> {
+  const encoder = new TextEncoder()
+  const key = await crypto.subtle.importKey(
+    'raw',
+    encoder.encode(secret),
+    { name: 'HMAC', hash: 'SHA-256' },
+    false,
+    ['sign'],
+  )
+  return `sha256=${toHex(await crypto.subtle.sign('HMAC', key, encoder.encode(rawBody)))}`
+}
+
+export const deliver = internalActionGeneric({
+  args: {
+    projectId: v.string(),
+    /** Operation name carried as the webhook `event` (e.g. `publishing.publish`). */
+    event: v.string(),
+    /** Fully-formatted, scoped Next tag strings (see src/lib/webhooks/tags.ts). */
+    tags: v.array(v.string()),
+  },
+  handler: async (_ctx, args) => {
+    // The Convex runtime exposes deployment env vars on `process.env`; this
+    // tsconfig has no Node types, so reach it via `globalThis`.
+    const env =
+      (globalThis as { process?: { env?: Record<string, string | undefined> } }).process?.env ?? {}
+    const endpoint = env['CANVAS_REVALIDATE_ENDPOINT']
+    const secret = env['CANVAS_REVALIDATE_SECRET']
+    if (!endpoint || !secret) {
+      // Unconfigured deployments are a visible no-op, never an error — local
+      // dev must not depend on a reachable host site.
+      return { delivered: false as const, reason: 'unconfigured' as const }
+    }
+
+    const rawBody = JSON.stringify({
+      projectId: args.projectId,
+      event: args.event,
+      tags: args.tags,
+      timestamp: new Date().toISOString(),
+    })
+    const response = await fetch(endpoint, {
+      method: 'POST',
+      headers: {
+        'content-type': 'application/json',
+        [SIGNATURE_HEADER]: await signBody(rawBody, secret),
+      },
+      body: rawBody,
+    })
+    return { delivered: response.ok, status: response.status }
+  },
+})

package/dist/components/assets/asset-library.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Asset library surface (EC-151, EC-152): file picker + drag-and-drop uploads
+ * with visible progress/failure/retry, a searchable grid of stored assets
+ * (filename/alt/title), metadata editing (alt, title — persisted through the
+ * operations asset facade), and reference-respecting deletion (usage count +
+ * block-or-confirm). All storage access goes through the persistence adapter
+ * via the assets store. Each card answers "where is this asset used?" via the
+ * shared references panel (EC-172); `focusAssetId` (the `?asset=` deep-link
+ * param) scrolls that card into view and opens its references dialog.
+ */
+export declare function AssetLibrary({ projectId, focusAssetId, }: {
+    projectId: string;
+    focusAssetId?: string;
+}): import("react").JSX.Element;

package/dist/components/assets/asset-library.js

@@ -0,0 +1,191 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { AlertTriangle, ImageIcon, Link2, Pencil, RotateCcw, Search, Trash2, Upload, X, } from 'lucide-react';
+import { useEffect, useRef, useState } from 'react';
+import { buildAssetReferenceImpact } from '@elytracms/studio/lib/references';
+import { cn } from '@elytracms/studio/lib/utils';
+import { ReferenceImpactRows } from '../cms/reference-confirm';
+import { ReferencesPanel } from '../references/references-panel';
+import { Badge, Button, Code, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, Field, Grid, Heading, Input, Panel, PanelBody, PanelHeader, Row, Spacer, Stack, Text, } from '@elytracms/studio/ui';
+import { filterAssets } from './asset-search';
+import { useAssets } from './assets-store';
+/**
+ * Asset library surface (EC-151, EC-152): file picker + drag-and-drop uploads
+ * with visible progress/failure/retry, a searchable grid of stored assets
+ * (filename/alt/title), metadata editing (alt, title — persisted through the
+ * operations asset facade), and reference-respecting deletion (usage count +
+ * block-or-confirm). All storage access goes through the persistence adapter
+ * via the assets store. Each card answers "where is this asset used?" via the
+ * shared references panel (EC-172); `focusAssetId` (the `?asset=` deep-link
+ * param) scrolls that card into view and opens its references dialog.
+ */
+export function AssetLibrary({ projectId, focusAssetId, }) {
+    const store = useAssets();
+    const fileInputRef = useRef(null);
+    const [dragging, setDragging] = useState(false);
+    const [query, setQuery] = useState('');
+    const onPick = (event) => {
+        if (event.target.files)
+            store.upload([...event.target.files]);
+        event.target.value = '';
+    };
+    const onDrop = (event) => {
+        event.preventDefault();
+        setDragging(false);
+        if (event.dataTransfer.files.length > 0)
+            store.upload([...event.dataTransfer.files]);
+    };
+    if (store.status === 'error') {
+        return (_jsxs(Stack, { gap: "2", className: "p-6", "data-testid": "assets-error", children: [_jsxs(Row, { gap: "2", children: [_jsx(AlertTriangle, { className: "size-4 text-destructive" }), _jsx(Text, { weight: "semibold", children: "Assets failed to load" })] }), _jsx(Text, { size: "sm", tone: "muted", children: store.errorMessage ?? 'The persistence backend is unreachable.' }), _jsx(Row, { children: _jsxs(Button, { variant: "outline", size: "sm", onClick: () => void store.refresh(), children: [_jsx(RotateCcw, {}), " Retry"] }) })] }));
+    }
+    return (_jsxs(Stack, { gap: "4", className: cn('flex-1 p-4 sm:p-6', dragging && 'outline-2 outline-dashed outline-primary/60 -outline-offset-4'), onDragOver: (event) => {
+            event.preventDefault();
+            setDragging(true);
+        }, onDragLeave: () => setDragging(false), onDrop: onDrop, "data-testid": "asset-library", children: [_jsxs(Row, { gap: "2", children: [_jsx(Heading, { level: 2, size: "h2", children: "Assets" }), _jsx(Badge, { variant: "outline", children: store.assets.length }), _jsx(Spacer, {}), _jsx(AssetSearchInput, { value: query, onChange: setQuery }), _jsx("input", { ref: fileInputRef, type: "file", multiple: true, className: "hidden", onChange: onPick, "data-testid": "asset-file-input" }), _jsxs(Button, { size: "sm", onClick: () => fileInputRef.current?.click(), children: [_jsx(Upload, {}), " Upload"] })] }), _jsx(DropHint, { visible: dragging || store.assets.length === 0 }), store.uploads.length > 0 ? (_jsxs(Panel, { "data-testid": "upload-queue", children: [_jsx(PanelHeader, { children: _jsx(Text, { size: "xs", weight: "semibold", tone: "muted", children: "Uploads" }) }), _jsx(PanelBody, { className: "divide-y divide-border p-0", children: store.uploads.map((entry) => (_jsx(UploadRow, { entry: entry, onRetry: () => store.retryUpload(entry.id), onDismiss: () => store.dismissUpload(entry.id) }, entry.id))) })] })) : null, store.status === 'loading' ? (_jsx(Text, { size: "sm", tone: "muted", children: "Loading assets\u2026" })) : (_jsx(AssetGrid, { assets: filterAssets(store.assets, query), filtered: query.trim().length > 0, projectId: projectId, focusAssetId: focusAssetId }))] }));
+}
+/** Named search primitive over filename / alt / title (EC-152). */
+function AssetSearchInput({ value, onChange, }) {
+    return (_jsxs("span", { className: "relative", children: [_jsx(Search, { className: "pointer-events-none absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" }), _jsx(Input, { value: value, onChange: (e) => onChange(e.target.value), placeholder: "Search assets\u2026", "aria-label": "Search assets", className: "w-56 pl-8", "data-testid": "asset-search" })] }));
+}
+/** Persistent drop affordance; doubles as the empty state. */
+function DropHint({ visible }) {
+    return (_jsxs(Stack, { gap: "1", align: "center", className: cn('rounded-lg border border-dashed border-border p-6 text-center', !visible && 'hidden sm:flex'), children: [_jsx(ImageIcon, { className: "size-5 text-muted-foreground" }), _jsx(Text, { size: "sm", tone: "muted", children: "Drop files anywhere to upload, or use the Upload button." })] }));
+}
+const PHASE_LABEL = {
+    idle: 'queued',
+    preparing: 'preparing',
+    uploading: 'uploading',
+    confirming: 'saving metadata',
+    done: 'done',
+    failed: 'failed',
+};
+/** One in-flight upload: progress while transferring, explicit failure + retry. */
+function UploadRow({ entry, onRetry, onDismiss, }) {
+    const { state } = entry;
+    const failed = state.phase === 'failed';
+    return (_jsxs(Stack, { gap: "1", className: "px-3 py-2", "data-testid": "upload-row", children: [_jsxs(Row, { gap: "2", children: [_jsx(Text, { size: "sm", weight: "medium", className: "min-w-0 flex-1 truncate", children: entry.filename }), _jsxs(Badge, { variant: failed ? 'error' : state.phase === 'done' ? 'success' : 'info', children: [PHASE_LABEL[state.phase], state.attempt > 1 ? ` · attempt ${state.attempt}` : ''] }), failed ? (_jsxs(_Fragment, { children: [state.failure?.retryable !== false ? (_jsxs(Button, { variant: "outline", size: "sm", onClick: onRetry, "data-testid": "upload-retry", children: [_jsx(RotateCcw, {}), " Retry"] })) : null, _jsx(Button, { variant: "ghost", size: "icon-sm", onClick: onDismiss, "aria-label": "Dismiss upload", children: _jsx(X, {}) })] })) : null] }), failed ? (_jsxs(Text, { size: "xs", tone: "muted", "data-testid": "upload-error", children: [state.failure?.stage, ": ", state.failure?.message] })) : (_jsx(ProgressBar, { value: state.progress }))] }));
+}
+/** Named progress primitive for byte transfer. */
+function ProgressBar({ value }) {
+    return (_jsx("span", { className: "block h-1.5 w-full overflow-hidden rounded-full bg-muted", children: _jsx("span", { className: "block h-full rounded-full bg-primary transition-[width]", style: { width: `${Math.round(value * 100)}%` } }) }));
+}
+function AssetGrid({ assets, filtered, projectId, focusAssetId, }) {
+    if (assets.length === 0) {
+        // The unfiltered empty state is the DropHint above; the *filtered* empty
+        // state must say so explicitly (deterministic, reproducible).
+        return filtered ? (_jsx(Text, { size: "sm", tone: "muted", "data-testid": "asset-search-empty", children: "No assets match your search." })) : null;
+    }
+    return (_jsx(Grid, { minItemWidth: "220px", gap: "3", "data-testid": "asset-grid", children: assets.map((asset) => (_jsx(AssetCard, { asset: asset, projectId: projectId, focused: asset.id === focusAssetId }, asset.id))) }));
+}
+function formatBytes(byteSize) {
+    if (byteSize < 1024)
+        return `${byteSize} B`;
+    if (byteSize < 1024 * 1024)
+        return `${(byteSize / 1024).toFixed(1)} KB`;
+    return `${(byteSize / (1024 * 1024)).toFixed(1)} MB`;
+}
+function AssetCard({ asset, projectId, focused, }) {
+    const cardRef = useRef(null);
+    useEffect(() => {
+        if (focused)
+            cardRef.current?.scrollIntoView({ block: 'center', behavior: 'smooth' });
+    }, [focused]);
+    return (_jsx("div", { ref: cardRef, children: _jsxs(Panel, { className: cn('overflow-hidden', focused && 'ring-2 ring-primary/70'), "data-testid": "asset-card", children: [_jsx(AssetThumbnail, { asset: asset }), _jsxs(Stack, { gap: "1", className: "p-3", children: [_jsx(Text, { size: "sm", weight: "medium", className: "truncate", title: asset.filename, children: asset.title ?? asset.filename }), asset.title ? (_jsx(Text, { size: "xs", tone: "muted", className: "truncate", children: asset.filename })) : null, _jsx(Text, { size: "xs", tone: asset.alt ? 'muted' : 'subtle', className: "truncate", "data-testid": "asset-alt", children: asset.alt ? `Alt: ${asset.alt}` : 'No alt text' }), _jsxs(Row, { gap: "1", wrap: true, children: [_jsx(Code, { tone: "muted", children: asset.contentType }), asset.width && asset.height ? (_jsxs(Code, { tone: "muted", children: [asset.width, "\u00D7", asset.height] })) : null, _jsx(Code, { tone: "muted", children: formatBytes(asset.byteSize) })] }), _jsxs(Row, { gap: "1", children: [_jsx(Code, { tone: "muted", className: "min-w-0 flex-1 truncate", children: asset.id }), _jsx(AssetReferencesButton, { asset: asset, projectId: projectId, autoOpen: focused }), _jsx(EditAssetButton, { asset: asset }), _jsx(DeleteAssetButton, { asset: asset })] })] })] }) }));
+}
+/**
+ * "Where is this asset used?" (EC-172): the shared references panel, inbound
+ * over the EC-155 index, hosted in a dialog per asset card.
+ */
+function AssetReferencesButton({ asset, projectId, autoOpen, }) {
+    const [open, setOpen] = useState(false);
+    useEffect(() => {
+        if (autoOpen)
+            setOpen(true);
+    }, [autoOpen]);
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": `References of ${asset.filename}`, onClick: () => setOpen(true), "data-testid": "asset-references", children: _jsx(Link2, {}) }), _jsx(Dialog, { open: open, onOpenChange: setOpen, children: _jsxs(DialogContent, { className: "max-w-lg", children: [_jsxs(DialogHeader, { children: [_jsxs(DialogTitle, { children: ["Used by \u2014 ", asset.title ?? asset.filename] }), _jsx(DialogDescription, { children: "Everything referencing this asset, with deep links to the exact field or node." })] }), open ? (_jsx(ReferencesPanel, { projectId: projectId, target: { type: 'asset', id: asset.id } })) : null] }) })] }));
+}
+/**
+ * Metadata editing (EC-152): alt + title, persisted through the operations
+ * asset facade (`assets.upsert`). Failures render in the dialog — never a
+ * silent loss.
+ */
+function EditAssetButton({ asset }) {
+    const store = useAssets();
+    const [open, setOpen] = useState(false);
+    const [alt, setAlt] = useState('');
+    const [title, setTitle] = useState('');
+    const [error, setError] = useState(null);
+    const [busy, setBusy] = useState(false);
+    const openDialog = () => {
+        setAlt(asset.alt ?? '');
+        setTitle(asset.title ?? '');
+        setError(null);
+        setOpen(true);
+    };
+    const save = async () => {
+        setBusy(true);
+        setError(null);
+        const result = await store.updateMetadata(asset.id, { alt, title });
+        setBusy(false);
+        if (result.ok)
+            setOpen(false);
+        else
+            setError(result.message);
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": `Edit ${asset.filename}`, onClick: openDialog, "data-testid": "asset-edit", children: _jsx(Pencil, {}) }), _jsx(Dialog, { open: open, onOpenChange: setOpen, children: _jsxs(DialogContent, { className: "max-w-md", children: [_jsxs(DialogHeader, { children: [_jsxs(DialogTitle, { children: ["Edit ", asset.filename] }), _jsx(DialogDescription, { children: "Alt text flows through the delivery shape into rendered markup; the title is the library display name." })] }), _jsx(Field, { label: "Alt text", htmlFor: `asset-alt-${asset.id}`, children: _jsx(Input, { id: `asset-alt-${asset.id}`, value: alt, onChange: (e) => setAlt(e.target.value), placeholder: "Describe the image\u2026", "data-testid": "asset-edit-alt" }) }), _jsx(Field, { label: "Title", htmlFor: `asset-title-${asset.id}`, children: _jsx(Input, { id: `asset-title-${asset.id}`, value: title, onChange: (e) => setTitle(e.target.value), placeholder: asset.filename, "data-testid": "asset-edit-title" }) }), error ? (_jsx(Text, { size: "sm", className: "text-destructive", "data-testid": "asset-edit-error", children: error })) : null, _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: () => setOpen(false), disabled: busy, children: "Cancel" }), _jsx(Button, { size: "sm", onClick: () => void save(), disabled: busy, "data-testid": "asset-edit-save", children: "Save" })] })] }) })] }));
+}
+/** Image preview from the stored serve URL; icon fallback for other types. */
+function AssetThumbnail({ asset }) {
+    const isImage = asset.contentType.startsWith('image/');
+    // In-memory/opaque locators (memory://, convex://) are not fetchable by <img>.
+    const resolvable = asset.url?.startsWith('http') ?? false;
+    if (isImage && asset.url && resolvable) {
+        return (_jsx("img", { src: asset.url, alt: asset.alt ?? asset.filename, className: "aspect-video w-full bg-muted object-cover" }));
+    }
+    return (_jsx("span", { className: "grid aspect-video w-full place-items-center bg-muted text-muted-foreground", children: _jsx(ImageIcon, { className: "size-6" }) }));
+}
+/**
+ * Reference-respecting delete (EC-151, EC-202): the dialog enumerates the exact
+ * inbound references — index-accurate (EC-155), with deep links to the field or
+ * node — using the shared EC-173 impact rows. Deleting a referenced asset is
+ * weak-by-default (allowed, with an explicit "delete anyway"): every reference
+ * dangles into a visible validation issue rather than silently breaking.
+ */
+function DeleteAssetButton({ asset }) {
+    const store = useAssets();
+    const [open, setOpen] = useState(false);
+    const [usages, setUsages] = useState(null);
+    const [error, setError] = useState(null);
+    const [busy, setBusy] = useState(false);
+    const openDialog = async () => {
+        setOpen(true);
+        setError(null);
+        setUsages(null);
+        try {
+            setUsages(await store.usagesOf(asset.id));
+        }
+        catch (cause) {
+            setError(cause instanceof Error ? cause.message : String(cause));
+        }
+    };
+    const confirm = async () => {
+        setBusy(true);
+        setError(null);
+        const inUse = (usages?.length ?? 0) > 0;
+        const result = await store.remove(asset.id, { confirmInUse: inUse });
+        setBusy(false);
+        if (result.outcome === 'deleted' || result.outcome === 'not-found') {
+            setOpen(false);
+        }
+        else if (result.outcome === 'blocked') {
+            // A reference appeared between the pre-flight read and confirm (rare race).
+            setError(`Asset is now referenced in ${result.usageCount} place(s) — reopen to review.`);
+        }
+        else {
+            setError(result.message);
+        }
+    };
+    const impact = usages ? buildAssetReferenceImpact(usages) : null;
+    const usageCount = impact?.broken.length ?? 0;
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": `Delete ${asset.filename}`, onClick: () => void openDialog(), "data-testid": "asset-delete", children: _jsx(Trash2, {}) }), _jsx(Dialog, { open: open, onOpenChange: setOpen, children: _jsxs(DialogContent, { className: "max-h-[80vh] max-w-md overflow-y-auto", children: [_jsxs(DialogHeader, { children: [_jsxs(DialogTitle, { children: ["Delete ", asset.filename, "?"] }), _jsx(DialogDescription, { children: "Removes the stored bytes and the metadata record. This cannot be undone." })] }), usages === null && error === null ? (_jsx(Text, { size: "sm", tone: "muted", children: "Checking references\u2026" })) : usageCount > 0 ? (_jsxs(Stack, { gap: "2", "data-testid": "asset-usage-warning", children: [_jsxs(Row, { gap: "2", children: [_jsx(AlertTriangle, { className: "size-4 text-warning" }), _jsxs(Text, { size: "sm", weight: "semibold", children: ["In use in ", usageCount, " place", usageCount === 1 ? '' : 's'] })] }), _jsx(ReferenceImpactRows, { projectId: store.projectId, broken: impact.broken, onNavigate: () => setOpen(false) }), _jsx(Text, { size: "xs", tone: "muted", children: "Deleting will leave these references broken \u2014 they will surface as validation issues." })] })) : (_jsx(Text, { size: "sm", tone: "muted", children: "No references found. Safe to delete." })), error ? (_jsx(Text, { size: "sm", className: "text-destructive", "data-testid": "asset-delete-error", children: error })) : null, _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: () => setOpen(false), disabled: busy, children: "Cancel" }), _jsx(Button, { variant: "destructive", size: "sm", onClick: () => void confirm(), disabled: busy || usages === null, "data-testid": "asset-delete-confirm", children: usageCount > 0 ? 'Delete anyway' : 'Delete' })] })] }) })] }));
+}
+//# sourceMappingURL=asset-library.js.map