@backmatter/studio 0.0.15 → 0.0.17

package/src/ui/Input.tsx

@@ -1,5 +1,5 @@
 // packages/studio/src/ui/Input.tsx
-import type { ComponentPropsWithoutRef } from "react";
+import { useState, type ComponentPropsWithoutRef } from "react";
 import { Input as BaseInput } from "@base-ui/react/input";
 import { Select as BaseSelect } from "@base-ui/react/select";
 import * as stylex from "@stylexjs/stylex";
@@ -9,7 +9,7 @@ import { cx, popup, popupClassName } from "./popup";
 type Props = Omit<ComponentPropsWithoutRef<"input">, "className" | "style">;
 
 export function Input(props: Props) {
-  return <BaseInput {...props} {...stylex.props(styles.input)} />;
+  return <BaseInput {...stylex.props(styles.input, styles.inputFocus)} {...props} />;
 }
 
 export type SelectOption = { value: string; label: string; disabled?: boolean };
@@ -22,6 +22,9 @@ export function Select({
   placeholder = "Select…",
   name,
   disabled,
+  chip = false,
+  clearable = false,
+  searchable = false,
   "aria-label": ariaLabel,
   id,
 }: {
@@ -31,34 +34,100 @@ export function Select({
   placeholder?: string;
   name?: string;
   disabled?: boolean;
+  /** Selected value sits in the field as a removable chip. */
+  chip?: boolean;
+  /** Chip × and the field clear control clear the value. Ignored when `chip` is false. */
+  clearable?: boolean;
+  /** Filter the menu by label or value. The closed field stays a select. */
+  searchable?: boolean;
   "aria-label"?: string;
   id?: string;
 }) {
+  const selected = options.find((opt) => opt.value === value) ?? null;
+  const [search, setSearch] = useState("");
+  const query = search.trim().toLowerCase();
+  const visible = query
+    ? options.filter(
+        (opt) =>
+          opt.label.toLowerCase().includes(query) || opt.value.toLowerCase().includes(query),
+      )
+    : options;
+  const clear = (event: { preventDefault: () => void; stopPropagation: () => void }) => {
+    event.preventDefault();
+    event.stopPropagation();
+    onValueChange(null);
+  };
   return (
     <BaseSelect.Root
       items={options}
       value={value}
       onValueChange={(next) => onValueChange(typeof next === "string" ? next : null)}
+      onOpenChange={(open) => {
+        if (!open) setSearch("");
+      }}
       name={name}
       disabled={disabled}
     >
       <BaseSelect.Trigger
         id={id}
         aria-label={ariaLabel}
+        data-no-ring=""
         className={cx(styles.input, styles.selectTrigger)}
       >
-        <BaseSelect.Value placeholder={placeholder} className={cx(styles.selectValue)} />
-        <BaseSelect.Icon className={cx(styles.selectIcon)}>
-          <svg width="12" height="12" viewBox="0 0 16 16" fill="none" aria-hidden>
-            <path
-              d="M4.5 6.25 8 9.75l3.5-3.5"
-              stroke="currentColor"
-              strokeWidth="1.5"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            />
-          </svg>
-        </BaseSelect.Icon>
+        {chip && selected ? (
+          <span {...stylex.props(styles.chip)}>
+            <span {...stylex.props(styles.chipLabel)}>{selected.label}</span>
+            {clearable && !disabled ? (
+              <span
+                data-select-clear
+                aria-hidden
+                {...stylex.props(styles.chipRemove)}
+                onPointerDown={(event) => event.stopPropagation()}
+                onClick={clear}
+              >
+                ×
+              </span>
+            ) : null}
+          </span>
+        ) : (
+          <BaseSelect.Value
+            placeholder={placeholder}
+            className={cx(styles.selectValue, chip && styles.placeholder)}
+          />
+        )}
+        <span {...stylex.props(styles.selectActions)}>
+          {chip && clearable && selected && !disabled ? (
+            <span
+              data-select-clear
+              role="button"
+              aria-label="Clear"
+              {...stylex.props(styles.fieldClear)}
+              onPointerDown={(event) => event.stopPropagation()}
+              onClick={clear}
+            >
+              <svg width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden>
+                <circle cx="8" cy="8" r="6.25" stroke="currentColor" strokeWidth="1.25" />
+                <path
+                  d="M6 6l4 4M10 6l-4 4"
+                  stroke="currentColor"
+                  strokeWidth="1.25"
+                  strokeLinecap="round"
+                />
+              </svg>
+            </span>
+          ) : null}
+          <BaseSelect.Icon className={cx(styles.selectIcon)}>
+            <svg width="12" height="12" viewBox="0 0 16 16" fill="none" aria-hidden>
+              <path
+                d="M4.5 6.25 8 9.75l3.5-3.5"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </svg>
+          </BaseSelect.Icon>
+        </span>
       </BaseSelect.Trigger>
       <BaseSelect.Portal>
         <BaseSelect.Positioner
@@ -69,8 +138,27 @@ export function Select({
           className={cx(popup.positioner)}
         >
           <BaseSelect.Popup className={(state) => popupClassName(state, styles.selectPopup)}>
+            {searchable ? (
+              <input
+                data-select-search
+                data-no-ring=""
+                value={search}
+                placeholder="Search"
+                spellCheck={false}
+                autoComplete="off"
+                className={cx(popup.searchInput)}
+                onChange={(event) => setSearch(event.target.value)}
+                onMouseDown={(event) => {
+                  event.preventDefault();
+                  event.stopPropagation();
+                  event.currentTarget.focus();
+                }}
+                onPointerDown={(event) => event.stopPropagation()}
+                onKeyDown={(event) => event.stopPropagation()}
+              />
+            ) : null}
             <BaseSelect.List>
-              {options.map((opt) => (
+              {visible.map((opt) => (
                 <BaseSelect.Item
                   key={opt.value}
                   value={opt.value}
@@ -115,10 +203,10 @@ export function Textarea({
 }: Omit<ComponentPropsWithoutRef<"textarea">, "className" | "style"> & {
   mono?: boolean;
 }) {
-  return (
+    return (
     <textarea
       {...props}
-      {...stylex.props(styles.input, styles.textarea, mono && styles.mono)}
+      {...stylex.props(styles.input, styles.inputFocus, styles.textarea, mono && styles.mono)}
     />
   );
 }
@@ -137,6 +225,11 @@ const styles = stylex.create({
     color: colors.text,
     fontSize: type.md,
     outline: "none",
+    ":disabled": {
+      opacity: 0.55,
+    },
+  },
+  inputFocus: {
     ":focus": {
       borderColor: colors.focus,
       outlineWidth: 2,
@@ -144,9 +237,6 @@ const styles = stylex.create({
       outlineColor: colors.focus,
       outlineOffset: -1,
     },
-    ":disabled": {
-      opacity: 0.55,
-    },
   },
   selectTrigger: {
     display: "flex",
@@ -156,6 +246,22 @@ const styles = stylex.create({
     textAlign: "left",
     fontFamily: type.sans,
     cursor: "pointer",
+    outline: "none",
+    boxShadow: "none",
+    ":focus": {
+      borderColor: colors.border,
+      outlineStyle: "none",
+      outlineWidth: 0,
+      outlineOffset: 0,
+      boxShadow: "none",
+    },
+    ":focus-visible": {
+      borderColor: colors.border,
+      outlineStyle: "none",
+      outlineWidth: 0,
+      outlineOffset: 0,
+      boxShadow: "none",
+    },
   },
   selectValue: {
     minWidth: 0,
@@ -163,6 +269,58 @@ const styles = stylex.create({
     textOverflow: "ellipsis",
     whiteSpace: "nowrap",
   },
+  placeholder: {
+    color: colors.textMuted,
+  },
+  chip: {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: space.xs,
+    maxWidth: "100%",
+    minHeight: "22px",
+    paddingInline: space.sm,
+    paddingBlock: "1px",
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderColor: colors.border,
+    borderRadius: radius.sm,
+    backgroundColor: colors.bgHover,
+    color: colors.text,
+    fontSize: type.sm,
+  },
+  chipLabel: {
+    minWidth: 0,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+  },
+  chipRemove: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    margin: 0,
+    padding: 0,
+    borderWidth: 0,
+    backgroundColor: "transparent",
+    color: colors.textMuted,
+    fontSize: type.sm,
+    lineHeight: 1,
+    cursor: "pointer",
+  },
+  selectActions: {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: space.xs,
+    flexShrink: 0,
+    marginLeft: "auto",
+  },
+  fieldClear: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    color: colors.textMuted,
+    cursor: "pointer",
+  },
   selectIcon: {
     display: "inline-flex",
     flexShrink: 0,

package/src/ui/ListRow.tsx

@@ -11,13 +11,13 @@ export function ListRow({
   meta,
   trailing,
 }: {
-  to: string;
+  to?: string;
   title: string;
   meta?: string;
   trailing?: string;
 }) {
-  return (
-    <Link to={to} {...stylex.props(styles.row)}>
+  const body = (
+    <>
       <span {...stylex.props(styles.body)}>
         <span {...stylex.props(styles.title)}>{title}</span>
         {meta ? <span {...stylex.props(styles.meta)}>{meta}</span> : null}
@@ -25,6 +25,12 @@ export function ListRow({
       {trailing ? (
         <span {...stylex.props(styles.trailing)}>{trailing}</span>
       ) : null}
+    </>
+  );
+  if (!to) return <div {...stylex.props(styles.row, styles.static)}>{body}</div>;
+  return (
+    <Link to={to} {...stylex.props(styles.row)}>
+      {body}
     </Link>
   );
 }
@@ -66,6 +72,9 @@ const styles = stylex.create({
       },
     },
   },
+  static: {
+    cursor: "default",
+  },
   body: {
     display: "flex",
     minWidth: 0,

package/src/ui/Page.tsx

@@ -6,10 +6,12 @@ export function PageFrame({
   children,
   flush,
   centered,
+  wide,
 }: {
   children: React.ReactNode;
   flush?: boolean;
   centered?: boolean;
+  wide?: boolean;
 }) {
   return (
     <div
@@ -22,7 +24,13 @@ export function PageFrame({
       {flush ? (
         children
       ) : (
-        <div {...stylex.props(styles.inner, centered && styles.innerCentered)}>
+        <div
+          {...stylex.props(
+            styles.inner,
+            centered && styles.innerCentered,
+            wide && styles.innerWide,
+          )}
+        >
           {children}
         </div>
       )}
@@ -108,6 +116,9 @@ const styles = stylex.create({
   innerCentered: {
     maxWidth: "440px",
   },
+  innerWide: {
+    maxWidth: "960px",
+  },
   header: {
     display: "flex",
     alignItems: "flex-start",

package/src/ui/popup.ts

@@ -183,11 +183,20 @@ export const popup = stylex.create({
     fontFamily: type.sans,
     fontSize: type.sm,
     outline: "none",
+    boxShadow: "none",
     ":focus": {
-      outline: "none",
+      outlineStyle: "none",
+      outlineWidth: 0,
+      outlineOffset: 0,
+      boxShadow: "none",
+      borderBottomColor: colors.border,
     },
     ":focus-visible": {
-      outline: "none",
+      outlineStyle: "none",
+      outlineWidth: 0,
+      outlineOffset: 0,
+      boxShadow: "none",
+      borderBottomColor: colors.border,
     },
     "::placeholder": {
       color: colors.textMuted,

package/src/workspace-path.ts

@@ -3,6 +3,14 @@ export function workspaceHomePath(slug: string) {
   return `/${slug}`;
 }
 
+/** The workspace index. Content, media, and settings are deeper routes. */
+export function isWorkspaceHomePath(pathname: string) {
+  const slug = cmsWorkspaceSlug(pathname);
+  if (!slug) return false;
+  const path = pathname.split("?")[0]?.replace(/\/$/, "") || "/";
+  return path === `/${slug}`;
+}
+
 export function contentTypePath(slug: string, type: string) {
   return `/${slug}/content/${type}`;
 }
@@ -15,6 +23,10 @@ export function mediaPath(slug: string) {
   return `/${slug}/media`;
 }
 
+export function codeSessionPath(slug: string) {
+  return `/${slug}/code`;
+}
+
 export function settingsPath(slug: string, page: string) {
   return `/${slug}/settings/${page}`;
 }
@@ -71,19 +83,33 @@ export function isWorkspaceMediaPath(pathname: string) {
   return /\/media\/?$/.test(pathname);
 }
 
+export function isWorkspaceCodePath(pathname: string) {
+  return /\/code\/?$/.test(pathname);
+}
+
 /** The content file tree belongs on content routes only. */
 export function isWorkspaceContentPath(pathname: string) {
   return /\/content(?:\/|$)/.test(pathname);
 }
 
+/** The content index. The file tree lives here; the workspace home does not. */
+export function contentIndexPath(slug: string) {
+  return `/${slug}/content`;
+}
+
+export function isWorkspaceContentIndexPath(pathname: string) {
+  const path = pathname.split("?")[0]?.replace(/\/$/, "") || "/";
+  return /\/content$/.test(path);
+}
+
 /**
  * Where the content rail icon navigates.
  * On a content route it stays put: a document toggles the file tree, and the
- * type index is already the file tree.
- * Anywhere else (settings, media, connect): the workspace home, which opens the docs.
+ * content index is already the file tree.
+ * Anywhere else (home, settings, media, connect): `/content`.
  */
 export function contentRailHref(pathname: string, slug: string): string | null {
-  if (!isWorkspaceContentPath(pathname)) return workspaceHomePath(slug);
+  if (!isWorkspaceContentPath(pathname)) return contentIndexPath(slug);
   return null;
 }
 
@@ -101,6 +127,12 @@ export function isOrgPickerPath(pathname: string) {
   return path === "/invite";
 }
 
+/** The workspace list and create form. The app sidebar repeats this list. */
+export function isWorkspaceListPath(pathname: string) {
+  const path = pathname.split("?")[0]?.replace(/\/$/, "") || "/";
+  return path === "/workspaces" || path === "/workspaces/new";
+}
+
 /** CLI approval is a full-screen form, not a workspace. */
 export function isCliAuthorizePath(pathname: string) {
   const path = pathname.replace(/\/$/, "") || "/";

package/src/chrome/ContentApiPopover.tsx

@@ -1,215 +0,0 @@
-// packages/studio/src/chrome/ContentApiPopover.tsx
-import { useEffect, useState } from "react";
-import { Popover } from "@base-ui/react/popover";
-import * as stylex from "@stylexjs/stylex";
-import { publicApiUrl } from "../studio-config";
-import { colors, radius, space, type } from "../styles/tokens.stylex";
-import { cx, popup, popupClassName } from "../ui/popup";
-import { contentApiLinks } from "./content-api-url";
-import { ApiIcon } from "./icons";
-
-const hover = "@media (hover: hover)";
-
-function CopyUrl({ label, href }: { label: string; href: string }) {
-  const [copied, setCopied] = useState(false);
-
-  useEffect(() => {
-    if (!copied) return;
-    const id = window.setTimeout(() => setCopied(false), 1500);
-    return () => window.clearTimeout(id);
-  }, [copied]);
-
-  async function copy() {
-    try {
-      await navigator.clipboard.writeText(href);
-      setCopied(true);
-    } catch {
-      setCopied(false);
-    }
-  }
-
-  return (
-    <div {...stylex.props(styles.row)}>
-      <p {...stylex.props(popup.groupLabel)}>{label}</p>
-      <div {...stylex.props(styles.urlRow)}>
-        <a
-          href={href}
-          target="_blank"
-          rel="noreferrer"
-          {...stylex.props(styles.href)}
-        >
-          {href}
-        </a>
-        <button
-          type="button"
-          onClick={() => void copy()}
-          aria-label={copied ? "Copied" : `Copy ${label} URL`}
-          {...stylex.props(styles.copy)}
-        >
-          {copied ? "Copied" : "Copy"}
-        </button>
-      </div>
-    </div>
-  );
-}
-
-export function ContentApiPopover({
-  workspaceId,
-  branch,
-  defaultBranch,
-  pathname,
-  search,
-}: {
-  workspaceId: string;
-  branch?: string | null;
-  defaultBranch?: string | null;
-  pathname: string;
-  search?: string;
-}) {
-  const links = contentApiLinks({
-    apiUrl: publicApiUrl(),
-    workspaceId,
-    branch,
-    defaultBranch,
-    pathname,
-    search,
-  });
-  const locked = Boolean(branch && defaultBranch && branch !== defaultBranch);
-
-  return (
-    <Popover.Root>
-      <Popover.Trigger aria-label="Content API" className={cx(styles.trigger)}>
-        <ApiIcon />
-        <span>API</span>
-      </Popover.Trigger>
-      <Popover.Portal>
-        <Popover.Positioner
-          side="bottom"
-          align="start"
-          sideOffset={6}
-          className={cx(popup.positioner)}
-        >
-          <Popover.Popup
-            aria-label="Content API"
-            className={(state) => popupClassName(state, styles.popup)}
-          >
-            <p {...stylex.props(popup.groupLabel)}>Content API</p>
-            <p {...stylex.props(styles.hint)}>
-              {locked
-                ? "This branch needs the content token from Settings → General."
-                : "Default branch is public — no token. URLs use the workspace id."}
-            </p>
-            {links.map((link) => (
-              <CopyUrl key={link.href} label={link.label} href={link.href} />
-            ))}
-          </Popover.Popup>
-        </Popover.Positioner>
-      </Popover.Portal>
-    </Popover.Root>
-  );
-}
-
-const styles = stylex.create({
-  trigger: {
-    display: "inline-flex",
-    alignItems: "center",
-    gap: space.xs,
-    minHeight: "24px",
-    paddingInline: space.xs,
-    borderWidth: 0,
-    backgroundColor: "transparent",
-    color: colors.textMuted,
-    fontSize: type.xs,
-    fontFamily: type.mono,
-    cursor: "pointer",
-    touchAction: "manipulation",
-    ":focus-visible": {
-      outlineWidth: 2,
-      outlineStyle: "solid",
-      outlineColor: colors.focus,
-      outlineOffset: "-2px",
-    },
-    [hover]: {
-      ":hover": {
-        color: colors.text,
-      },
-    },
-  },
-  popup: {
-    width: "380px",
-    paddingBottom: space.md,
-    overflow: "hidden",
-  },
-  hint: {
-    margin: 0,
-    paddingInline: space.lg,
-    paddingBottom: space.sm,
-    fontFamily: type.mono,
-    fontSize: type.xs,
-    lineHeight: 1.45,
-    color: colors.textMuted,
-  },
-  row: {
-    display: "flex",
-    flexDirection: "column",
-    gap: space.xs,
-    paddingBottom: space.sm,
-  },
-  urlRow: {
-    display: "flex",
-    alignItems: "center",
-    gap: space.sm,
-    minWidth: 0,
-    marginInline: space.lg,
-  },
-  href: {
-    minWidth: 0,
-    flex: 1,
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    whiteSpace: "nowrap",
-    color: colors.text,
-    fontFamily: type.mono,
-    fontSize: type.xs,
-    textDecoration: "none",
-    [hover]: {
-      ":hover": {
-        textDecoration: "underline",
-      },
-    },
-    ":focus-visible": {
-      outlineWidth: 2,
-      outlineStyle: "solid",
-      outlineColor: colors.focus,
-      outlineOffset: 2,
-    },
-  },
-  copy: {
-    flexShrink: 0,
-    minWidth: "52px",
-    minHeight: "24px",
-    paddingInline: space.sm,
-    borderWidth: 1,
-    borderStyle: "solid",
-    borderColor: colors.border,
-    borderRadius: radius.md,
-    backgroundColor: colors.bgSurface,
-    color: colors.textMuted,
-    fontSize: type.xs,
-    fontFamily: type.sans,
-    cursor: "pointer",
-    touchAction: "manipulation",
-    [hover]: {
-      ":hover": {
-        color: colors.text,
-        backgroundColor: colors.bgHover,
-      },
-    },
-    ":focus-visible": {
-      outlineWidth: 2,
-      outlineStyle: "solid",
-      outlineColor: colors.focus,
-      outlineOffset: 1,
-    },
-  },
-});

package/src/pages/WorkspaceHomeRedirect.tsx

@@ -1,17 +0,0 @@
-// packages/studio/src/pages/WorkspaceHomeRedirect.tsx
-import { Navigate, useOutletContext } from "react-router";
-import type { WorkspaceOutletContext } from "../workspace/types";
-import { contentTypePath, settingsPath } from "../workspace-path";
-
-export function WorkspaceHomeRedirect() {
-  const { workspace, models } = useOutletContext<WorkspaceOutletContext>();
-  const first = models[0]?.type;
-  if (first) {
-    return (
-      <Navigate to={contentTypePath(workspace.slug, first)} replace />
-    );
-  }
-  return (
-    <Navigate to={settingsPath(workspace.slug, "schema")} replace />
-  );
-}