@backmatter/studio 0.0.1

package/src/components/WorkspaceSwitcher.tsx

@@ -0,0 +1,345 @@
+// packages/studio/src/components/WorkspaceSwitcher.tsx
+import { useCallback, useMemo, useState } from "react";
+import { Link, useNavigate } from "react-router";
+import { Menu } from "@base-ui/react/menu";
+import * as stylex from "@stylexjs/stylex";
+import { colors, radius, space, type } from "../styles/tokens.stylex";
+import { useReplicaState } from "../replica/useReplica";
+import { cx, popup, popupClassName } from "../ui/popup";
+import { workspaceHomePath } from "../workspace-path";
+
+// StyleX needs at-rule keys to be file-local literals.
+const hover = "@media (hover: hover)";
+
+type Props = {
+  workspaceId: string;
+  workspaceName: string;
+};
+
+const AVATAR_TONES = [
+  "gold",
+  "rose",
+  "amber",
+  "violet",
+  "green",
+  "blue",
+  "slate",
+  "red",
+] as const;
+
+type AvatarTone = (typeof AVATAR_TONES)[number];
+
+export function WorkspaceSwitcher({
+  workspaceId,
+  workspaceName,
+}: Props) {
+  const navigate = useNavigate();
+  const [open, setOpen] = useState(false);
+  const replica = useReplicaState();
+  const workspaces = replica.control?.workspaces ?? [];
+
+  const flat = useMemo(
+    () => workspaces.map((workspace, index) => ({ ...workspace, shortcut: index + 1 })),
+    [workspaces],
+  );
+
+  const goToWorkspace = useCallback(
+    (id: string) => {
+      setOpen(false);
+      const next = workspaces.find((workspace) => workspace.id === id);
+      if (next && id !== workspaceId) navigate(workspaceHomePath(next.slug));
+    },
+    [navigate, workspaceId, workspaces],
+  );
+
+  // Number keys 1–9 jump straight to a workspace while the menu is open.
+  function onPopupKeyDown(e: React.KeyboardEvent) {
+    if (e.metaKey || e.ctrlKey || e.altKey) return;
+    const index = Number(e.key) - 1;
+    if (!Number.isInteger(index) || index < 0 || index > 8) return;
+    const next = flat[index];
+    if (!next) return;
+    e.preventDefault();
+    e.stopPropagation();
+    goToWorkspace(next.id);
+  }
+
+  const label = workspaceName;
+  const triggerTone = toneFor(workspaceId);
+
+  return (
+    <Menu.Root open={open} onOpenChange={setOpen}>
+      <Menu.Trigger
+        aria-label={`Current website ${workspaceName}`}
+        className={cx(styles.trigger)}
+      >
+        <Avatar name={workspaceName} tone={triggerTone} size="sm" />
+        <span {...stylex.props(styles.name)}>{workspaceName}</span>
+        <ChevronIcon />
+      </Menu.Trigger>
+      <Menu.Portal>
+        <Menu.Positioner
+          side="bottom"
+          align="start"
+          sideOffset={6}
+          className={cx(popup.positioner)}
+        >
+          <Menu.Popup
+            aria-label={label}
+            onKeyDown={onPopupKeyDown}
+            className={(state) => popupClassName(state, styles.menu)}
+          >
+            <div {...stylex.props(styles.list)}>
+              {flat.length === 0 ? (
+                <p {...stylex.props(popup.empty)}>No websites</p>
+              ) : (
+                flat.map((w) => {
+                  const active = w.id === workspaceId;
+                  return (
+                    <Menu.Item
+                      key={w.id}
+                      label={w.name}
+                      aria-current={active || undefined}
+                      onClick={() => goToWorkspace(w.id)}
+                      className={(state) =>
+                        cx(
+                          popup.item,
+                          styles.option,
+                          state.highlighted && popup.itemHighlighted,
+                        )
+                      }
+                    >
+                      <Avatar name={w.name} tone={toneFor(w.id)} size="md" />
+                      <span {...stylex.props(styles.optionName)}>{w.name}</span>
+                      {active ? (
+                        <span {...stylex.props(styles.check)} aria-hidden>
+                          <CheckIcon />
+                        </span>
+                      ) : null}
+                      {w.shortcut <= 9 ? (
+                        <span {...stylex.props(styles.shortcut)}>{w.shortcut}</span>
+                      ) : null}
+                    </Menu.Item>
+                  );
+                })
+              )}
+            </div>
+            <Menu.Separator className={cx(popup.separator)} />
+            <Menu.LinkItem
+              render={<Link to="/workspaces/new" />}
+              className={(state) =>
+                cx(popup.item, styles.footerAction, state.highlighted && popup.itemHighlighted)
+              }
+            >
+              New website…
+            </Menu.LinkItem>
+            <Menu.LinkItem
+              render={<Link to="/workspaces" />}
+              className={(state) =>
+                cx(popup.item, styles.footerAction, state.highlighted && popup.itemHighlighted)
+              }
+            >
+              All websites
+            </Menu.LinkItem>
+          </Menu.Popup>
+        </Menu.Positioner>
+      </Menu.Portal>
+    </Menu.Root>
+  );
+}
+
+function Avatar({
+  name,
+  tone,
+  size,
+}: {
+  name: string;
+  tone: AvatarTone;
+  size: "sm" | "md";
+}) {
+  return (
+    <span
+      aria-hidden
+      {...stylex.props(
+        styles.avatar,
+        size === "sm" ? styles.avatarSm : styles.avatarMd,
+        avatarTones[tone],
+      )}
+    >
+      {initials(name)}
+    </span>
+  );
+}
+
+function initials(name: string) {
+  const parts = name.trim().split(/[\s/_-]+/).filter(Boolean);
+  if (parts.length >= 2) {
+    return (parts[0]!.slice(0, 1) + parts[1]!.slice(0, 1)).toUpperCase();
+  }
+  const compact = name.replace(/[^A-Za-z0-9]/g, "");
+  return (compact.slice(0, 2) || name.slice(0, 2) || "?").toUpperCase();
+}
+
+function toneFor(id: string): AvatarTone {
+  let hash = 0;
+  for (let i = 0; i < id.length; i++) {
+    hash = (hash * 33) ^ id.charCodeAt(i);
+  }
+  return AVATAR_TONES[Math.abs(hash) % AVATAR_TONES.length]!;
+}
+
+function ChevronIcon() {
+  return (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 16 16"
+      fill="none"
+      aria-hidden
+      {...stylex.props(styles.chevron)}
+    >
+      <path
+        d="M4.5 6.25 8 9.75l3.5-3.5"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function CheckIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden>
+      <path
+        d="M3.5 8.5 6.5 11.5 12.5 4.5"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+const avatarTones = stylex.create({
+  gold: { backgroundColor: "#E8C547", color: "#18181b" },
+  rose: { backgroundColor: "#F4A5B8", color: "#18181b" },
+  amber: { backgroundColor: "#F2A65A", color: "#18181b" },
+  violet: { backgroundColor: "#7C5CBF", color: "#fafafa" },
+  green: { backgroundColor: "#3D9B74", color: "#fafafa" },
+  blue: { backgroundColor: "#3B82C4", color: "#fafafa" },
+  slate: { backgroundColor: "#3F3F46", color: "#fafafa" },
+  red: { backgroundColor: "#E06C75", color: "#fafafa" },
+});
+
+const styles = stylex.create({
+  trigger: {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: space.sm,
+    minHeight: "24px",
+    maxWidth: "220px",
+    paddingInline: space.xs,
+    borderRadius: radius.sm,
+    borderWidth: 0,
+    backgroundColor: "transparent",
+    color: colors.text,
+    fontSize: type.xs,
+    fontFamily: type.sans,
+    cursor: "pointer",
+    ":focus-visible": {
+      outlineWidth: 2,
+      outlineStyle: "solid",
+      outlineColor: colors.focus,
+      outlineOffset: "-2px",
+    },
+    [hover]: {
+      ":hover": {
+        backgroundColor: colors.bgHover,
+      },
+    },
+  },
+  name: {
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    fontWeight: 500,
+  },
+  chevron: {
+    flexShrink: 0,
+    color: colors.textMuted,
+  },
+  menu: {
+    width: "300px",
+    maxHeight: "min(var(--available-height), 420px)",
+    display: "flex",
+    flexDirection: "column",
+    overflow: "hidden",
+  },
+  list: {
+    minHeight: 0,
+    flex: 1,
+    overflowY: "auto",
+  },
+  group: {
+    paddingBottom: space.xs,
+  },
+  option: {
+    minHeight: "32px",
+    gap: space.md,
+    fontSize: type.xs,
+    fontWeight: 500,
+  },
+  optionName: {
+    minWidth: 0,
+    flex: 1,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+  },
+  check: {
+    display: "inline-flex",
+    flexShrink: 0,
+    color: colors.textMuted,
+  },
+  shortcut: {
+    flexShrink: 0,
+    minWidth: "12px",
+    color: colors.textMuted,
+    fontSize: type.xs,
+    fontVariantNumeric: "tabular-nums",
+    textAlign: "right",
+  },
+  footerAction: {
+    minHeight: "32px",
+    fontSize: type.xs,
+    fontWeight: 500,
+    color: colors.text,
+    textDecoration: "none",
+    cursor: "pointer",
+  },
+  avatar: {
+    display: "inline-flex",
+    flexShrink: 0,
+    alignItems: "center",
+    justifyContent: "center",
+    fontFamily: type.sans,
+    fontWeight: 600,
+    letterSpacing: "-0.04em",
+    userSelect: "none",
+  },
+  avatarSm: {
+    width: "16px",
+    height: "16px",
+    borderRadius: "4px",
+    fontSize: "8px",
+  },
+  avatarMd: {
+    width: "20px",
+    height: "20px",
+    borderRadius: "5px",
+    fontSize: "9px",
+  },
+});

package/src/content-blocks/index.tsx

@@ -0,0 +1,262 @@
+// packages/studio/src/content-blocks/index.tsx
+import * as stylex from "@stylexjs/stylex";
+import type { BlockSnapshot, SchemaField } from "../api";
+import { propsFromJsx } from "../pages/body-blocks";
+import { colors, radius, space, type } from "../styles/tokens.stylex";
+
+const LABELS: Record<string, string> = {
+  QuoteImage: "Quote with image",
+  Columns: "2 column",
+};
+
+const FIELD_HINTS: Record<string, Record<string, { label: string; multiline?: boolean }>> = {
+  Image: {
+    src: { label: "Image URL" },
+    alt: { label: "Alt text" },
+    caption: { label: "Caption" },
+  },
+  QuoteImage: {
+    quote: { label: "Quote", multiline: true },
+    attribution: { label: "Attribution" },
+    src: { label: "Image URL" },
+    alt: { label: "Alt text" },
+  },
+  Columns: {
+    left: { label: "Left", multiline: true },
+    right: { label: "Right", multiline: true },
+  },
+  Callout: {
+    title: { label: "Title" },
+    body: { label: "Body", multiline: true },
+  },
+};
+
+/** Menu label for a client-defined in-content block. */
+export function contentBlockLabel(name: string): string {
+  return LABELS[name] ?? name;
+}
+
+/** Schema fields, with editor labels for the built-in block names. */
+export function contentBlockFields(
+  block: BlockSnapshot,
+): Record<string, SchemaField & { label?: string; multiline?: boolean }> {
+  const hints = FIELD_HINTS[block.name];
+  if (!hints) return block.fields;
+  const fields: Record<string, SchemaField & { label?: string; multiline?: boolean }> = {
+    ...block.fields,
+  };
+  for (const [key, hint] of Object.entries(hints)) {
+    const field = fields[key];
+    if (!field) continue;
+    fields[key] = {
+      ...field,
+      label: hint.label,
+      ...(hint.multiline ? { multiline: true } : {}),
+    };
+  }
+  return fields;
+}
+
+export function contentBlockProps(markdown: string, name: string): Record<string, unknown> {
+  const props = propsFromJsx(markdown);
+  if (name !== "Image") return props;
+  if (typeof props.caption === "string" && props.caption.trim()) return props;
+  const match = /<Image\b[^>]*>\s*([\s\S]*?)\s*<\/Image>/.exec(markdown.trim());
+  const caption = match?.[1]?.replace(/<[^>]+>/g, "").trim();
+  if (!caption) return props;
+  return { ...props, caption };
+}
+
+function str(props: Record<string, unknown>, key: string): string {
+  const value = props[key];
+  return typeof value === "string" ? value : "";
+}
+
+export function ContentBlockView({
+  name,
+  props,
+}: {
+  name: string;
+  props: Record<string, unknown>;
+}) {
+  if (name === "Image") {
+    return <ImageBlock src={str(props, "src")} alt={str(props, "alt")} caption={str(props, "caption")} />;
+  }
+  if (name === "QuoteImage") {
+    return (
+      <QuoteImageBlock
+        quote={str(props, "quote")}
+        attribution={str(props, "attribution")}
+        src={str(props, "src")}
+        alt={str(props, "alt")}
+      />
+    );
+  }
+  if (name === "Columns") {
+    return <ColumnsBlock left={str(props, "left")} right={str(props, "right")} />;
+  }
+  if (name === "Callout") {
+    return <CalloutBlock title={str(props, "title")} body={str(props, "body")} />;
+  }
+  return (
+    <div {...stylex.props(styles.generic)}>
+      <p {...stylex.props(styles.genericName)}>{name}</p>
+    </div>
+  );
+}
+
+function ImageBlock({ src, alt, caption }: { src: string; alt: string; caption: string }) {
+  return (
+    <figure {...stylex.props(styles.figure)}>
+      {src ? (
+        <img src={src} alt={alt} {...stylex.props(styles.image)} />
+      ) : (
+        <div {...stylex.props(styles.placeholder)}>Image</div>
+      )}
+      {caption ? <figcaption {...stylex.props(styles.caption)}>{caption}</figcaption> : null}
+    </figure>
+  );
+}
+
+function QuoteImageBlock({
+  quote,
+  attribution,
+  src,
+  alt,
+}: {
+  quote: string;
+  attribution: string;
+  src: string;
+  alt: string;
+}) {
+  return (
+    <figure {...stylex.props(styles.quote)}>
+      {src ? (
+        <img src={src} alt={alt} {...stylex.props(styles.quoteImage)} />
+      ) : (
+        <div {...stylex.props(styles.quotePlaceholder)}>Image</div>
+      )}
+      <blockquote {...stylex.props(styles.quoteBody)}>
+        <p {...stylex.props(styles.quoteText)}>{quote || "Quote"}</p>
+        {attribution ? <footer {...stylex.props(styles.attribution)}>{attribution}</footer> : null}
+      </blockquote>
+    </figure>
+  );
+}
+
+function ColumnsBlock({ left, right }: { left: string; right: string }) {
+  return (
+    <div {...stylex.props(styles.columns)}>
+      <div {...stylex.props(styles.column)}>{left || "Left column"}</div>
+      <div {...stylex.props(styles.column)}>{right || "Right column"}</div>
+    </div>
+  );
+}
+
+function CalloutBlock({ title, body }: { title: string; body: string }) {
+  return (
+    <aside {...stylex.props(styles.callout)}>
+      {title ? <p {...stylex.props(styles.calloutTitle)}>{title}</p> : null}
+      <p {...stylex.props(styles.calloutBody)}>{body || "Callout"}</p>
+    </aside>
+  );
+}
+
+const styles = stylex.create({
+  figure: {
+    margin: 0,
+  },
+  image: {
+    display: "block",
+    width: "100%",
+    height: "auto",
+    borderRadius: radius.md,
+  },
+  placeholder: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    minHeight: "10rem",
+    borderRadius: radius.md,
+    backgroundColor: colors.bgPanel,
+    color: colors.textMuted,
+    fontSize: type.sm,
+  },
+  caption: {
+    marginTop: space.sm,
+    color: colors.textMuted,
+    fontSize: type.sm,
+    lineHeight: 1.4,
+  },
+  quote: {
+    display: "grid",
+    gridTemplateColumns: "7rem 1fr",
+    gap: space.lg,
+    alignItems: "center",
+    margin: 0,
+  },
+  quoteImage: {
+    width: "7rem",
+    height: "7rem",
+    objectFit: "cover",
+    borderRadius: radius.md,
+  },
+  quotePlaceholder: {
+    display: "flex",
+    width: "7rem",
+    height: "7rem",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: radius.md,
+    backgroundColor: colors.bgPanel,
+    color: colors.textMuted,
+    fontSize: type.xs,
+  },
+  quoteBody: {
+    margin: 0,
+  },
+  quoteText: {
+    margin: 0,
+    fontSize: type.lg,
+    lineHeight: 1.4,
+    whiteSpace: "pre-wrap",
+  },
+  attribution: {
+    marginTop: space.sm,
+    color: colors.textMuted,
+    fontSize: type.sm,
+  },
+  columns: {
+    display: "grid",
+    gridTemplateColumns: "1fr 1fr",
+    gap: space.lg,
+  },
+  column: {
+    minWidth: 0,
+    whiteSpace: "pre-wrap",
+    lineHeight: 1.5,
+  },
+  callout: {
+    margin: 0,
+    padding: space.lg,
+    borderRadius: radius.md,
+    backgroundColor: colors.bgPanel,
+  },
+  calloutTitle: {
+    margin: 0,
+    marginBottom: space.xs,
+    fontWeight: 600,
+  },
+  calloutBody: {
+    margin: 0,
+    whiteSpace: "pre-wrap",
+    lineHeight: 1.5,
+  },
+  generic: {
+    paddingBlock: space.sm,
+  },
+  genericName: {
+    margin: 0,
+    fontWeight: 600,
+  },
+});

package/src/css.d.ts

@@ -0,0 +1,2 @@
+// packages/studio/src/css.d.ts
+declare module "*.css";

package/src/dashboard.ts

@@ -0,0 +1,5 @@
+// packages/studio/src/dashboard.ts
+// Root of the hosted dashboard: login, workspaces, settings, and the Studio
+// against the CMS API with the first-party cookie.
+export { App as DashboardApp, isUiKitPath } from "./App";
+export { configureStudio, studioConfig, type StudioConfig } from "./studio-config";

package/src/define-studio.tsx

@@ -0,0 +1,98 @@
+// packages/studio/src/define-studio.tsx
+// Site-side customization of the Studio. The site's bundler builds the Studio,
+// so custom inputs and block previews are ordinary React components. The
+// dashboard runs with an empty definition.
+import { createContext, useContext, type ComponentType, type ReactNode } from "react";
+import type { SchemaField } from "./api";
+
+export type StudioFieldInputProps = {
+  /** Field name in the model or block. */
+  name: string;
+  field: SchemaField;
+  value: unknown;
+  readOnly?: boolean;
+  onChange: (next: unknown) => void;
+};
+
+export type StudioFieldInput = ComponentType<StudioFieldInputProps>;
+
+export type StudioBlockPreviewProps = {
+  type: string;
+  props: Record<string, unknown>;
+};
+
+export type StudioBlockConfig = {
+  /** Rendered above the block's fields when the block is expanded. */
+  preview?: ComponentType<StudioBlockPreviewProps>;
+  /** Shown next to the block name in the list. */
+  icon?: ReactNode;
+  /** Display name; the schema name is used when unset. */
+  label?: string;
+};
+
+export type StudioMenuItem = {
+  label: string;
+  href: string;
+};
+
+export type StudioDefinition = {
+  theme?: {
+    /** Accent color for primary actions and focus rings. */
+    accent?: string;
+  };
+  /**
+   * Inputs by name. A field opts in with `field.text({ input: "color" })`;
+   * a key that matches a field kind (`image`, `text`, …) applies to every
+   * field of that kind without an explicit input.
+   */
+  fields?: Record<string, StudioFieldInput>;
+  /** Per block name (as in `defineBlock({ name })`). */
+  blocks?: Record<string, StudioBlockConfig>;
+  /** Extra links in the Studio sidebar, e.g. back to the site. */
+  menu?: StudioMenuItem[];
+};
+
+/** Identity with types; keeps `backmatter.studio.tsx` checked and discoverable. */
+export function defineStudio(definition: StudioDefinition): StudioDefinition {
+  return definition;
+}
+
+const EMPTY: StudioDefinition = {};
+
+const StudioDefinitionContext = createContext<StudioDefinition>(EMPTY);
+
+export function StudioDefinitionProvider({
+  definition,
+  children,
+}: {
+  definition: StudioDefinition | undefined;
+  children: ReactNode;
+}) {
+  return (
+    <StudioDefinitionContext.Provider value={definition ?? EMPTY}>
+      {children}
+    </StudioDefinitionContext.Provider>
+  );
+}
+
+export function useStudioDefinition(): StudioDefinition {
+  return useContext(StudioDefinitionContext);
+}
+
+/** The custom input for a field: by its `input` name first, then by kind. */
+export function resolveFieldInput(
+  definition: StudioDefinition,
+  field: SchemaField | undefined,
+): StudioFieldInput | null {
+  if (!field || !definition.fields) return null;
+  if (field.input && definition.fields[field.input]) return definition.fields[field.input]!;
+  return definition.fields[field.kind] ?? null;
+}
+
+export function useFieldInput(field: SchemaField | undefined): StudioFieldInput | null {
+  return resolveFieldInput(useStudioDefinition(), field);
+}
+
+export function useBlockConfig(type: string): StudioBlockConfig | null {
+  return useStudioDefinition().blocks?.[type] ?? null;
+}