@backmatter/studio 0.0.8 → 0.0.9

package/src/pages/MediaLightbox.tsx

@@ -6,7 +6,10 @@ import {
 } from "@central-icons-react/round-outlined-radius-2-stroke-1.5";
 import { useEffect, useState } from "react";
 import * as stylex from "@stylexjs/stylex";
+import { MAX_MEDIA_TEXT } from "@backmatter/core";
 import { colors, radius, space, type, z } from "../styles/tokens.stylex";
+import { Field } from "../ui/Field";
+import { Input } from "../ui/Input";
 import { Text } from "../ui/Text";
 import { cx, popup, popupClassName } from "../ui/popup";
 import type { CatalogMedia } from "./media-grid";
@@ -22,6 +25,8 @@ export function MediaLightbox({
   onPrev,
   onNext,
   onDelete,
+  canEdit = false,
+  onDescribe,
 }: {
   item: CatalogMedia;
   index: number;
@@ -30,6 +35,8 @@ export function MediaLightbox({
   onPrev: () => void;
   onNext: () => void;
   onDelete?: () => void;
+  canEdit?: boolean;
+  onDescribe?: (text: { alt?: string; caption?: string }) => Promise<void>;
 }) {
   const full = item.variants?.["1200"] ?? item.url;
   const [copied, setCopied] = useState(false);
@@ -41,6 +48,10 @@ export function MediaLightbox({
   useEffect(() => {
     const onKey = (event: KeyboardEvent) => {
       if (document.querySelector('[role="menu"], [role="alertdialog"]')) return;
+      const typing =
+        event.target instanceof HTMLElement &&
+        event.target.closest("input, textarea, select");
+      if (typing && event.key !== "Escape") return;
       if (event.key === "Escape" || event.key === " ") {
         event.preventDefault();
         onClose();
@@ -79,7 +90,12 @@ export function MediaLightbox({
           ‹
         </button>
         <div {...stylex.props(styles.frame)} onClick={(event) => event.stopPropagation()}>
-          <StageImage key={item.id} thumb={item.thumbUrl} full={full} alt={item.filename} />
+          <StageImage
+            key={item.id}
+            thumb={item.thumbUrl}
+            full={full}
+            alt={item.alt?.trim() || item.filename}
+          />
         </div>
         <button
           type="button"
@@ -162,6 +178,12 @@ export function MediaLightbox({
             <Fact label="Type" value={kindLabel(item.contentType)} />
             <Fact label="Added" value={addedLabel(item.createdAt)} />
           </dl>
+          <MediaText
+            key={item.id}
+            item={item}
+            canEdit={canEdit}
+            onDescribe={onDescribe}
+          />
           <div {...stylex.props(styles.urlBlock)}>
             <div {...stylex.props(styles.urlHead)}>
               <Text size="xs" tone="muted">
@@ -219,6 +241,71 @@ function StageImage({ thumb, full, alt }: { thumb: string; full: string; alt: st
   );
 }
 
+function MediaText({
+  item,
+  canEdit,
+  onDescribe,
+}: {
+  item: CatalogMedia;
+  canEdit: boolean;
+  onDescribe?: (text: { alt?: string; caption?: string }) => Promise<void>;
+}) {
+  const [alt, setAlt] = useState(item.alt ?? "");
+  const [caption, setCaption] = useState(item.caption ?? "");
+  const [error, setError] = useState<string | null>(null);
+
+  async function commit(field: "alt" | "caption", draft: string) {
+    const next = draft.trim();
+    const current = (item[field] ?? "").trim();
+    if (next === current || !onDescribe) return;
+    setError(null);
+    try {
+      await onDescribe({ [field]: next });
+    } catch (err) {
+      const code = err instanceof Error ? err.message : "";
+      setError(
+        code === "too_long" ? `Use ${MAX_MEDIA_TEXT} characters or fewer.` : code || "Could not save",
+      );
+    }
+  }
+
+  if (!canEdit) {
+    if (!item.alt?.trim() && !item.caption?.trim()) return null;
+    return (
+      <dl {...stylex.props(styles.facts)}>
+        {item.alt?.trim() ? <Fact label="Alt text" value={item.alt} /> : null}
+        {item.caption?.trim() ? <Fact label="Caption" value={item.caption} /> : null}
+      </dl>
+    );
+  }
+
+  return (
+    <div {...stylex.props(styles.textFields)}>
+      <Field label="Alt text">
+        <Input
+          value={alt}
+          maxLength={MAX_MEDIA_TEXT}
+          onChange={(event) => setAlt(event.target.value)}
+          onBlur={() => {
+            void commit("alt", alt);
+          }}
+        />
+      </Field>
+      <Field label="Caption">
+        <Input
+          value={caption}
+          maxLength={MAX_MEDIA_TEXT}
+          onChange={(event) => setCaption(event.target.value)}
+          onBlur={() => {
+            void commit("caption", caption);
+          }}
+        />
+      </Field>
+      {error ? <Text tone="danger">{error}</Text> : null}
+    </div>
+  );
+}
+
 function Fact({ label, value }: { label: string; value: string }) {
   return (
     <div {...stylex.props(styles.fact)}>
@@ -405,6 +492,11 @@ const styles = stylex.create({
     gap: space.lg,
     margin: 0,
   },
+  textFields: {
+    display: "flex",
+    flexDirection: "column",
+    gap: space.lg,
+  },
   fact: {
     display: "flex",
     flexDirection: "column",

package/src/pages/SettingsUsagePage.tsx

@@ -16,13 +16,18 @@ const SURFACES: { key: keyof WorkspaceUsage["dataRequests"]; label: string }[] =
   { key: "ai", label: "Assistant" },
 ];
 
+const IMAGES: { key: "transformations" | "cachedServes" | "uncachedServes"; label: string }[] = [
+  { key: "transformations", label: "Transformations" },
+  { key: "cachedServes", label: "Cached serves" },
+  { key: "uncachedServes", label: "Uncached serves" },
+];
+
 const WORK: { key: keyof WorkspaceUsage["work"]; label: string }[] = [
   { key: "commits", label: "Commits" },
   { key: "commitFiles", label: "Files committed" },
   { key: "imports", label: "Imports" },
   { key: "importFiles", label: "Files imported" },
   { key: "saves", label: "Saves" },
-  { key: "mediaTransforms", label: "Image transforms" },
 ];
 
 function formatBytes(value: number): string {
@@ -128,6 +133,23 @@ export function SettingsUsagePage() {
               </div>
             </dl>
           </Panel>
+          <Panel>
+            <Text as="h2" size="lg" weight="medium">
+              Images
+            </Text>
+            <dl {...stylex.props(styles.list)}>
+              {IMAGES.map((item) => (
+                <div key={item.key} {...stylex.props(styles.row)}>
+                  <dt {...stylex.props(styles.label)}>{item.label}</dt>
+                  <dd {...stylex.props(styles.value)}>{formatCount(usage.images[item.key])}</dd>
+                </div>
+              ))}
+              <div {...stylex.props(styles.row)}>
+                <dt {...stylex.props(styles.label)}>Transfer</dt>
+                <dd {...stylex.props(styles.value)}>{formatBytes(usage.images.bytes)}</dd>
+              </div>
+            </dl>
+          </Panel>
           <Panel>
             <Text as="h2" size="lg" weight="medium">
               AI

package/src/pages/media-grid.ts

@@ -8,6 +8,8 @@ export type CatalogMedia = {
   thumbUrl: string;
   width: number | null;
   height: number | null;
+  alt?: string;
+  caption?: string;
   contentType?: string;
   byteSize?: number;
   createdAt?: string;
@@ -128,6 +130,17 @@ export function receivePage(
   };
 }
 
+/** The saved alt text and caption replace that image wherever the grid is holding it. */
+export function describeMedia(state: MediaGridState, media: CatalogMedia): MediaGridState {
+  return {
+    ...state,
+    pending: state.pending.map((item) =>
+      item.media?.id === media.id ? { ...item, media } : item,
+    ),
+    loaded: state.loaded.map((item) => (item.id === media.id ? media : item)),
+  };
+}
+
 /** Drop a hidden row from the grid. A just-finished upload leaves its cell too. */
 export function removeMedia(state: MediaGridState, id: string): MediaGridState {
   const pending = state.pending.filter((item) => item.media?.id !== id);

package/src/pages/ui-kit/UiKitApp.tsx

@@ -0,0 +1,164 @@
+// packages/studio/src/pages/ui-kit/UiKitApp.tsx
+import { Navigate, NavLink, useLocation } from "react-router";
+import * as stylex from "@stylexjs/stylex";
+import { colors, radius, space, type } from "../../styles/tokens.stylex";
+import { useTheme, type ThemePreference } from "../../theme/ThemeProvider";
+import { Button } from "../../ui/Button";
+import { Text } from "../../ui/Text";
+import { UI_KIT_CATALOG } from "./catalog";
+import { resolveUiKitTopic } from "./topics";
+
+const THEME_OPTIONS: { value: ThemePreference; label: string }[] = [
+  { value: "system", label: "System" },
+  { value: "light", label: "Light" },
+  { value: "dark", label: "Dark" },
+];
+
+const GROUPS = ["Foundations", "Components", "Host"] as const;
+
+export function UiKitApp() {
+  const { pathname } = useLocation();
+  const path = pathname.replace(/\/$/, "") || "/";
+  const raw = path === "/__ui" ? undefined : path.slice("/__ui/".length);
+  const slug = resolveUiKitTopic(raw);
+  const { preference, setPreference } = useTheme();
+
+  if (path !== `/__ui/${slug}`) {
+    return <Navigate to={`/__ui/${slug}`} replace />;
+  }
+
+  const topic = UI_KIT_CATALOG.find((item) => item.slug === slug)!;
+  const Page = topic.Page;
+
+  return (
+    <div {...stylex.props(styles.frame)}>
+      <header {...stylex.props(styles.header)}>
+        <Text as="p" size="lg" weight="semibold">
+          UI kit
+        </Text>
+        <div {...stylex.props(styles.themes)} role="group" aria-label="Theme">
+          {THEME_OPTIONS.map((option) => (
+            <Button
+              key={option.value}
+              variant={preference === option.value ? "primary" : "secondary"}
+              aria-pressed={preference === option.value}
+              onClick={() => setPreference(option.value)}
+            >
+              {option.label}
+            </Button>
+          ))}
+        </div>
+      </header>
+      <div {...stylex.props(styles.body)}>
+        <nav {...stylex.props(styles.sidebar)} aria-label="UI kit">
+          {GROUPS.map((group) => (
+            <div key={group} {...stylex.props(styles.group)}>
+              <Text as="p" size="xs" tone="muted" weight="semibold">
+                {group}
+              </Text>
+              {UI_KIT_CATALOG.filter((item) => item.group === group).map((item) => (
+                <NavLink
+                  key={item.slug}
+                  to={`/__ui/${item.slug}`}
+                  {...stylex.props(styles.link)}
+                >
+                  {({ isActive }) => (
+                    <span
+                      {...stylex.props(styles.item, isActive && styles.itemActive)}
+                    >
+                      {item.title}
+                    </span>
+                  )}
+                </NavLink>
+              ))}
+            </div>
+          ))}
+        </nav>
+        <main {...stylex.props(styles.main)}>
+          <Page />
+        </main>
+      </div>
+    </div>
+  );
+}
+
+const hover = "@media (hover: hover)";
+
+const styles = stylex.create({
+  frame: {
+    display: "flex",
+    flexDirection: "column",
+    minHeight: "100dvh",
+    backgroundColor: colors.bgApp,
+    color: colors.text,
+    fontFamily: type.sans,
+  },
+  header: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: space.lg,
+    paddingInline: space.lg,
+    paddingBlock: space.md,
+    borderBottomWidth: 1,
+    borderBottomStyle: "solid",
+    borderBottomColor: colors.border,
+    backgroundColor: colors.bgSurface,
+  },
+  themes: {
+    display: "flex",
+    flexWrap: "wrap",
+    gap: space.sm,
+  },
+  body: {
+    display: "flex",
+    flex: 1,
+    minHeight: 0,
+  },
+  sidebar: {
+    width: "220px",
+    flexShrink: 0,
+    overflowY: "auto",
+    padding: space.lg,
+    backgroundColor: colors.bgSidebar,
+    borderRightWidth: 1,
+    borderRightStyle: "solid",
+    borderRightColor: colors.border,
+  },
+  group: {
+    display: "flex",
+    flexDirection: "column",
+    gap: space.xs,
+    marginBottom: space.lg,
+  },
+  link: {
+    display: "block",
+    color: "inherit",
+    textDecoration: "none",
+  },
+  item: {
+    display: "flex",
+    alignItems: "center",
+    borderRadius: radius.md,
+    paddingInline: space.md,
+    paddingBlock: space.sm,
+    fontSize: type.md,
+    fontWeight: 500,
+    color: colors.text,
+    [hover]: {
+      ":hover": {
+        backgroundColor: colors.bgHover,
+      },
+    },
+  },
+  itemActive: {
+    backgroundColor: colors.bgActive,
+  },
+  main: {
+    flex: 1,
+    minWidth: 0,
+    overflowY: "auto",
+    paddingInline: space.xxl,
+    paddingBlock: space.xxl,
+  },
+});

package/src/pages/ui-kit/buttons.tsx

@@ -0,0 +1,30 @@
+// packages/studio/src/pages/ui-kit/buttons.tsx
+import { Button, ButtonLink } from "../../ui/Button";
+import { Columns, Row, Specimen, Topic } from "./topic";
+import { UI_KIT_TOPICS } from "./topics";
+
+const topic = UI_KIT_TOPICS.find((item) => item.slug === "buttons")!;
+
+const VARIANTS = ["primary", "secondary", "ghost", "danger"] as const;
+
+export function ButtonsTopic() {
+  return (
+    <Topic title={topic.title} lede={topic.lede}>
+      <Columns>
+        {VARIANTS.map((variant) => (
+          <Specimen key={variant} label={variant}>
+            <Row>
+              <Button variant={variant}>{variant}</Button>
+              <Button variant={variant} disabled>
+                disabled
+              </Button>
+              <ButtonLink variant={variant} to="/__ui/buttons">
+                link
+              </ButtonLink>
+            </Row>
+          </Specimen>
+        ))}
+      </Columns>
+    </Topic>
+  );
+}

package/src/pages/ui-kit/catalog.tsx

@@ -0,0 +1,41 @@
+// packages/studio/src/pages/ui-kit/catalog.tsx
+import type { ComponentType } from "react";
+import { ButtonsTopic } from "./buttons";
+import { ColorsTopic } from "./colors";
+import { DevBarTopic } from "./devbar";
+import { FeedbackTopic } from "./feedback";
+import { FieldsTopic } from "./fields";
+import { ListsTopic } from "./lists";
+import { OverlaysTopic } from "./overlays";
+import { SectionsTopic } from "./sections";
+import { SurfacesTopic } from "./surfaces";
+import { Topic } from "./topic";
+import { TypeTopic } from "./type";
+import { UI_KIT_TOPICS, type UiKitTopicSlug } from "./topics";
+
+const PAGES = {
+  colors: ColorsTopic,
+  type: TypeTopic,
+  surfaces: SurfacesTopic,
+  sections: SectionsTopic,
+  buttons: ButtonsTopic,
+  fields: FieldsTopic,
+  lists: ListsTopic,
+  overlays: OverlaysTopic,
+  feedback: FeedbackTopic,
+  devbar: DevBarPage,
+} satisfies Record<UiKitTopicSlug, ComponentType>;
+
+function DevBarPage() {
+  const topic = UI_KIT_TOPICS.find((item) => item.slug === "devbar")!;
+  return (
+    <Topic title={topic.title} lede={topic.lede}>
+      <DevBarTopic />
+    </Topic>
+  );
+}
+
+export const UI_KIT_CATALOG = UI_KIT_TOPICS.map((topic) => ({
+  ...topic,
+  Page: PAGES[topic.slug],
+}));

package/src/pages/ui-kit/colors.tsx

@@ -0,0 +1,95 @@
+// packages/studio/src/pages/ui-kit/colors.tsx
+import * as stylex from "@stylexjs/stylex";
+import { colors, radius, space, type } from "../../styles/tokens.stylex";
+import { Topic } from "./topic";
+import { UI_KIT_TOPICS } from "./topics";
+
+const topic = UI_KIT_TOPICS.find((item) => item.slug === "colors")!;
+
+export function ColorsTopic() {
+  return (
+    <Topic title={topic.title} lede={topic.lede}>
+      <div {...stylex.props(styles.grid)}>
+        {SWATCHES.map(([name, fill]) => (
+          <figure key={name} {...stylex.props(styles.swatch)}>
+            <div {...stylex.props(styles.chip, fill)} />
+            <figcaption {...stylex.props(styles.name)}>{name}</figcaption>
+          </figure>
+        ))}
+      </div>
+    </Topic>
+  );
+}
+
+const styles = stylex.create({
+  grid: {
+    display: "grid",
+    gridTemplateColumns: "repeat(4, minmax(0, 1fr))",
+    gap: space.lg,
+    "@media (max-width: 800px)": {
+      gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
+    },
+  },
+  swatch: {
+    display: "flex",
+    flexDirection: "column",
+    gap: space.sm,
+    margin: 0,
+    minWidth: 0,
+  },
+  chip: {
+    height: "72px",
+    borderRadius: radius.md,
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderColor: colors.border,
+  },
+  name: {
+    fontFamily: type.mono,
+    fontSize: type.xs,
+    color: colors.textMuted,
+  },
+  bgApp: { backgroundColor: colors.bgApp },
+  bgSidebar: { backgroundColor: colors.bgSidebar },
+  bgPanel: { backgroundColor: colors.bgPanel },
+  bgPanelInset: { backgroundColor: colors.bgPanelInset },
+  bgSurface: { backgroundColor: colors.bgSurface },
+  bgHover: { backgroundColor: colors.bgHover },
+  bgActive: { backgroundColor: colors.bgActive },
+  bgInput: { backgroundColor: colors.bgInput },
+  bgStatus: { backgroundColor: colors.bgStatus },
+  text: { backgroundColor: colors.text },
+  textMuted: { backgroundColor: colors.textMuted },
+  textInverse: { backgroundColor: colors.textInverse },
+  border: { backgroundColor: colors.border },
+  accent: { backgroundColor: colors.accent },
+  accentHover: { backgroundColor: colors.accentHover },
+  accentMuted: { backgroundColor: colors.accentMuted },
+  danger: { backgroundColor: colors.danger },
+  success: { backgroundColor: colors.success },
+  overlay: { backgroundColor: colors.overlay },
+  focus: { backgroundColor: colors.focus },
+});
+
+const SWATCHES = [
+  ["bgApp", styles.bgApp],
+  ["bgSidebar", styles.bgSidebar],
+  ["bgPanel", styles.bgPanel],
+  ["bgPanelInset", styles.bgPanelInset],
+  ["bgSurface", styles.bgSurface],
+  ["bgHover", styles.bgHover],
+  ["bgActive", styles.bgActive],
+  ["bgInput", styles.bgInput],
+  ["bgStatus", styles.bgStatus],
+  ["text", styles.text],
+  ["textMuted", styles.textMuted],
+  ["textInverse", styles.textInverse],
+  ["border", styles.border],
+  ["accent", styles.accent],
+  ["accentHover", styles.accentHover],
+  ["accentMuted", styles.accentMuted],
+  ["danger", styles.danger],
+  ["success", styles.success],
+  ["overlay", styles.overlay],
+  ["focus", styles.focus],
+] as const;