@silo-code/sdk 0.28.1 → 0.29.0

package/src/AddRow.tsx

@@ -0,0 +1,56 @@
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+
+function PlusIcon() {
+  return (
+    <svg
+      className="silo-add-row-plus"
+      width="12"
+      height="12"
+      viewBox="0 0 16 16"
+      aria-hidden="true"
+    >
+      <path
+        d="M8 2v12M2 8h12"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+/**
+ * The ghost "＋ Add…" action that sits flush under a {@link List} — visually
+ * a row, semantically a button. No fill at rest; `bg-hover` on hover.
+ *
+ * Styled purely via host-provided `.silo-add-row*` classes — no stylesheet
+ * import is needed in the extension.
+ *
+ * @example
+ * ```tsx
+ * <List aria-label="Folders">…</List>
+ * <AddRow onClick={addFolder}>Add Folder…</AddRow>
+ * ```
+ *
+ * @category Consumer Services
+ * @public
+ */
+export function AddRow({
+  children,
+  className,
+  type = "button",
+  ...rest
+}: {
+  children?: ReactNode;
+} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children">) {
+  return (
+    <button
+      type={type}
+      className={className ? `silo-add-row ${className}` : "silo-add-row"}
+      {...rest}
+    >
+      <PlusIcon />
+      {children}
+    </button>
+  );
+}

package/src/Badge.tsx

@@ -0,0 +1,55 @@
+import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
+import { badgeClass, type BadgeTone } from "./badge-classes";
+
+export type { BadgeTone };
+
+/**
+ * A small pill for status or identity — on a {@link ListRow}'s trailing
+ * slot, in a {@link SettingRow}'s control slot, next to a title. An
+ * arbitrary `color` overrides `tone` for identity colors (e.g. workspace
+ * group swatches) via the `--badge-color` custom property.
+ *
+ * Styled purely via host-provided `.silo-badge*` classes — no stylesheet
+ * import is needed in the extension.
+ *
+ * @example
+ * ```tsx
+ * <Badge tone="ok">Installed</Badge>
+ * <Badge tone="warn">Update available</Badge>
+ * <Badge tone="accent">current</Badge>
+ * <Badge>primary</Badge>
+ * <Badge tone="outline">Silo</Badge>
+ * <Badge color="#e06c75">Frontend</Badge>
+ * ```
+ *
+ * @category Consumer Services
+ * @public
+ */
+export function Badge({
+  tone = "neutral",
+  color,
+  className,
+  style,
+  children,
+  ...rest
+}: {
+  tone?: BadgeTone;
+  /** Arbitrary CSS color — overrides `tone` for identity colors. */
+  color?: string;
+  children?: ReactNode;
+} & Omit<HTMLAttributes<HTMLSpanElement>, "children" | "color">) {
+  const classes = badgeClass(tone, color);
+  const mergedStyle: CSSProperties | undefined =
+    color != null
+      ? ({ ...style, ["--badge-color" as string]: color } as CSSProperties)
+      : style;
+  return (
+    <span
+      className={className ? `${classes} ${className}` : classes}
+      style={mergedStyle}
+      {...rest}
+    >
+      {children}
+    </span>
+  );
+}

package/src/Button.tsx

@@ -0,0 +1,52 @@
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+import {
+  buttonClass,
+  type ButtonSize,
+  type ButtonVariant,
+} from "./button-classes";
+
+export type { ButtonSize, ButtonVariant };
+
+/**
+ * The action button in three variants. In a modal footer the primary action
+ * sits rightmost with neutral actions to its left (see {@link ModalActions}).
+ *
+ * Styled purely via host-provided `.silo-button*` classes — no stylesheet
+ * import is needed in the extension.
+ *
+ * @example
+ * ```tsx
+ * <Button onClick={cancel}>Cancel</Button>
+ * <Button variant="primary" onClick={save}>Save</Button>
+ * <Button variant="danger" onClick={remove}>Delete</Button>
+ * <Button size="sm">Compact</Button>
+ * ```
+ *
+ * @category Consumer Services
+ * @public
+ */
+export function Button({
+  variant = "normal",
+  size = "normal",
+  className,
+  type = "button",
+  children,
+  ...rest
+}: {
+  /** `primary` = the accent-filled main action; `danger` = destructive. */
+  variant?: ButtonVariant;
+  /** `sm` for inline/compact contexts (e.g. a footer `start` slot). */
+  size?: ButtonSize;
+  children?: ReactNode;
+} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children">) {
+  const classes = buttonClass(variant, size);
+  return (
+    <button
+      type={type}
+      className={className ? `${classes} ${className}` : classes}
+      {...rest}
+    >
+      {children}
+    </button>
+  );
+}

package/src/Callout.tsx

@@ -0,0 +1,26 @@
+import type { ReactNode } from "react";
+
+/**
+ * A quiet set-off box for explanatory copy — a hairline border around body
+ * text, no fill, no tone. Not a warning/error/info alert (there is
+ * deliberately no `tone`): status belongs to {@link Badge} tones and
+ * {@link EmptyState}.
+ *
+ * Styled purely via the host-provided `.silo-callout` class — no stylesheet
+ * import is needed in the extension.
+ *
+ * @example
+ * ```tsx
+ * <Callout>
+ *   Opening a worktree adds it as another folder in this workspace — its
+ *   files, terminals, and Git panel appear alongside your current ones.
+ *   Closing a view leaves the worktree untouched on disk.
+ * </Callout>
+ * ```
+ *
+ * @category Consumer Services
+ * @public
+ */
+export function Callout({ children }: { children?: ReactNode }) {
+  return <div className="silo-callout">{children}</div>;
+}

package/src/CheckboxRow.tsx

@@ -0,0 +1,54 @@
+import type { InputHTMLAttributes } from "react";
+
+/**
+ * A labeled checkbox row (15px box, accent check). The whole label is the
+ * click target.
+ *
+ * Styled purely via the host-provided `.silo-checkbox-row` class — no
+ * stylesheet import is needed in the extension.
+ *
+ * @example
+ * ```tsx
+ * <CheckboxRow
+ *   label="Only monitor the checked-out branch"
+ *   checked={onlyCheckedOut}
+ *   onChange={setOnlyCheckedOut}
+ * />
+ * ```
+ *
+ * @category Consumer Services
+ * @public
+ */
+export function CheckboxRow({
+  label,
+  checked,
+  onChange,
+  disabled,
+  className,
+  ...rest
+}: {
+  label: string;
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+  disabled?: boolean;
+} & Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  "type" | "checked" | "onChange" | "disabled" | "children"
+>) {
+  return (
+    <label
+      className={
+        className ? `silo-checkbox-row ${className}` : "silo-checkbox-row"
+      }
+    >
+      <input
+        type="checkbox"
+        checked={checked}
+        disabled={disabled}
+        onChange={(e) => onChange(e.target.checked)}
+        {...rest}
+      />
+      {label}
+    </label>
+  );
+}

package/src/EmptyState.tsx

@@ -0,0 +1,69 @@
+import type { ReactNode } from "react";
+import {
+  emptyStateIconDataTone,
+  type EmptyStateTone,
+} from "./empty-state-classes";
+
+export type { EmptyStateTone };
+
+/**
+ * The big-icon + title + dim-description block a modal shows when a list is
+ * empty or everything is fine ("All workflows passing"). Renders flat in the
+ * modal body — no card, no shadow of its own.
+ *
+ * Styled purely via host-provided `.silo-empty-state*` classes — no
+ * stylesheet import is needed in the extension.
+ *
+ * @example
+ * ```tsx
+ * <EmptyState
+ *   tone="ok"
+ *   icon={<CheckIcon />}
+ *   title="All workflows passing"
+ *   description="No failures or active runs on this repo."
+ * />
+ *
+ * <EmptyState
+ *   icon={<SearchIcon />}
+ *   title="No matching branches"
+ *   description="Try a different filter."
+ * />
+ * ```
+ *
+ * @category Consumer Services
+ * @public
+ */
+export function EmptyState({
+  tone = "neutral",
+  icon,
+  title,
+  description,
+  action,
+}: {
+  /** Colors the circled icon; `ok` = green ring for positive-empty. */
+  tone?: EmptyStateTone;
+  icon?: ReactNode;
+  title: string;
+  description?: string;
+  /** e.g. a `Button` ("Clear filter"). */
+  action?: ReactNode;
+}) {
+  const dataTone = emptyStateIconDataTone(tone);
+  return (
+    <div className="silo-empty-state">
+      {icon != null && (
+        <div
+          className="silo-empty-state-icon"
+          {...(dataTone != null ? { "data-tone": dataTone } : {})}
+        >
+          {icon}
+        </div>
+      )}
+      <div className="silo-empty-state-title">{title}</div>
+      {description != null && (
+        <div className="silo-empty-state-desc">{description}</div>
+      )}
+      {action}
+    </div>
+  );
+}

package/src/IconButton.tsx

@@ -0,0 +1,55 @@
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+import { iconButtonClass, type IconButtonSize } from "./icon-button-classes";
+
+export type { IconButtonSize };
+
+/**
+ * A square icon-only button — the kit's one answer for ✕, ⋮, ↻, ✏️, and
+ * friends. `aria-label` is **required**: the icon is the only visual, so the
+ * label is the accessible name. Pair with {@link Tooltip} so sighted users
+ * get the same label on hover.
+ *
+ * Styled purely via host-provided `.silo-icon-button*` classes — no
+ * stylesheet import is needed in the extension.
+ *
+ * @example
+ * ```tsx
+ * <IconButton aria-label="Refresh" onClick={refresh}>
+ *   <RefreshIcon />
+ * </IconButton>
+ *
+ * // compact — e.g. in a ListRow's trailing slot
+ * <IconButton size="sm" aria-label="Pin" onClick={pin}>
+ *   <PinIcon />
+ * </IconButton>
+ * ```
+ *
+ * @category Consumer Services
+ * @public
+ */
+export function IconButton({
+  size = "normal",
+  className,
+  type = "button",
+  children,
+  "aria-label": ariaLabel,
+  ...rest
+}: {
+  /** 32px standalone / 26px for tight or inline contexts. */
+  size?: IconButtonSize;
+  /** Required — the icon is the only visual. */
+  "aria-label": string;
+  children?: ReactNode;
+} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "aria-label">) {
+  const classes = iconButtonClass(size);
+  return (
+    <button
+      type={type}
+      aria-label={ariaLabel}
+      className={className ? `${classes} ${className}` : classes}
+      {...rest}
+    >
+      {children}
+    </button>
+  );
+}

package/src/InlineEdit.tsx

@@ -0,0 +1,260 @@
+import {
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type KeyboardEvent,
+  type ReactNode,
+} from "react";
+import { IconButton } from "./IconButton";
+import { Input } from "./Input";
+import { Textarea } from "./Textarea";
+import { Tooltip } from "./Tooltip";
+import {
+  inlineEditDisplayClass,
+  inlineEditRowClass,
+} from "./inline-edit-classes";
+import { setActiveInlineEditCancel } from "./inline-edit-controller";
+
+/**
+ * Result of an {@link InlineEdit} `validate` callback.
+ *
+ * @category Core Types
+ * @public
+ */
+export type InlineEditValidation =
+  | { ok: true; value: string }
+  | { ok: false; error: string };
+
+function PencilIcon() {
+  return (
+    <svg
+      width="13"
+      height="13"
+      viewBox="0 0 16 16"
+      fill="none"
+      aria-hidden="true"
+    >
+      <path
+        d="M11.1 2.4a1.4 1.4 0 0 1 2 2L5.5 12l-2.8.8.8-2.8 7.6-7.6z"
+        stroke="currentColor"
+        strokeWidth="1.2"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function CheckIcon() {
+  return (
+    <svg
+      width="13"
+      height="13"
+      viewBox="0 0 16 16"
+      fill="none"
+      aria-hidden="true"
+    >
+      <path
+        d="M3 8.5l3 3 7-7"
+        stroke="currentColor"
+        strokeWidth="1.8"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function XIcon() {
+  return (
+    <svg width="13" height="13" viewBox="0 0 16 16" aria-hidden="true">
+      <path
+        d="M4 4l8 8M12 4l-8 8"
+        stroke="currentColor"
+        strokeWidth="1.8"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+/**
+ * Click-to-edit a value in place — a static display with a pencil affordance
+ * that swaps to a field with explicit ✓ Save / ✗ Cancel buttons. Use it for
+ * values where committing an empty/invalid value would be visibly broken
+ * elsewhere; everything else in a modal should save as you type instead.
+ *
+ * **Escape is two-stage**: the first Esc cancels the edit; the next Esc
+ * closes the modal. The host coordinates this via the SDK's
+ * `setActiveInlineEditCancel` hook — do not add your own Escape handler.
+ *
+ * Styled purely via host-provided `.silo-inline-edit*` classes — no
+ * stylesheet import is needed in the extension.
+ *
+ * @example
+ * ```tsx
+ * <InlineEdit
+ *   value={ws.name}
+ *   onSave={(name) => ctx.workspaces.rename(ws.id, name)}
+ *   validate={validateWorkspaceName}
+ *   aria-label="Rename workspace"
+ * />
+ *
+ * <InlineEdit
+ *   multiline
+ *   value={description}
+ *   onSave={setDescription}
+ *   aria-label="Edit description"
+ * />
+ * ```
+ *
+ * @category Consumer Services
+ * @public
+ */
+export function InlineEdit({
+  value,
+  onSave,
+  validate,
+  multiline = false,
+  "aria-label": ariaLabel,
+}: {
+  /** The committed value. */
+  value: string;
+  /**
+   * Called with the trimmed, validated value; not called if unchanged.
+   */
+  onSave: (value: string) => void;
+  /**
+   * Optional — failure shows the error inline and blocks the save.
+   */
+  validate?: (v: string) => InlineEditValidation;
+  /** Textarea-based editing. */
+  multiline?: boolean;
+  "aria-label": string;
+}): ReactNode {
+  // null = not editing; a string = the staged edit-mode value.
+  const [draft, setDraft] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const textareaRef = useRef<HTMLTextAreaElement | null>(null);
+  const editing = draft !== null;
+
+  function cancel() {
+    setDraft(null);
+    setError(null);
+  }
+
+  function save() {
+    const raw = draft ?? "";
+    const result = validate
+      ? validate(raw)
+      : { ok: true as const, value: raw.trim() };
+    if (!result.ok) {
+      setError(result.error);
+      return;
+    }
+    if (result.value !== value) onSave(result.value);
+    setDraft(null);
+    setError(null);
+  }
+
+  useLayoutEffect(() => {
+    if (!editing) return;
+    const el = multiline ? textareaRef.current : inputRef.current;
+    if (!el) return;
+    el.focus();
+    el.select();
+  }, [editing, multiline]);
+
+  // Register with the host's two-stage Escape yield while editing.
+  useEffect(() => {
+    if (!editing) return;
+    setActiveInlineEditCancel(cancel);
+    return () => setActiveInlineEditCancel(null);
+  }, [editing]);
+
+  function onFieldKeyDown(
+    e: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ) {
+    if (multiline) {
+      if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        save();
+      }
+      return;
+    }
+    if (e.key === "Enter") {
+      e.preventDefault();
+      save();
+    }
+  }
+
+  if (!editing) {
+    return (
+      <div className="silo-inline-edit">
+        <div className={inlineEditDisplayClass(multiline)}>
+          <span className="silo-inline-edit-value">{value}</span>
+          <Tooltip content="Edit">
+            <IconButton
+              size="sm"
+              aria-label={ariaLabel}
+              onClick={() => {
+                setDraft(value);
+                setError(null);
+              }}
+            >
+              <PencilIcon />
+            </IconButton>
+          </Tooltip>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="silo-inline-edit">
+      <div className={inlineEditRowClass(multiline)}>
+        {multiline ? (
+          <Textarea
+            ref={textareaRef}
+            value={draft ?? ""}
+            aria-label={ariaLabel}
+            onChange={(e) => {
+              setDraft(e.target.value);
+              if (error) setError(null);
+            }}
+            onKeyDown={onFieldKeyDown}
+            autoCapitalize="off"
+            autoCorrect="off"
+            spellCheck={false}
+          />
+        ) : (
+          <Input
+            ref={inputRef}
+            value={draft ?? ""}
+            aria-label={ariaLabel}
+            onChange={(e) => {
+              setDraft(e.target.value);
+              if (error) setError(null);
+            }}
+            onKeyDown={onFieldKeyDown}
+            autoCapitalize="off"
+            autoCorrect="off"
+            spellCheck={false}
+          />
+        )}
+        <Tooltip content="Save">
+          <IconButton size="sm" aria-label="Save" onClick={save}>
+            <CheckIcon />
+          </IconButton>
+        </Tooltip>
+        <Tooltip content="Cancel">
+          <IconButton size="sm" aria-label="Cancel" onClick={cancel}>
+            <XIcon />
+          </IconButton>
+        </Tooltip>
+      </div>
+      {error && <span className="silo-inline-edit-error">{error}</span>}
+    </div>
+  );
+}

package/src/Input.tsx

@@ -0,0 +1,39 @@
+import { forwardRef, type InputHTMLAttributes } from "react";
+import { inputClass } from "./input-classes";
+
+/**
+ * The single text-input treatment used across modal content: input-bg,
+ * 6×8px padding, small radius, the shared focus ring.
+ *
+ * Styled purely via host-provided `.silo-input*` classes — no stylesheet
+ * import is needed in the extension.
+ *
+ * @example
+ * ```tsx
+ * <Input
+ *   value={name}
+ *   onChange={(e) => setName(e.target.value)}
+ *   placeholder="Workspace name"
+ * />
+ * <Input block />
+ * ```
+ *
+ * @category Consumer Services
+ * @public
+ */
+export const Input = forwardRef<
+  HTMLInputElement,
+  {
+    /** Stretch to the container width. */
+    block?: boolean;
+  } & InputHTMLAttributes<HTMLInputElement>
+>(function Input({ block = false, className, ...rest }, ref) {
+  const classes = inputClass(block);
+  return (
+    <input
+      ref={ref}
+      className={className ? `${classes} ${className}` : classes}
+      {...rest}
+    />
+  );
+});