cursedbelt 2.7.0 → 3.0.0

package/src/react/studios/AssetDetailShells.tsx

@@ -1,382 +0,0 @@
-/**
- * The three remaining AssetStudio surfaces (03 §1e) — `video-detail`,
- * `video-editor` and `image-studio`.
- *
- * All three are the near side of components that have been complete, tested and
- * UNMOUNTED for the whole arc: `VideoPlayer`, `VideoTrimmer` and `ImageEditor`
- * live in `react/media`, and until now no studio view rendered one. They were the
- * L17 "unwired component" class in its largest form — a media tier nothing could
- * reach.
- *
- * Presentation-pure like every other shell here: rows and callbacks in, no fetch,
- * no ffmpeg. The two editors DO own one piece of local state each — whether their
- * modal is open — because that is view state, not data, and lifting it would make
- * every consumer re-implement "open the editor for the selected item".
- *
- * **Why an export ADDS an asset instead of replacing one.** Both editors hand
- * their result up as new bytes. The catalogue has no "replace the bytes of asset
- * X" route and should not grow one casually: the vault is content-addressed
- * (`mv_assets` is keyed by checksum), so "same id, different bytes" is a
- * contradiction there, and a destructive edit of a catalogue original is
- * unrecoverable. A derived asset is both honest and reversible.
- */
-import { useEffect, useMemo, useState } from 'react';
-import type { PlayableVideo } from '../../core/media/types';
-import { Button } from '../components/Button';
-import { EmptyState } from '../components/EmptyState';
-import { ScrollArea } from '../components/ScrollArea';
-import { ImageEditor } from '../media/ImageEditor';
-import { VideoPlayer } from '../media/VideoPlayer';
-import { VideoTrimmer } from '../media/VideoTrimmer';
-import { cn } from '../lib/cn';
-import type {
-  AssetDetailItem,
-  ImageStudioShellProps,
-  VideoDetailShellProps,
-  VideoEditorShellProps,
-} from './types';
-
-/* -------------------------------------------------------- video-detail */
-
-/** `AssetDetailItem` → the player's unit. The URLs are the server's, untouched. */
-export const toPlayableVideo = (item: AssetDetailItem): PlayableVideo => ({
-  id: item.id,
-  name: item.name,
-  streamUrl: item.streamUrl,
-  hlsUrl: item.hlsUrl,
-});
-
-/** Keyed on `effectiveFeaturesHash` for the 02 §6.1 clean-remount-on-toggle rule. */
-export function VideoDetailShell(props: VideoDetailShellProps) {
-  return <VideoDetailBody key={props.instance.effectiveFeaturesHash} {...props} />;
-}
-
-function VideoDetailBody({ instance, item, missing, loading, className }: VideoDetailShellProps) {
-  if (!item) {
-    return (
-      <section
-        data-cc-studio='asset'
-        data-cc-view='video-detail'
-        data-cc-instance={instance.id}
-        className={cn('min-h-0 min-w-0', className)}
-      >
-        <EmptyState
-          compact
-          title={missing ? 'That item is no longer available.' : loading ? 'Loading…' : 'Nothing selected.'}
-          description={
-            missing
-              ? 'It may have been deleted, or it belongs to another workspace.'
-              : undefined
-          }
-        />
-      </section>
-    );
-  }
-
-  return (
-    <section
-      data-cc-studio='asset'
-      data-cc-view='video-detail'
-      data-cc-instance={instance.id}
-      data-cc-item={item.id}
-      className={cn('flex min-h-0 min-w-0 flex-col gap-3', className)}
-    >
-      <header className='flex min-w-0 items-baseline justify-between gap-3'>
-        <h2 className='truncate font-semibold text-base text-foreground'>{item.name}</h2>
-        {/* The adaptive/progressive distinction is worth surfacing: "why is this
-            buffering" is answered by whether a ladder exists for this item. */}
-        <span className='cb-meta-label shrink-0 text-muted-foreground'>
-          {item.hlsUrl ? 'adaptive' : 'progressive'}
-        </span>
-      </header>
-
-      <div className='min-h-0 min-w-0 flex-1'>
-        {item.kind === 'video' ? (
-          <VideoPlayer video={toPlayableVideo(item)} />
-        ) : item.kind === 'photo' ? (
-          // eslint-disable-next-line -- a detail surface for a still is the image itself.
-          <img
-            src={item.streamUrl}
-            alt={item.name}
-            data-cc-still=''
-            className='max-h-full max-w-full rounded-md object-contain'
-          />
-        ) : (
-          <FileDetail item={item} />
-        )}
-      </div>
-    </section>
-  );
-}
-
-/**
- * A non-renderable item still deserves a detail surface. It links the SERVER's
- * bytes URL rather than trying to preview an unknown MIME type — a `<video>` tag
- * pointed at a zip renders a broken control, not an error the user can read.
- */
-function FileDetail({ item }: { item: AssetDetailItem }) {
-  return (
-    <div className='flex flex-col items-start gap-2 rounded-md border border-border border-dashed p-4 text-sm'>
-      <span className='text-muted-foreground'>This file has no inline preview.</span>
-      <a href={item.streamUrl} download={item.name} data-cc-download='' className='text-primary underline'>
-        Download {item.name}
-      </a>
-    </div>
-  );
-}
-
-/* -------------------------------------------------------- video-editor */
-
-export function VideoEditorShell(props: VideoEditorShellProps) {
-  return <VideoEditorBody key={props.instance.effectiveFeaturesHash} {...props} />;
-}
-
-function VideoEditorBody({
-  instance,
-  videos,
-  activeId,
-  onSelect,
-  onExport,
-  exporting,
-  progress,
-  error,
-  lastExport,
-  loading,
-  className,
-}: VideoEditorShellProps) {
-  const [open, setOpen] = useState(false);
-  const active = useMemo(() => videos.find((video) => video.id === activeId) ?? null, [videos, activeId]);
-
-  // A trimmer left open over a video that vanished (deleted in another tab, or a
-  // selection cleared) would keep a `<video src>` pointed at a 404. Closing on
-  // that transition is the only correct answer.
-  useEffect(() => {
-    if (!active) setOpen(false);
-  }, [active]);
-
-  return (
-    <section
-      data-cc-studio='asset'
-      data-cc-view='video-editor'
-      data-cc-instance={instance.id}
-      className={cn('flex min-h-0 min-w-0 gap-3', className)}
-    >
-      <MediaPickerRail
-        label='video'
-        items={videos}
-        activeId={active?.id}
-        onSelect={onSelect}
-        empty={loading ? 'Loading…' : 'No videos in this library yet.'}
-      />
-
-      <div className='flex min-h-0 min-w-0 flex-1 flex-col gap-3'>
-        {active ? (
-          <>
-            <h2 className='truncate font-semibold text-base text-foreground'>{active.name}</h2>
-            <Button
-              size='sm'
-              disabled={exporting === true}
-              tooltip='Choose a range and export it as a new video'
-              data-cc-open-trimmer=''
-              onClick={() => setOpen(true)}
-            >
-              Trim…
-            </Button>
-            {exporting ? (
-              <span data-cc-export-progress={progress == null ? '' : String(Math.round(progress))} className='text-muted-foreground text-xs'>
-                {progress == null ? 'Exporting…' : `Exporting… ${Math.round(progress)}%`}
-              </span>
-            ) : null}
-            {error ? (
-              <span role='alert' data-cc-export-error='' className='text-destructive text-xs'>
-                {error}
-              </span>
-            ) : null}
-            {lastExport && !error ? (
-              <span data-cc-export-result='' className='text-muted-foreground text-xs'>
-                {lastExport.fileName} added to this library
-              </span>
-            ) : null}
-          </>
-        ) : (
-          <EmptyState compact title='Pick a video to trim.' />
-        )}
-      </div>
-
-      {open && active ? (
-        <VideoTrimmer
-          src={active.url}
-          name={active.name}
-          onClose={() => setOpen(false)}
-          onTrim={async (spec) => {
-            // The trimmer awaits this before closing itself, so the modal stays
-            // up (with its own spinner) for the whole render+upload.
-            await onExport?.({
-              startSeconds: spec.startSeconds,
-              endSeconds: spec.endSeconds,
-              format: spec.format ?? 'mp4',
-              quality: spec.quality ?? 'medium',
-            });
-          }}
-        />
-      ) : null}
-    </section>
-  );
-}
-
-/* -------------------------------------------------------- image-studio */
-
-export function ImageStudioShell(props: ImageStudioShellProps) {
-  return <ImageStudioBody key={props.instance.effectiveFeaturesHash} {...props} />;
-}
-
-function ImageStudioBody({
-  instance,
-  images,
-  activeId,
-  onSelect,
-  onSave,
-  saving,
-  error,
-  lastSaved,
-  loading,
-  className,
-}: ImageStudioShellProps) {
-  const [open, setOpen] = useState(false);
-  const active = useMemo(() => images.find((image) => image.id === activeId) ?? null, [images, activeId]);
-
-  useEffect(() => {
-    if (!active) setOpen(false);
-  }, [active]);
-
-  const editedName = (name: string): string => {
-    const dot = name.lastIndexOf('.');
-    const stem = dot > 0 ? name.slice(0, dot) : name;
-    // The extension comes from the SAVED blob, not from the source: an edit may
-    // change the format, and `photo.heic.png` is nobody's file name.
-    return `${stem}-edited`;
-  };
-
-  return (
-    <section
-      data-cc-studio='asset'
-      data-cc-view='image-studio'
-      data-cc-instance={instance.id}
-      className={cn('flex min-h-0 min-w-0 gap-3', className)}
-    >
-      <MediaPickerRail
-        label='image'
-        items={images}
-        activeId={active?.id}
-        onSelect={onSelect}
-        empty={loading ? 'Loading…' : 'No images in this library yet.'}
-      />
-
-      <div className='flex min-h-0 min-w-0 flex-1 flex-col gap-3'>
-        {active ? (
-          <>
-            <h2 className='truncate font-semibold text-base text-foreground'>{active.name}</h2>
-            <Button
-              size='sm'
-              disabled={saving === true}
-              tooltip='Open this image in the editor'
-              data-cc-open-editor=''
-              onClick={() => setOpen(true)}
-            >
-              Edit…
-            </Button>
-            {saving ? <span className='text-muted-foreground text-xs'>Saving…</span> : null}
-            {error ? (
-              <span role='alert' data-cc-save-error='' className='text-destructive text-xs'>
-                {error}
-              </span>
-            ) : null}
-            {lastSaved && !error ? (
-              <span data-cc-save-result='' className='text-muted-foreground text-xs'>
-                {lastSaved.fileName} added to this library
-              </span>
-            ) : null}
-          </>
-        ) : (
-          <EmptyState compact title='Pick an image to edit.' />
-        )}
-      </div>
-
-      {open && active ? (
-        <ImageEditor
-          src={active.url}
-          fileName={editedName(active.name)}
-          onClose={() => setOpen(false)}
-          onSave={async (result) => {
-            // `client` is the only mode this surface wires: the `server` mode
-            // yields an `ImagePipelineSpec` for an endpoint no engine mounts, so
-            // offering it would be an affordance whose every use is a 404.
-            if (result.mode !== 'client') return;
-            const extension = extensionOf(result.format);
-            await onSave?.({ blob: result.blob, fileName: `${editedName(active.name)}.${extension}` });
-          }}
-        />
-      ) : null}
-    </section>
-  );
-}
-
-/** `image/png` → `png`. Falls back to `png`, which is the editor's own default. */
-const extensionOf = (mimeType: string | undefined): string => {
-  const subtype = mimeType?.split('/')[1]?.split(';')[0];
-  if (!subtype) return 'png';
-  return subtype === 'jpeg' ? 'jpg' : subtype;
-};
-
-/* -------------------------------------------------------------- shared */
-
-/**
- * The pick-one rail both editors use. It is thumbnails rather than a text list
- * because the thing being chosen is an image or a video, and a column of file
- * names is a worse picker for that than any grid.
- */
-function MediaPickerRail({
-  label,
-  items,
-  activeId,
-  onSelect,
-  empty,
-}: {
-  label: string;
-  items: readonly { id: string; name: string; url: string; thumbnailUrl?: string }[];
-  activeId?: string;
-  onSelect?: (id: string) => void;
-  empty: string;
-}) {
-  return (
-    <nav
-      aria-label={`Choose a ${label}`}
-      data-cc-picker={label}
-      className='flex w-56 min-h-0 shrink-0 flex-col border-border border-r pr-2'
-    >
-      <ScrollArea className='min-h-0 flex-1' space='none'>
-        {items.length === 0 ? (
-          <EmptyState compact title={empty} />
-        ) : (
-          <ul className='flex flex-col gap-0.5 pr-1'>
-            {items.map((item) => (
-              <li key={item.id}>
-                <Button
-                  variant={item.id === activeId ? 'secondary' : 'ghost'}
-                  size='sm'
-                  tooltip={`Open ${item.name}`}
-                  className='w-full justify-start'
-                  aria-current={item.id === activeId ? 'true' : undefined}
-                  data-cc-row={item.id}
-                  onClick={() => onSelect?.(item.id)}
-                >
-                  <span className='truncate'>{item.name}</span>
-                </Button>
-              </li>
-            ))}
-          </ul>
-        )}
-      </ScrollArea>
-    </nav>
-  );
-}

package/src/react/studios/AssetStudioShell.tsx

@@ -1,271 +0,0 @@
-// AssetStudio (`asset`) presentation shell (02 §1.1). Reads an instance's effective
-// feature manifest and composes the landed media primitives into the canonical grid +
-// big-view layout: the absorbed Media/Photo/Video/File galleries plus the guarded
-// private-media index. Pure presentation — rows arrive via props (the app resolves them
-// against its `AssetService`; no production service exists yet, Set 7 §0).
-
-import { useMemo, useRef, useState } from 'react';
-import type { MediaItem } from '../../core/media/types';
-import { Button } from '../components/Button';
-import { Input } from '../components/Input';
-import { CCResizeBoundary } from '../layout/CCResizeBoundary';
-import { cn } from '../lib/cn';
-import { MediaCatalogueViewer, PrivateIndexView } from '../media';
-import { assetSurfaces, resolveCatalogueLayout } from './featureGate';
-import type { AssetFolder, AssetStudioShellProps, AssetUploadState } from './types';
-
-/**
- * The shell keys its body on `effectiveFeaturesHash` (02 §6.1 re-mount hygiene): a
- * feature toggle or role change produces a new hash, so React discards and cleanly
- * remounts the subtree instead of leaking a stale closure over the old feature set.
- */
-export function AssetStudioShell(props: AssetStudioShellProps) {
-  return <AssetStudioBody key={props.instance.effectiveFeaturesHash} {...props} />;
-}
-
-function AssetStudioBody({
-  instance,
-  items,
-  folders,
-  activeFolderId,
-  onSelectFolder,
-  onSelectItem,
-  onDeleteItem,
-  totalCount,
-  loading,
-  onLoadMore,
-  layout,
-  privateUnlock,
-  upload,
-  className,
-  emptyState,
-}: AssetStudioShellProps) {
-  const surfaces = useMemo(() => assetSurfaces(instance.effective), [instance.effective]);
-  const catalogueLayout = layout ?? resolveCatalogueLayout(instance.effective);
-
-  const showFolderRail = surfaces.fileBrowser && (folders?.length ?? 0) > 0;
-  const showPrivateIndex = surfaces.privateMedia && privateUnlock != null;
-
-  return (
-    <section
-      data-cc-studio="asset"
-      data-cc-instance={instance.id}
-      className={cn('flex min-h-0 min-w-0 flex-col gap-3', className)}
-    >
-      {instance.title ? (
-        <header className='flex min-w-0 items-baseline justify-between gap-3'>
-          <h2 className='truncate text-base font-semibold text-foreground'>{instance.title}</h2>
-          {totalCount != null ? (
-            <span className='cb-meta-label shrink-0 text-muted-foreground'>{totalCount} items</span>
-          ) : null}
-        </header>
-      ) : null}
-
-      {upload ? <AssetUploadZone upload={upload} /> : null}
-
-      {showPrivateIndex && privateUnlock ? (
-        <PrivateMediaRegion unlock={privateUnlock} />
-      ) : null}
-
-      <div className={cn('flex min-h-0 min-w-0 flex-1 gap-3', showFolderRail ? 'flex-row' : 'flex-col')}>
-        {showFolderRail ? (
-          <FolderRail
-            folders={folders ?? []}
-            activeFolderId={activeFolderId}
-            onSelectFolder={onSelectFolder}
-          />
-        ) : null}
-
-        <div className='min-h-0 min-w-0 flex-1'>
-          {surfaces.anyCatalogue ? (
-            // Every virtualized grid mounts inside a CCResizeBoundary (J5-1 / 02 §5.3).
-            // MediaCatalogueViewer self-measures its own container, so the boundary's
-            // recompute is a structural no-op here rather than a manual invalidation.
-            <CCResizeBoundary recomputeLayout={() => {}} className='min-h-0 min-w-0'>
-              <MediaCatalogueViewer
-                items={items}
-                layout={catalogueLayout}
-                loading={loading}
-                loadMore={onLoadMore}
-                totalCount={totalCount}
-                onItemSelect={onSelectItem}
-                onItemDelete={onDeleteItem}
-                emptyState={emptyState}
-              />
-            </CCResizeBoundary>
-          ) : (
-            <EmptyStudio />
-          )}
-        </div>
-      </div>
-    </section>
-  );
-}
-
-/**
- * The vault upload drop zone (03 §1c) — the near side of the checksum-while-
- * streaming route, and the first client caller `/api/asset/vault/upload` has ever
- * had.
- *
- * Presentation-pure, like every other part of this shell: it collects `File`
- * objects from a drop or a picker and hands them up. It does NOT read them —
- * the whole point of the server's streaming design is that a 4GB video is a pipe,
- * and a component that called `file.arrayBuffer()` to "prepare" the upload would
- * undo that in one line.
- *
- * `onDragOver` must `preventDefault()` or the browser NAVIGATES to the dropped
- * file, replacing the app with a raw image and losing the session — the classic
- * drop-zone failure, and the reason the handler exists even though it looks inert.
- */
-function AssetUploadZone({ upload }: { upload: AssetUploadState }) {
-  const [over, setOver] = useState(false);
-  const inputRef = useRef<HTMLInputElement>(null);
-  const busy = upload.busy === true;
-
-  const take = (list: FileList | null): void => {
-    const files = Array.from(list ?? []);
-    // An empty drop (a dragged link, a folder on some browsers) is not an upload
-    // of zero files — it is nothing, and firing the callback would post a request
-    // with no body for the server to refuse.
-    if (files.length > 0 && !busy) upload.onUpload(files);
-  };
-
-  return (
-    <section
-      // A drop TARGET has no interactive role: dragging is not keyboard-operable
-      // by nature, and making this a button would nest the picker button inside a
-      // button. The keyboard path is the "Choose files…" button inside this
-      // labeled region — the standard accessible pairing for a drop zone. (The
-      // `biome-ignore` that used to sit here suppressed a rule that does not fire
-      // on this shape, so biome flagged the suppression itself as dead.)
-      aria-label='Upload files'
-      data-cc-upload=''
-      data-cc-upload-busy={busy ? 'true' : 'false'}
-      onDragOver={(event) => {
-        event.preventDefault();
-        setOver(true);
-      }}
-      onDragLeave={() => setOver(false)}
-      onDrop={(event) => {
-        event.preventDefault();
-        setOver(false);
-        take(event.dataTransfer?.files ?? null);
-      }}
-      className={cn(
-        'flex flex-wrap items-center gap-3 rounded-md border border-dashed px-3 py-2 text-sm',
-        over ? 'border-primary bg-accent' : 'border-border',
-      )}
-    >
-      <span className='text-muted-foreground'>
-        {busy ? 'Uploading…' : 'Drop files here to add them to this library'}
-      </span>
-      <Button
-        size='sm'
-        variant='secondary'
-        disabled={busy}
-        tooltip='Choose files to upload (you can select more than one)'
-        onClick={() => inputRef.current?.click()}
-      >
-        Choose files…
-      </Button>
-      <Input
-        ref={inputRef}
-        type='file'
-        multiple
-        hidden
-        accept={upload.accept}
-        aria-label='Choose files to upload'
-        onChange={(event) => {
-          take(event.target.files);
-          // Cleared so re-picking the SAME file fires `change` again — otherwise a
-          // failed upload cannot be retried without picking something else first.
-          event.target.value = '';
-        }}
-      />
-      {upload.error ? (
-        <span role='alert' data-cc-upload-error='' className='text-destructive text-xs'>
-          {upload.error}
-        </span>
-      ) : null}
-      {upload.lastResult && !upload.error ? (
-        <span
-          data-cc-upload-result={upload.lastResult.deduped ? 'deduped' : 'stored'}
-          className='text-muted-foreground text-xs'
-        >
-          {upload.lastResult.deduped
-            ? `${upload.lastResult.fileName} was already in this library`
-            : `${upload.lastResult.fileName} uploaded`}
-        </span>
-      ) : null}
-    </section>
-  );
-}
-
-function FolderRail({
-  folders,
-  activeFolderId,
-  onSelectFolder,
-}: {
-  folders: readonly AssetFolder[];
-  activeFolderId?: string;
-  onSelectFolder?: (folderId: string) => void;
-}) {
-  return (
-    <nav
-      aria-label='Folders'
-      className='w-48 shrink-0 space-y-0.5 border-border border-r pr-2'
-    >
-      {folders.map((folder) => {
-        const active = folder.id === activeFolderId;
-        return (
-          <button
-            // guardrails-ignore no-raw-action-button: presentational folder view switch, no data mutation
-            type='button'
-            key={folder.id}
-            onClick={() => onSelectFolder?.(folder.id)}
-            aria-current={active ? 'true' : undefined}
-            style={{ paddingLeft: `${0.5 + (folder.depth ?? 0) * 0.75}rem` }}
-            className={cn(
-              'flex w-full items-center justify-between gap-2 rounded-md py-1.5 pr-2 text-left text-sm',
-              active
-                ? 'bg-accent font-medium text-accent-foreground'
-                : 'text-muted-foreground hover:bg-muted hover:text-foreground',
-            )}
-          >
-            <span className='truncate'>{folder.name}</span>
-            {folder.count != null ? (
-              <span className='shrink-0 text-muted-foreground text-xs tabular-nums'>{folder.count}</span>
-            ) : null}
-          </button>
-        );
-      })}
-    </nav>
-  );
-}
-
-function PrivateMediaRegion({ unlock }: { unlock: NonNullable<AssetStudioShellProps['privateUnlock']> }) {
-  if (unlock.token == null) {
-    return (
-      <div
-        data-cc-private='locked'
-        className='rounded-md border border-border bg-muted px-3 py-2 text-muted-foreground text-sm'
-      >
-        Private media is locked. Unlock to view the encrypted index.
-        {unlock.error ? <span className='ml-2 text-destructive'>{unlock.error}</span> : null}
-      </div>
-    );
-  }
-  // Unlocked: the guarded cleanup index (sizes + created-at) — never raw private bytes
-  // through a public route (Set 7 finding 4.3).
-  return <PrivateIndexView unlock={unlock} />;
-}
-
-function EmptyStudio() {
-  return (
-    <div className='flex min-h-32 items-center justify-center rounded-md border border-border border-dashed text-muted-foreground text-sm'>
-      No asset surfaces enabled for this instance.
-    </div>
-  );
-}
-
-export type { MediaItem };