@odori/cli 0.0.2 → 0.0.4

package/studio/src/views/ComponentsView.tsx

@@ -10,13 +10,15 @@ import {
   type Brand,
   type VideoEntry,
 } from "odori";
-import {PreviewBoundary} from "odori/preview";
+import {PreviewBoundary, categoryFromPath, categoryPath, familyOf, groupOf} from "odori/preview";
 import {componentPreviews, project, videos} from "virtual:odori-project";
 import {CanvasStage} from "../components/CanvasStage";
 import {Transport} from "../components/Transport";
 import {Thumbnail} from "../components/Thumbnail";
 import {InputControls} from "../components/InputControls";
-import {Badge, Button, Empty, Fact, SectionTitle, Separator} from "../components/ui";
+import {Button, Empty, Fact, SectionTitle, Separator} from "../components/ui";
+import {Inspector} from "../components/Inspector";
+import {Navigator} from "../components/Navigator";
 import {useShortcuts} from "../shortcuts";
 
 type PreviewEntry = (typeof componentPreviews)[number];
@@ -31,11 +33,93 @@ const projectBrands = (): Brand[] => {
   return [...seen.values()];
 };
 
-const FAMILY_ORDER = ["Typography", "Developer proof", "Product UI", "Narrative", "Brand", "Media", "Audio"];
+// The reading order of the catalog: what you author, then what you show, then
+// what carries it. A family missing here sorts last, alphabetically.
+/**
+ * The reading order of the catalog. A category nests, so this lists families
+ * and the groups inside them sort alphabetically underneath: the order that
+ * matters is which family you meet first, not which of its drawers.
+ */
+const FAMILY_ORDER = [
+  "Typography",
+  "Developer proof",
+  "Interface",
+  "Agents",
+  "Products",
+  "Narrative",
+  "Data",
+  "Media",
+  "Motion",
+  "Brand",
+  "Foundation",
+  "Sound",
+];
+
+/**
+ * Where a family sorts.
+ *
+ * The listed ones are the registry's, in reading order. A project's own
+ * families are not in that list and must not all collapse to the same rank:
+ * they sort alphabetically after, so somebody who writes their own categories
+ * gets a stable order rather than whatever the file walk happened to produce.
+ */
+/**
+ * Where a component belongs.
+ *
+ * The fixture wins when it says, because a registry component is copied into
+ * somebody's tree, lands flat, and has to keep the family it was written for.
+ * Otherwise the directory answers, which is how a project organises its own
+ * work: move the folder and it moves in Studio, with nothing to keep in sync
+ * and no group that exists only because somebody mistyped one. A directory
+ * names itself in a `category.json` beside its components, which is the one
+ * thing a filesystem cannot say.
+ */
+/** What a directory calls itself, from its own `category.json`. */
+const declared = new Map(project.categories.map((entry) => [entry.path, entry]));
+
+export const categoryOf = (entry: PreviewEntry): string => {
+  if (entry.preview.category) return entry.preview.category;
+  const file = project.files.previews.find((item) => item.id === entry.id)?.file;
+  const derived = file
+    ? categoryFromPath(file, project.componentsDir.split("/").pop(), (path) => declared.get(path)?.name)
+    : "";
+  return derived || "Uncategorised";
+};
+
+/**
+ * Where a family sorts, when a project has said so.
+ *
+ * `category.json` carries an order, which is the only way a project can put
+ * its own families in a sensible sequence: the list above is ours, and a
+ * hardcoded list of somebody else's families is no use to them.
+ */
+const declaredOrder = (family: string): number | undefined => {
+  for (const entry of project.categories) {
+    if (entry.order === undefined || entry.path.includes("/")) continue;
+    const label = entry.name ?? entry.path.replace(/-/g, " ").replace(/^./, (letter) => letter.toUpperCase());
+    if (label === family) return entry.order;
+  }
+  return undefined;
+};
+
+const familyRank = (family: string): number => {
+  // A project's own order leads, then ours, then whatever is left, which
+  // sorts alphabetically. Declared orders go negative so they rank ahead.
+  const own = declaredOrder(family);
+  if (own !== undefined) return own - 1000;
+  const known = FAMILY_ORDER.indexOf(family);
+  return known === -1 ? FAMILY_ORDER.length : known;
+};
 
 const byFamily = (left: PreviewEntry, right: PreviewEntry) => {
-  const delta = FAMILY_ORDER.indexOf(left.preview.category) - FAMILY_ORDER.indexOf(right.preview.category);
-  return delta !== 0 ? delta : left.preview.title.localeCompare(right.preview.title);
+  const leftFamily = familyOf(categoryOf(left));
+  const rightFamily = familyOf(categoryOf(right));
+  const delta = familyRank(leftFamily) - familyRank(rightFamily);
+  if (delta !== 0) return delta;
+  const family = leftFamily.localeCompare(rightFamily);
+  if (family !== 0) return family;
+  const group = groupOf(categoryOf(left)).localeCompare(groupOf(categoryOf(right)));
+  return group !== 0 ? group : left.preview.title.localeCompare(right.preview.title);
 };
 
 const FORMATS = [
@@ -69,15 +153,33 @@ export const entryFor = (
 export const ComponentsView = ({
   selection,
   onSelect,
-  mode,
 }: {
   selection: string | null;
   onSelect: (id: string) => void;
-  mode: "player" | "gallery";
 }) => {
-  // Finding one by name is ⌘K; this list is for browsing them all.
-  const filtered = useMemo(() => [...componentPreviews].sort(byFamily), []);
-  const selected = filtered.find((entry) => entry.id === selection) ?? filtered[0];
+  // Finding one by name is ⌘K; the gallery is for browsing them all. A route
+  // with no selection is the gallery; a selection is that component's player.
+  const [usedIn, setUsedIn] = useState<string | null>(null);
+
+  /**
+   * Which video a component appears in, derived from the imports rather than
+   * declared, so it cannot disagree with the composition. A project of a
+   * hundred components is otherwise a wall with no way in.
+   */
+  const usage = useMemo(
+    () => Object.fromEntries(project.files.previews.map((entry) => [entry.id, entry.usedBy])),
+    [],
+  );
+  const videosUsing = useMemo(
+    () => [...new Set(Object.values(usage).flat())].sort(),
+    [usage],
+  );
+
+  const filtered = useMemo(() => {
+    const all = [...componentPreviews].sort(byFamily);
+    return usedIn ? all.filter((item) => (usage[item.id] ?? []).includes(usedIn)) : all;
+  }, [usedIn, usage]);
+  const selected = selection ? (filtered.find((entry) => entry.id === selection) ?? null) : null;
   const brands = projectBrands();
   const [brandName, setBrandName] = useState(brands[0]?.name ?? defaultBrand.name);
   const [formatLabel, setFormatLabel] = useState(FORMATS[0].label);
@@ -110,34 +212,71 @@ export const ComponentsView = ({
     l: () => setLoop((value) => !value),
   });
 
-  if (!selected) {
+  if (filtered.length === 0) {
     return (
       <Empty title="No component previews">
-        Add a sibling <code>*.preview.tsx</code> file, or run <code>odori add @odori/title-reveal</code>.
+        Add a sibling <code>*.preview.tsx</code> file, or run <code>odori add title-reveal</code>.
       </Empty>
     );
   }
 
-  const preview = selected.preview;
-  const example = preview.examples.find((item) => item.name === exampleName) ?? preview.examples[0];
-  const controlDefaults = Object.fromEntries(
-    Object.entries(preview.controls ?? {}).map(([name, field]) => [name, field.defaultValue]),
-  );
-  const props = {...controlDefaults, ...(example?.props ?? {}), ...overrides};
-  const entry = entryFor(selected, props, brand, format);
-
-  if (mode === "gallery") {
-    const grouped = filtered.reduce<Record<string, PreviewEntry[]>>((groups, item) => {
-      groups[item.preview.category] = [...(groups[item.preview.category] ?? []), item];
-      return groups;
-    }, {});
+  if (!selected) {
+    /*
+     * Two levels, because a category is a path. Rendering one section per
+     * full path printed the family again for every drawer inside it -
+     * Interface, Interface, Interface - which is a list pretending to be an
+     * outline. `filtered` is already sorted by family, then group, then
+     * title, so walking it in order is enough to build the tree.
+     */
+    const families: Array<{name: string; groups: Array<{name: string; entries: PreviewEntry[]}>}> = [];
+    for (const item of filtered) {
+      const familyName = familyOf(categoryOf(item));
+      const groupName = groupOf(categoryOf(item));
+      let family = families.at(-1);
+      if (!family || family.name !== familyName) {
+        family = {name: familyName, groups: []};
+        families.push(family);
+      }
+      let group = family.groups.at(-1);
+      if (!group || group.name !== groupName) {
+        group = {name: groupName, entries: []};
+        family.groups.push(group);
+      }
+      group.entries.push(item);
+    }
     return (
       <div style={{overflowY: "auto", width: "100%"}}>
-        {Object.entries(grouped).map(([category, entries]) => (
-          <section key={category} style={{padding: "16px 20px 0"}}>
-            <SectionTitle>{category}</SectionTitle>
-            <div className="gallery" style={{padding: "0 0 8px"}}>
-              {entries.map((item) => (
+        {videosUsing.length > 0 ? (
+          <div className="catalog-filter">
+            <button type="button" data-active={usedIn === null ? "true" : undefined} onClick={() => setUsedIn(null)}>
+              All
+            </button>
+            {videosUsing.map((video) => (
+              <button
+                key={video}
+                type="button"
+                data-active={usedIn === video ? "true" : undefined}
+                onClick={() => setUsedIn(video)}
+              >
+                {video}
+              </button>
+            ))}
+          </div>
+        ) : null}
+        {families.map((family) => (
+          <section key={family.name} style={{padding: "16px 20px 0"}}>
+            <SectionTitle>{family.name}</SectionTitle>
+            {family.groups.map((group) => (
+              <div key={group.name || "."}>
+                {/* A family whose components sit at its top level has one
+                    unnamed group, and no heading to draw for it. */}
+                {/* Any depth renders: the family is the heading, and whatever
+                    a project nests below it reads as one path. Two levels is
+                    our own editorial rule for our registry, not a limit the
+                    framework puts on anybody else's. */}
+                {group.name ? <h3 className="group-title">{group.name.split("/").join(" · ")}</h3> : null}
+                <div className="gallery" style={{padding: "0 0 8px"}}>
+                  {group.entries.map((item) => (
                 <button key={item.id} type="button" className="card" onClick={() => onSelect(item.id)}>
                   <Thumbnail
                     entry={entryFor(
@@ -159,35 +298,47 @@ export const ComponentsView = ({
                     <span>{item.id}</span>
                   </div>
                 </button>
-              ))}
-            </div>
+                  ))}
+                </div>
+              </div>
+            ))}
           </section>
         ))}
       </div>
     );
   }
 
+  const preview = selected.preview;
+  const example = preview.examples.find((item) => item.name === exampleName) ?? preview.examples[0];
+  const controlDefaults = Object.fromEntries(
+    Object.entries(preview.controls ?? {}).map(([name, field]) => [name, field.defaultValue]),
+  );
+  const props = {...controlDefaults, ...(example?.props ?? {}), ...overrides};
+  const entry = entryFor(selected, props, brand, format);
+
+  const previewFile =
+    project.files.previews.find((entry) => entry.id === selected.id)?.file ??
+    `videos/components/${selected.id}/${selected.id}.preview.tsx`;
+  // What it draws comes before the fixture that plays it: the fixture is the
+  // harness, and reading only the harness answers the wrong question.
+  const componentFile = previewFile.replace(/\.preview\.tsx$/, ".tsx");
+  const sources = componentFile === previewFile ? [previewFile] : [componentFile, previewFile];
+
   return (
     <>
-      <aside className="sidebar">
-        <div className="sidebar-scroll">
-          <ul className="list">
-            {filtered.map((item) => (
-              <li key={item.id}>
-                <button
-                  type="button"
-                  className="list-item"
-                  data-active={item.id === selected.id ? "true" : undefined}
-                  onClick={() => onSelect(item.id)}
-                >
-                  <strong>{item.preview.title}</strong>
-                </button>
-              </li>
-            ))}
-          </ul>
-
-        </div>
-      </aside>
+      {/* `filtered` is already sorted family, group, title, so the list reads
+          in the same order the gallery does. */}
+      <Navigator
+        label="Components"
+        selected={selected.id}
+        onSelect={onSelect}
+        items={filtered.map((item) => ({
+          id: item.id,
+          title: item.preview.title,
+          detail: item.id,
+          group: categoryPath(categoryOf(item)).join(" · "),
+        }))}
+      />
 
       <section className="stage">
         <CanvasStage width={format.width} height={format.height}>
@@ -210,7 +361,7 @@ export const ComponentsView = ({
         />
       </section>
 
-      <aside className="inspector">
+      <Inspector title={preview.title} hint={componentFile} source={sources}>
         <SectionTitle>Examples</SectionTitle>
         <ul className="list">
           {preview.examples.map((item) => (
@@ -233,7 +384,7 @@ export const ComponentsView = ({
 
         <SectionTitle>Component</SectionTitle>
         <dl className="facts">
-          <Fact label="category">{preview.category}</Fact>
+          <Fact label="category">{categoryPath(categoryOf(selected)).join(" · ")}</Fact>
           <Fact label="canvas">
             {preview.canvas.width}x{preview.canvas.height} · {String(preview.canvas.duration)}
           </Fact>
@@ -269,7 +420,7 @@ export const ComponentsView = ({
               {item.name}
             </Button>
           ))}
-          <Badge>{Object.keys(preview.controls ?? {}).length} controls</Badge>
+
         </div>
 
         <Separator />
@@ -279,7 +430,7 @@ export const ComponentsView = ({
         ) : (
           <p className="hint">This preview declares no controls. Add them to vary props in Studio.</p>
         )}
-      </aside>
+      </Inspector>
     </>
   );
 };

package/studio/src/views/HomeView.tsx

@@ -4,7 +4,8 @@ import {Thumbnail} from "../components/Thumbnail";
 import {AudioClip} from "../components/AudioClip";
 import {SectionTitle} from "../components/ui";
 import {collectBrands} from "./BrandsView";
-import {entryFor} from "./ComponentsView";
+import {categoryOf, entryFor} from "./ComponentsView";
+import {familyOf} from "odori/preview";
 import type {StudioView} from "../Studio";
 
 /**
@@ -14,19 +15,26 @@ import type {StudioView} from "../Studio";
  * is in here", which is the question you have on arrival, so each card plays a
  * frame of the real composition and opens the view that owns it.
  */
+/** Cards per section here. Home is an overview; each tab shows everything. */
+const SHOWN = 6;
+
 export const HomeView = ({onOpen}: {onOpen: (view: StudioView, selection?: string) => void}) => {
   const brands = collectBrands();
   const brand = brands[0];
-  const fonts = [
-    ...new Map(videos.flatMap((video) => resolveEntryLayout(video).brand.fonts).map((font) => [font.url, font])).values(),
-  ];
 
   return (
     <div className="home">
       <section>
-        <SectionTitle>Videos</SectionTitle>
+        <div className="section-head">
+          <SectionTitle>Videos</SectionTitle>
+          {videos.length > SHOWN ? (
+            <button type="button" className="view-all" onClick={() => onOpen("videos")}>
+              View all →
+            </button>
+          ) : null}
+        </div>
         <div className="gallery">
-          {videos.map((video) => {
+          {videos.slice(0, SHOWN).map((video) => {
             const layout = resolveEntryLayout(video);
             return (
               <button key={video.metadata.id} type="button" className="card" onClick={() => onOpen("videos", video.metadata.id)}>
@@ -34,12 +42,11 @@ export const HomeView = ({onOpen}: {onOpen: (view: StudioView, selection?: strin
                   entry={video}
                   frame={video.metadata.thumbnailFrame ?? Math.round(entryDurationInFrames(video, layout) * 0.4)}
                   durationInFrames={entryDurationInFrames(video, layout)}
+                  audioBadge
                 />
                 <div className="card-meta">
                   <strong>{video.metadata.title}</strong>
-                  <span>
-                    {layout.format.width}x{layout.format.height} · {video.metadata.id}
-                  </span>
+                  <span>{video.metadata.id}</span>
                 </div>
               </button>
             );
@@ -48,9 +55,16 @@ export const HomeView = ({onOpen}: {onOpen: (view: StudioView, selection?: strin
       </section>
 
       <section>
-        <SectionTitle>Components</SectionTitle>
+        <div className="section-head">
+          <SectionTitle>Components</SectionTitle>
+          {componentPreviews.length > SHOWN ? (
+            <button type="button" className="view-all" onClick={() => onOpen("components")}>
+              View all →
+            </button>
+          ) : null}
+        </div>
         <div className="gallery">
-          {componentPreviews.map((item) => {
+          {componentPreviews.slice(0, SHOWN).map((item) => {
             const defaults = Object.fromEntries(
               Object.entries(item.preview.controls ?? {}).map(([name, field]) => [name, field.defaultValue]),
             );
@@ -69,7 +83,9 @@ export const HomeView = ({onOpen}: {onOpen: (view: StudioView, selection?: strin
                 />
                 <div className="card-meta">
                   <strong>{item.preview.title}</strong>
-                  <span>{item.preview.category.toLowerCase()}</span>
+                  {/* The home card names the family, not the whole path: it
+                      is a glance, not a filing cabinet. */}
+                  <span>{familyOf(categoryOf(item)).toLowerCase() || "component"}</span>
                 </div>
               </button>
             );
@@ -78,14 +94,21 @@ export const HomeView = ({onOpen}: {onOpen: (view: StudioView, selection?: strin
       </section>
 
       <section>
-        <SectionTitle>Brands</SectionTitle>
+        <div className="section-head">
+          <SectionTitle>Brands</SectionTitle>
+          <button type="button" className="view-all" onClick={() => onOpen("brands")}>
+            View all →
+          </button>
+        </div>
         <div className="home-swatches">
           {brands.map((item) => (
             <button key={item.name} type="button" className="brand-card" onClick={() => onOpen("brands", item.name)}>
               <div className="swatch-colors">
+                {/* Keyed by position: two tokens can resolve to one color,
+                    and a color used twice is not one child twice. */}
                 {[item.colors.background, item.colors.surface, item.colors.foreground, item.colors.accent, item.colors.border].map(
-                  (color) => (
-                    <span key={color} style={{background: color}} />
+                  (color, position) => (
+                    <span key={position} style={{background: color}} />
                   ),
                 )}
               </div>
@@ -101,7 +124,12 @@ export const HomeView = ({onOpen}: {onOpen: (view: StudioView, selection?: strin
       </section>
 
       <section>
-        <SectionTitle>Assets</SectionTitle>
+        <div className="section-head">
+          <SectionTitle>Assets</SectionTitle>
+          <button type="button" className="view-all" onClick={() => onOpen("assets")}>
+            View all →
+          </button>
+        </div>
         <ul className="asset-list">
           {project.audio.slice(0, 4).map((entry) => (
             <li key={entry.url}>
@@ -113,9 +141,6 @@ export const HomeView = ({onOpen}: {onOpen: (view: StudioView, selection?: strin
             </li>
           ))}
         </ul>
-        <button type="button" className="home-more" onClick={() => onOpen("assets")}>
-          {project.assets.length} declared assets · {project.audio.length} sounds · {fonts.length} fonts
-        </button>
       </section>
     </div>
   );

package/studio/src/views/VideosView.tsx

@@ -19,22 +19,34 @@ import {Thumbnail} from "../components/Thumbnail";
 import {InputControls} from "../components/InputControls";
 import {ExportPanel} from "../components/ExportPanel";
 import {Diagnostics} from "../components/Diagnostics";
-import {Badge, Button, Empty, Fact, SectionTitle, Separator} from "../components/ui";
+import {Inspector} from "../components/Inspector";
+import {Navigator} from "../components/Navigator";
+import {Badge, Empty, Fact, SectionTitle, Separator} from "../components/ui";
 import {measureTrack} from "../lib/mix-loudness";
 import {useShortcuts} from "../shortcuts";
 
+/**
+ * What a cue is called in the mix, not what its file is called on disk. A
+ * generated cue's filename carries a 16-character content hash that means
+ * nothing while mixing and is wide enough to collide with the column beside
+ * it; the full filename stays one hover away.
+ */
+const cueLabel = (src: string): string => {
+  const file = src.split("/").pop() ?? src;
+  return file.replace(/-[0-9a-f]{16}\.wav$/, "");
+};
+
 export const VideosView = ({
   selection,
   onSelect,
-  mode,
 }: {
   selection: string | null;
   onSelect: (id: string) => void;
-  mode: "player" | "gallery";
 }) => {
-  // Finding one by name is ⌘K; this list is for browsing them all.
+  // Finding one by name is ⌘K; the gallery is for browsing them all. A route
+  // with no selection is the gallery; a selection is that video's player.
   const filtered = videos;
-  const selected = filtered.find((video) => video.metadata.id === selection) ?? filtered[0] ?? videos[0];
+  const selected = selection ? (filtered.find((video) => video.metadata.id === selection) ?? null) : null;
   const [input, setInput] = useState<Record<string, unknown>>({});
   const [timeline, setTimeline] = useState<CompiledTimeline | null>(null);
   const [track, setTrack] = useState<AudioTrack | null>(null);
@@ -150,7 +162,7 @@ export const VideosView = ({
     s: () => setShowSafeArea((value) => !value),
   });
 
-  if (!selected || !layout) {
+  if (videos.length === 0) {
     return (
       <Empty title="No videos yet">
         Create <code>{project.videosDir}/launch/video.tsx</code> or run <code>odori new launch</code>. A video exists
@@ -159,7 +171,7 @@ export const VideosView = ({
     );
   }
 
-  if (mode === "gallery") {
+  if (!selected || !layout) {
     return (
       <div className="gallery">
         {filtered.map((video) => {
@@ -169,19 +181,17 @@ export const VideosView = ({
               key={video.metadata.id}
               type="button"
               className="card"
-              data-active={video.metadata.id === selected.metadata.id ? "true" : undefined}
               onClick={() => onSelect(video.metadata.id)}
             >
               <Thumbnail
                 entry={video}
                 frame={video.metadata.thumbnailFrame ?? Math.round(entryDurationInFrames(video, videoLayout) * 0.4)}
                 durationInFrames={entryDurationInFrames(video, videoLayout)}
+                audioBadge
               />
               <div className="card-meta">
                 <strong>{video.metadata.title}</strong>
-                <span>
-                  {videoLayout.format.width}x{videoLayout.format.height} · {String(video.metadata.duration ?? "auto")}
-                </span>
+                <span>{String(video.metadata.duration ?? "auto")}</span>
               </div>
             </button>
           );
@@ -196,27 +206,24 @@ export const VideosView = ({
 
   return (
     <>
-      <aside className="sidebar">
-        <div className="sidebar-scroll">
-          <ul className="list">
-            {filtered.map((video) => (
-              <li key={video.metadata.id}>
-                <button
-                  type="button"
-                  className="list-item"
-                  data-active={video.metadata.id === selected.metadata.id ? "true" : undefined}
-                  onClick={() => onSelect(video.metadata.id)}
-                >
-                  {/* Format and duration are facts about the selection, and the
-                      inspector states both. The list is for choosing. */}
-                  <strong>{video.metadata.title}</strong>
-                </button>
-              </li>
-            ))}
-          </ul>
-
-        </div>
-      </aside>
+      {/* A video id is a path under videos/, so the folder is the grouping a
+          project already chose: social/announcement sits under social. */}
+      <Navigator
+        label="Videos"
+        selected={selected.metadata.id}
+        onSelect={onSelect}
+        items={[...filtered]
+          .sort((left, right) => left.metadata.id.localeCompare(right.metadata.id))
+          .map((video) => {
+            const parts = video.metadata.id.split("/");
+            return {
+              id: video.metadata.id,
+              title: video.metadata.title,
+              detail: String(video.metadata.duration ?? "auto"),
+              group: parts.length > 1 ? parts.slice(0, -1).join(" · ") : undefined,
+            };
+          })}
+      />
 
       <section className="stage">
         <CanvasStage
@@ -259,7 +266,18 @@ export const VideosView = ({
         />
       </section>
 
-      <aside className="inspector">
+      <Inspector title={selected.metadata.title} hint={file} source={file}>
+        {/* Export sits first: it is the pane's one action, and the header
+            names what is being worked on right above it. */}
+        <ExportPanel
+          videoId={selected.metadata.id}
+          input={input}
+          frame={playback.frame}
+          width={layout.format.width}
+          height={layout.format.height}
+        />
+        <Separator />
+
         <SectionTitle>Video</SectionTitle>
         <dl className="facts">
           <Fact label="id">{selected.metadata.id}</Fact>
@@ -282,11 +300,6 @@ export const VideosView = ({
           ) : null}
         </dl>
         {selected.metadata.description ? <p className="hint">{selected.metadata.description}</p> : null}
-        <div style={{marginTop: 8}}>
-          <Button variant="outline" active={showSafeArea} onClick={() => setShowSafeArea((value) => !value)}>
-            Safe area
-          </Button>
-        </div>
 
         {Object.keys(fields).length > 0 ? (
           <>
@@ -304,7 +317,7 @@ export const VideosView = ({
             <SectionTitle>Audio</SectionTitle>
             <dl className="facts">
               {track.cues.map((cue) => (
-                <Fact key={cue.id} label={cue.src.split("/").pop() ?? cue.src}>
+                <Fact key={cue.id} label={cueLabel(cue.src)} title={cue.src.split("/").pop()}>
                   {cue.fromFrame}-{cue.fromFrame + cue.durationInFrames - 1} · gain {cue.gain}
                   {cue.duckUnder ? ` · ducked to ${DUCK_GAIN}` : ""}
                   {soloCue === cue.id ? " · solo" : ""}
@@ -329,15 +342,7 @@ export const VideosView = ({
         ) : null}
 
         <Diagnostics entry={selected} timeline={timeline} track={track} />
-
-        <Separator />
-        <ExportPanel
-          videoId={selected.metadata.id}
-          input={input}
-          frame={playback.frame}
-          exportDir={project.exportDir}
-        />
-      </aside>
+      </Inspector>
     </>
   );
 };