auricui-skill 0.0.0-stage → 0.1.2

package/skill/assets/upstream/packages/openfilm/studio/ui/src/components/ProjectLayoutMenu.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import { createPortal } from 'react-dom';
+import { Layers, MessageSquare, PanelBottom, PanelLeft, PanelRight, PanelsRightBottom } from 'lucide-react';
+import { useT } from '@/i18n';
+import { Tooltip } from './Tooltip';
+
+/** The top bar's Layout button: a small panel of switches that show or hide the Assets, Layers, Timeline and Inspector
+    panes (and the host app's own panel, when there is one). */
+export function ProjectLayoutMenu({ className, assets, layers, timeline, inspector, onAssets, onLayers, onTimeline, onInspector, hostPanel }: {
+  className?: string;
+  /** the app's own panel around Studio (lib/host.ts `panel`), switched here like Studio's own */
+  hostPanel?: { label: string; open: boolean; onChange: (open: boolean) => void } | null;
+  /** null: the media is not a pane of Studio's here (the host app keeps it in its own panel) */
+  assets: boolean | null;
+  layers: boolean;
+  timeline: boolean;
+  inspector: boolean;
+  onAssets: (open: boolean) => void;
+  onLayers: (open: boolean) => void;
+  onTimeline: (open: boolean) => void;
+  onInspector: (open: boolean) => void;
+}) {
+  const t = useT();
+  const button = React.useRef<HTMLButtonElement>(null);
+  const panel = React.useRef<HTMLDivElement>(null);
+  const [anchor, setAnchor] = React.useState<{ right: number; top: number } | null>(null);
+  const id = React.useId();
+  React.useEffect(() => {
+    if (!anchor) return;
+    panel.current?.querySelector<HTMLButtonElement>('button')?.focus();
+    const outside = (event: PointerEvent) => {
+      if (!panel.current?.contains(event.target as Node) && !button.current?.contains(event.target as Node)) setAnchor(null);
+    };
+    const close = () => setAnchor(null);
+    const escape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') { event.stopPropagation(); close(); button.current?.focus(); }
+    };
+    /* capture phase: the picture, the timeline and inputs each stop pointerdown, so it never bubbles to window.
+       A click into the preview iframe sends no event at all, only a window blur — that counts as "elsewhere" too. */
+    window.addEventListener('pointerdown', outside, true);
+    window.addEventListener('keydown', escape);
+    window.addEventListener('resize', close);
+    window.addEventListener('blur', close);
+    return () => {
+      window.removeEventListener('pointerdown', outside, true);
+      window.removeEventListener('keydown', escape);
+      window.removeEventListener('resize', close);
+      window.removeEventListener('blur', close);
+    };
+  }, [anchor]);
+  return <>
+    <Tooltip label={t('layout.title')} side="bottom">
+      <button ref={button} type="button" className={className} aria-label={t('layout.title')}
+        aria-haspopup="dialog" aria-expanded={!!anchor} aria-controls={anchor ? id : undefined}
+        onClick={() => {
+          const rect = button.current!.getBoundingClientRect();
+          setAnchor(current => current ? null : { right: Math.max(12, window.innerWidth - rect.right), top: rect.bottom + 6 });
+        }}><PanelsRightBottom size={16} /></button>
+    </Tooltip>
+    {anchor && createPortal(<div ref={panel} id={id} role="dialog" aria-label={t('layout.title')}
+      style={anchor} className="fixed z-[110] w-52 rounded-[14px] border border-[var(--border)] bg-[var(--surface)] p-1.5 shadow-[0_18px_48px_-12px_rgba(0,0,0,0.45),0_2px_8px_rgba(0,0,0,0.12)]">
+      <div className="px-2 pb-1 pt-1 text-[11px] font-medium text-[var(--text-faint)]">{t('layout.title')}</div>
+      {[
+        /* the app's own panel first: in an app with a chat, the chat is the pane people switch most */
+        ...(hostPanel ? [['panel', hostPanel.label, hostPanel.open, hostPanel.onChange, MessageSquare] as const] : []),
+        ...(assets == null ? [] : [['assets', t('layout.assets'), assets, onAssets, PanelLeft] as const]),
+        ['layers', t('layout.layers'), layers, onLayers, Layers] as const,
+        ['timeline', t('layout.timeline'), timeline, onTimeline, PanelBottom] as const,
+        ['inspector', t('layout.inspector'), inspector, onInspector, PanelRight] as const,
+      ].map(([key, label, checked, change, Icon]) => <button key={key} type="button" role="switch"
+        aria-checked={checked} onClick={() => change(!checked)}
+        className="flex w-full items-center gap-2.5 rounded-[7px] px-2 py-1.5 text-[13px] text-[var(--text)] hover:bg-[var(--bg-hover)] focus-visible:outline focus-visible:outline-[var(--border-strong)]">
+        <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-[var(--surface-2)] text-[var(--text-muted)]"><Icon size={13} aria-hidden /></span>
+        <span className="flex-1 text-left">{label}</span>
+        {/* a switch, not a tick: each pane is open or closed, not one picked from a set. Ink-colored, not blue. */}
+        <span aria-hidden className={`relative h-[18px] w-[30px] shrink-0 rounded-full transition-colors ${checked ? 'bg-[var(--text)]' : 'bg-[var(--surface-2)] ring-1 ring-inset ring-[var(--border)]'}`}>
+          <span className={`absolute top-[3px] h-3 w-3 rounded-full transition-all ${checked ? 'left-[15px] bg-[var(--bg)]' : 'left-[3px] bg-[var(--text-faint)]'}`} />
+        </span>
+      </button>)}
+    </div>, document.body)}
+  </>;
+}

package/skill/assets/upstream/packages/openfilm/studio/ui/src/components/ProjectMenu.tsx

@@ -0,0 +1,111 @@
+import React from 'react';
+import { CheckSquare, FolderInput, FolderOpen, FolderSearch, Image, ImageOff, ImagePlus, ListX, MoreHorizontal, Pencil, Trash2 } from 'lucide-react';
+import { ContextMenu, type ContextMenuEntry } from './ContextMenu';
+import { Tooltip } from './Tooltip';
+import { useT } from '@/i18n';
+
+/**
+ * A project's "…" menu.
+ *
+ * Each item shows only when its callback is passed: the editor's top bar, when it has no tabs (in tabs they are in the
+ * tab's menu), passes the current frame as the cover and Reveal in Finder; a card in the Projects popover passes Open /
+ * Rename / Select / Move to folder / Change cover / Restore cover / Reveal / Delete, or Locate… and Remove from list
+ * when the project's folder is gone. The order is fixed here, not by the props, so the same menu looks the same wherever it
+ * appears. It is a ContextMenu hanging from the button: it flips above it near the bottom of the window, and Esc
+ * closes only the menu.
+ */
+export function ProjectMenu({
+  onOpen,
+  onRename,
+  onSelect,
+  onMoveToFolder,
+  onChangeCover,
+  onRestoreCover,
+  onCoverFromFrame,
+  onReveal,
+  onLocate,
+  onRemove,
+  onDelete,
+  size = 18,
+  className,
+}: {
+  /** Open the project. Clicking the cover is quicker, but only once you know the cover can be clicked. */
+  onOpen?: () => void;
+  onRename?: () => void;
+  /** Enter multi-select with this item already ticked. */
+  onSelect?: () => void;
+  /** Pick a folder of the Projects list to put it in. */
+  onMoveToFolder?: () => void;
+  /** Pick a picture for the project's card. */
+  onChangeCover?: () => void;
+  /** The project has a cover of its own: back to the film's poster. */
+  onRestoreCover?: () => void;
+  /** The film as the viewer shows it now made the project's cover. */
+  onCoverFromFrame?: () => void;
+  /** Show the project's folder in Finder / Explorer. */
+  onReveal?: () => void;
+  /** Pick the folder a project whose folder is gone is in now. */
+  onLocate?: () => void;
+  /** Take it off the list (a project whose folder is gone: there is nothing to delete). */
+  onRemove?: () => void;
+  onDelete?: () => void;
+  size?: number;
+  className?: string;
+}) {
+  const t = useT();
+  const [anchor, setAnchor] = React.useState<{ x: number; y: number; top: number } | null>(null);
+  const button = React.useRef<HTMLButtonElement>(null);
+
+  const toggle = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const r = (e.currentTarget as HTMLElement).getBoundingClientRect();
+    setAnchor((cur) => (cur ? null : { x: r.right, y: r.bottom + 4, top: r.top - 4 }));
+  };
+
+  const entries: ContextMenuEntry[] = [];
+  const add = (id: string, icon: React.ReactNode, label: string, run: (() => void) | undefined) => {
+    if (run) entries.push({ id, icon, label, onSelect: run });
+  };
+  add('open', <FolderOpen size={15} />, t('projectMenu.open'), onOpen);
+  add('rename', <Pencil size={15} />, t('projectMenu.rename'), onRename);
+  add('select', <CheckSquare size={15} />, t('library.select'), onSelect);
+  add('move', <FolderInput size={15} />, t('projects.moveToFolder'), onMoveToFolder);
+  add('cover', <ImagePlus size={15} />, t('projects.changeCover'), onChangeCover);
+  add('coverFrame', <Image size={15} />, t('projects.coverFromFrame'), onCoverFromFrame);
+  add('coverReset', <ImageOff size={15} />, t('projects.restoreCover'), onRestoreCover);
+  add('reveal', <FolderOpen size={15} />, t('projects.revealFolder'), onReveal);
+  add('locate', <FolderSearch size={15} />, t('projects.locate'), onLocate);
+  add('remove', <ListX size={15} />, t('projects.removeFromList'), onRemove);
+  if (onDelete) {
+    /* a separator only when something is above it */
+    if (entries.length) entries.push({ id: 'sep', separator: true });
+    entries.push({ id: 'delete', icon: <Trash2 size={15} />, label: t('projectMenu.delete'), danger: true, onSelect: onDelete });
+  }
+
+  return (
+    <>
+      {/* the menu opens downward, so the tooltip does too: the button usually sits at the top of the window or a card */}
+      <Tooltip label={t('projectMenu.more')} side="bottom">
+        <button
+          ref={button}
+          type="button"
+          onClick={toggle}
+          aria-expanded={anchor != null}
+          aria-haspopup="menu"
+          aria-label={t('projectMenu.more')}
+          className={
+            className ??
+            'flex h-[26px] w-[26px] items-center justify-center rounded-md text-[var(--text-dim)] transition hover:bg-[var(--bg-hover)] hover:text-[var(--text)]'
+          }
+        >
+          <MoreHorizontal size={size} />
+        </button>
+      </Tooltip>
+
+      {anchor ? (
+        <ContextMenu x={anchor.x} y={anchor.y} flipTo={anchor.top} align="end" trigger={button} items={entries} onClose={() => setAnchor(null)} />
+      ) : null}
+    </>
+  );
+}