@backmatter/studio 0.0.7 → 0.0.9

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;

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

@@ -0,0 +1,160 @@
+// packages/studio/src/pages/ui-kit/devbar.tsx
+// Specimens of the host bar. This file stays free of StyleX so the markup
+// test can render it under bun, which does not compile StyleX.
+import { useState, type CSSProperties } from "react";
+import type { DevbarActivity } from "../../devbar-state";
+import { SiteBar } from "../../site-bar";
+
+const noop = () => {};
+
+const stageStyle: CSSProperties = {
+  position: "relative",
+  height: 96,
+  overflow: "hidden",
+  transform: "translateZ(0)",
+  ["--bm-devbar-right" as string]: "auto",
+  ["--bm-devbar-left" as string]: "12px",
+};
+
+const sampleDoc = {
+  locale: "en",
+  type: "page",
+  slug: "home",
+  workspaceId: "ws_sample",
+};
+
+export function DevBarTopic() {
+  const [play, setPlay] = useState(0);
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: 40 }}>
+      <style>{`
+        .ui-kit-devbar-label {
+          margin: 0 0 8px;
+          font-size: 14px;
+          font-weight: 600;
+          letter-spacing: -0.01em;
+          line-height: 1.3;
+        }
+        .ui-kit-devbar-stage {
+          width: 100%;
+        }
+        .ui-kit-devbar-reset {
+          align-self: flex-start;
+          height: 28px;
+          padding: 0 10px;
+          border: 1px solid currentColor;
+          border-radius: 8px;
+          background: transparent;
+          color: inherit;
+          font: 500 13px/1 ui-sans-serif, system-ui, sans-serif;
+          cursor: pointer;
+        }
+        .ui-kit-devbar-reset:focus-visible {
+          outline: 2px solid currentColor;
+          outline-offset: 2px;
+        }
+      `}</style>
+      <button
+        type="button"
+        className="ui-kit-devbar-reset"
+        onClick={() => setPlay((next) => next + 1)}
+      >
+        Reset
+      </button>
+      <Bar play={play} heading="Preview" siteMode="preview" />
+      <Bar play={play} heading="Live" siteMode="live" />
+      <Bar play={play} heading="Branch" siteMode="preview" branch="feat/sale" doc />
+      <Bar play={play} heading="Exiting" siteMode="preview" exiting />
+      <Bar play={play} heading="Agent" siteMode="preview" doc chatOpen />
+      <Bar play={play} heading="Publish" siteMode="live" doc changeCount={3} />
+      <Bar
+        play={play}
+        heading="Changes"
+        siteMode="preview"
+        doc
+        changeCount={3}
+        lineDiff={{ added: 14, removed: 2 }}
+      />
+      <Bar
+        play={play}
+        heading="Editing"
+        siteMode="preview"
+        doc
+        activity={{ type: "editing", field: "hero.title" }}
+      />
+      <Bar
+        play={play}
+        heading="Publishing"
+        siteMode="preview"
+        doc
+        activity={{
+          type: "publishing",
+          progress: 0.45,
+          steps: [
+            { label: "Commit", state: "done" },
+            { label: "PR #42", state: "done" },
+            { label: "Deploying 0:14", state: "active" },
+          ],
+        }}
+      />
+      <Bar
+        play={play}
+        heading="Published"
+        siteMode="live"
+        doc
+        activity={{ type: "published", sha: "3a9f21", when: "just now" }}
+      />
+    </div>
+  );
+}
+
+function Bar({
+  play,
+  heading,
+  siteMode,
+  branch,
+  exiting = false,
+  doc = false,
+  chatOpen = false,
+  changeCount = 0,
+  lineDiff,
+  activity = null,
+}: {
+  play: number;
+  heading: string;
+  siteMode: "preview" | "live";
+  branch?: string;
+  exiting?: boolean;
+  doc?: boolean;
+  chatOpen?: boolean;
+  changeCount?: number;
+  lineDiff?: { added: number; removed: number };
+  activity?: DevbarActivity | null;
+}) {
+  return (
+    <section style={{ display: "flex", flexDirection: "column" }}>
+      <h2 className="ui-kit-devbar-label">{heading}</h2>
+      <div className="ui-kit-devbar-stage" style={stageStyle}>
+        <SiteBar
+          key={play}
+          label="page/home"
+          branch={branch}
+          doc={doc ? sampleDoc : null}
+          siteMode={siteMode}
+          exiting={exiting}
+          chatOpen={chatOpen}
+          publishOpen={false}
+          changeCount={changeCount}
+          lineDiff={lineDiff}
+          activity={activity}
+          entrance="play"
+          onExit={noop}
+          onEnterPreview={noop}
+          onToggleChat={noop}
+          onTogglePublish={noop}
+        />
+      </div>
+    </section>
+  );
+}

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

@@ -0,0 +1,39 @@
+// packages/studio/src/pages/ui-kit/feedback.tsx
+import { StatusBar, StatusItem } from "../../chrome/StatusBar";
+import { Text } from "../../ui/Text";
+import { Columns, Specimen, Topic } from "./topic";
+import { UI_KIT_TOPICS } from "./topics";
+
+const topic = UI_KIT_TOPICS.find((item) => item.slug === "feedback")!;
+
+export function FeedbackTopic() {
+  return (
+    <Topic title={topic.title} lede={topic.lede}>
+      <Columns>
+      <Specimen label="StatusBar" block>
+        <StatusBar>
+          <StatusItem>main</StatusItem>
+          <StatusItem>2 uncommitted</StatusItem>
+        </StatusBar>
+      </Specimen>
+      <Specimen label="StatusBar" block>
+        <StatusBar>
+          <StatusItem>feat/sale</StatusItem>
+          <StatusItem>Unsaved</StatusItem>
+        </StatusBar>
+      </Specimen>
+      <Specimen label="danger" block>
+        <StatusBar>
+          <StatusItem tone="danger">Save failed</StatusItem>
+        </StatusBar>
+      </Specimen>
+      <Specimen label="success">
+        <Text tone="success">Success</Text>
+      </Specimen>
+      <Specimen label="danger">
+        <Text tone="danger">Danger</Text>
+      </Specimen>
+      </Columns>
+    </Topic>
+  );
+}

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

@@ -0,0 +1,47 @@
+// packages/studio/src/pages/ui-kit/fields.tsx
+import { useState } from "react";
+import { Field } from "../../ui/Field";
+import { Input, Select, Textarea } from "../../ui/Input";
+import { Columns, Specimen, Topic } from "./topic";
+import { UI_KIT_TOPICS } from "./topics";
+
+const topic = UI_KIT_TOPICS.find((item) => item.slug === "fields")!;
+
+export function FieldsTopic() {
+  const [locale, setLocale] = useState("en");
+
+  return (
+    <Topic title={topic.title} lede={topic.lede}>
+      <Columns>
+      <Specimen label="Input" block>
+        <Field label="Text" hint="Shown under the field.">
+          <Input defaultValue="Ada Lovelace" autoComplete="off" spellCheck={false} />
+        </Field>
+      </Specimen>
+      <Specimen label="disabled" block>
+        <Field label="Disabled">
+          <Input defaultValue="Locked" disabled />
+        </Field>
+      </Specimen>
+      <Specimen label="Select" block>
+        <Field label="Select">
+          <Select
+            aria-label="Locale"
+            value={locale}
+            onValueChange={(next) => setLocale(next ?? "en")}
+            options={[
+              { value: "en", label: "English (en)" },
+              { value: "da", label: "Dansk (da)" },
+            ]}
+          />
+        </Field>
+      </Specimen>
+      <Specimen label="Textarea" block>
+        <Field label="Body">
+          <Textarea mono rows={4} defaultValue={"---\ntitle: Hello\n---\n\nParagraph."} />
+        </Field>
+      </Specimen>
+      </Columns>
+    </Topic>
+  );
+}

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

@@ -0,0 +1,19 @@
+// packages/studio/src/pages/ui-kit/lists.tsx
+import { List, ListRow } from "../../ui/ListRow";
+import { Specimen, Topic } from "./topic";
+import { UI_KIT_TOPICS } from "./topics";
+
+const topic = UI_KIT_TOPICS.find((item) => item.slug === "lists")!;
+
+export function ListsTopic() {
+  return (
+    <Topic title={topic.title} lede={topic.lede}>
+      <Specimen label="List" block>
+        <List>
+          <ListRow to="/__ui/lists" title="hello" meta="en" />
+          <ListRow to="/__ui/lists" title="about" meta="da" />
+        </List>
+      </Specimen>
+    </Topic>
+  );
+}

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

@@ -0,0 +1,39 @@
+// packages/studio/src/pages/ui-kit/overlays.tsx
+import { useState } from "react";
+import { Button } from "../../ui/Button";
+import { ConfirmDialog } from "../../ui/ConfirmDialog";
+import { Tooltip, TooltipProvider } from "../../ui/Tooltip";
+import { Columns, Specimen, Topic } from "./topic";
+import { UI_KIT_TOPICS } from "./topics";
+
+const topic = UI_KIT_TOPICS.find((item) => item.slug === "overlays")!;
+
+export function OverlaysTopic() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <TooltipProvider>
+      <Topic title={topic.title} lede={topic.lede}>
+        <Columns>
+        <Specimen label="ConfirmDialog">
+          <Button onClick={() => setOpen(true)}>Open dialog</Button>
+          <ConfirmDialog
+            open={open}
+            onOpenChange={setOpen}
+            title="Delete this sample?"
+            confirmLabel="Delete"
+            cancelLabel="Cancel"
+            destructive
+            onConfirm={() => setOpen(false)}
+          />
+        </Specimen>
+        <Specimen label="Tooltip">
+          <Tooltip label="Sample tooltip">
+            <Button variant="secondary">Hover</Button>
+          </Tooltip>
+        </Specimen>
+        </Columns>
+      </Topic>
+    </TooltipProvider>
+  );
+}

package/src/pages/ui-kit/path.ts

@@ -0,0 +1,9 @@
+// packages/studio/src/pages/ui-kit/path.ts
+import { isStudioDev } from "../../studio-config";
+
+/** Dev-only catalog: `/__ui` or `/__ui/` plus one segment. */
+export function isUiKitPath(pathname: string) {
+  if (!isStudioDev()) return false;
+  const path = pathname.replace(/\/$/, "") || "/";
+  return path === "/__ui" || /^\/__ui\/[^/]+$/.test(path);
+}

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

@@ -0,0 +1,32 @@
+// packages/studio/src/pages/ui-kit/sections.tsx
+import { BackLink } from "../../ui/BackLink";
+import { Button } from "../../ui/Button";
+import { PageHeader, Panel, Stack } from "../../ui/Page";
+import { Text } from "../../ui/Text";
+import { Specimen, Topic } from "./topic";
+import { UI_KIT_TOPICS } from "./topics";
+
+const topic = UI_KIT_TOPICS.find((item) => item.slug === "sections")!;
+
+export function SectionsTopic() {
+  return (
+    <Topic title={topic.title} lede={topic.lede}>
+      <Specimen label="PageHeader" block>
+        <PageHeader
+          kicker={<BackLink to="/__ui/sections">Sections</BackLink>}
+          title="Documents"
+          description="Sample page header with action."
+          action={<Button>New</Button>}
+        />
+      </Specimen>
+      <Specimen label="Panel" block>
+        <Panel>
+          <Stack>
+            <Text>First line</Text>
+            <Text>Second line</Text>
+          </Stack>
+        </Panel>
+      </Specimen>
+    </Topic>
+  );
+}