konpeki 0.3.1 → 0.4.0

package/src/components/WorkspaceChrome.tsx

@@ -1,316 +0,0 @@
-import { useEffect, useRef, useState, type ReactNode, type RefObject } from "react";
-import type { CompositionComponent } from "../../composition/types.ts";
-import { componentLabels } from "../lib/model.ts";
-import mark from "../assets/konpeki-mark.png";
-import { BuildOrb } from "./BuildOrb.tsx";
-
-const dockItems: {
-  kind: CompositionComponent["kind"];
-}[] = [
-  { kind: "text-block" },
-  { kind: "diagram" },
-  { kind: "chart" },
-  { kind: "image" },
-  { kind: "table" },
-];
-
-function DockIcon({
-  kind,
-}: {
-  kind: CompositionComponent["kind"] | "select";
-}) {
-  return (
-    <svg className="dock-glyph" viewBox="0 0 24 24" aria-hidden="true">
-      {kind === "select" ? (
-        <path d="M5 3.8 18 12l-6.2 1.2L8.6 19Z" />
-      ) : kind === "text-block" ? (
-        <path d="M5 6h14M5 10h14M5 14h10M5 18h12" />
-      ) : kind === "chart" ? (
-        <>
-          <path d="M5 19V5M5 19h14" />
-          <path d="M8 16v-4M12 16V8M16 16v-7" />
-        </>
-      ) : kind === "diagram" ? (
-        <>
-          <rect x="3" y="5" width="6" height="5" rx="1" />
-          <rect x="15" y="16" width="6" height="5" rx="1" />
-          <path d="M9 8h9v8m-2.5-2.5L18 16l2.5-2.5" />
-        </>
-      ) : kind === "image" ? (
-        <>
-          <rect x="4" y="5" width="16" height="14" rx="1" />
-          <circle cx="15.5" cy="9" r="1.5" />
-          <path d="m6 17 4.5-5 3 3 2-2 2.5 4" />
-        </>
-      ) : kind === "table" ? (
-        <>
-          <rect x="3" y="5" width="18" height="14" rx="1" />
-          <path d="M3 10h18M9 5v14M15 5v14" />
-        </>
-      ) : (
-        <path d="M5 7h14M5 12h10M5 17h14" />
-      )}
-    </svg>
-  );
-}
-
-export function WorkspaceChrome({
-  title,
-  titleRef,
-  titleError,
-  selectedKind,
-  onTitle,
-  onEditEnd,
-  onExportPNG,
-  exporting,
-  onPresent,
-  fileStatus,
-  building,
-  buildState,
-  onBuild,
-  browserTools,
-  onSelectTool,
-  onComponentTool,
-  leftCollapsed,
-  onToggleLeftPanel,
-  children,
-}: {
-  children: ReactNode;
-  leftCollapsed: boolean;
-  onToggleLeftPanel: () => void;
-  title: string;
-  titleRef: RefObject<HTMLInputElement | null>;
-  titleError: boolean;
-  selectedKind?: CompositionComponent["kind"];
-  onTitle: (title: string, mergeKey?: string) => void;
-  onEditEnd: () => void;
-  onExportPNG: () => void;
-  exporting: boolean;
-  onPresent: () => void;
-  fileStatus?: "loading" | "saved" | "saving" | "conflict" | "error";
-  building: boolean;
-  buildState?: "ready" | "working";
-  onBuild?: () => void;
-  browserTools?: {
-    example: boolean;
-    saveMessage: string;
-    onImportJSON: (file: File) => void;
-    onDownloadJSON: () => void;
-    onStartBlank: () => void;
-    onReset: () => void;
-  };
-  onSelectTool: () => void;
-  onComponentTool: (kind: CompositionComponent["kind"]) => void;
-}) {
-  const browserMenu = useRef<HTMLDetailsElement>(null);
-  const [browserMenuOpen, setBrowserMenuOpen] = useState(false);
-  const importInput = useRef<HTMLInputElement>(null);
-  function closeBrowserMenu(restoreFocus = true) {
-    const menu = browserMenu.current;
-    if (!menu?.open) return;
-    setBrowserMenuOpen(false);
-    if (restoreFocus) menu.querySelector("summary")?.focus();
-  }
-  useEffect(() => {
-    if (leftCollapsed) closeBrowserMenu(false);
-  }, [leftCollapsed]);
-  useEffect(() => {
-    function dismissOutside(event: Event) {
-      if (event.target instanceof Node && !browserMenu.current?.contains(event.target)) {
-        closeBrowserMenu(false);
-      }
-    }
-    document.addEventListener("pointerdown", dismissOutside);
-    document.addEventListener("focusin", dismissOutside);
-    return () => {
-      document.removeEventListener("pointerdown", dismissOutside);
-      document.removeEventListener("focusin", dismissOutside);
-    };
-  }, []);
-  return (
-    <>
-      <div className={`left-sidebar${leftCollapsed ? " collapsed" : ""}`}>
-      <header className="document-island" aria-label="Document controls">
-        <img src={mark} alt="Konpeki" />
-        <label className="document-title" inert={leftCollapsed}>
-          <span className="sr-only">Composition title</span>
-          <input
-            ref={titleRef}
-            aria-invalid={titleError || undefined}
-            aria-describedby={titleError ? "title-error" : undefined}
-            name="composition-title"
-            autoComplete="off"
-            disabled={building}
-            value={title}
-            onChange={(event) => onTitle(event.target.value, "title")}
-            onBlur={onEditEnd}
-          />
-        </label>
-        {titleError && (
-          <span className="document-title-error" id="title-error">
-            Enter a title.
-          </span>
-        )}
-        {fileStatus && (
-          <span
-            className={`file-status ${fileStatus}`}
-            role="status"
-            aria-live="polite"
-            title={fileStatus === "saved" ? "Saved to file" : fileStatus === "saving" ? "Saving to file" : fileStatus === "loading" ? "Opening file" : "Changes are not saved — see the recovery notice"}
-          >
-            <span className="sr-only">{fileStatus === "saved" ? "Saved" : fileStatus === "loading" ? "Opening"
-              : fileStatus === "saving" ? "Saving"
-              : fileStatus === "conflict" ? "Conflict" : "Save error"}</span>
-          </span>
-        )}
-        <button type="button" className="panel-toggle"
-          aria-label={leftCollapsed ? "Expand left panel" : "Collapse left panel"}
-          aria-expanded={!leftCollapsed}
-          onClick={onToggleLeftPanel}>
-          <svg className="panel-collapse-icon" viewBox="0 0 24 24" aria-hidden="true">
-            <rect x="3" y="4" width="18" height="16" rx="2" />
-            <path d={leftCollapsed ? "M9 4v16M13 9l3 3-3 3" : "M9 4v16M16 9l-3 3 3 3"} />
-          </svg>
-        </button>
-      </header>
-
-      <div className="editor-content" inert={building} aria-busy={building}>
-        {children}
-      </div>
-
-      <div className="action-island" aria-label="Document actions" inert={leftCollapsed}>
-        <button
-          type="button"
-          className="icon-only"
-          aria-label="Export PNG"
-          title="Export active page as PNG"
-          disabled={exporting || building}
-          onClick={onExportPNG}
-        >
-          <svg viewBox="0 0 24 24" aria-hidden="true">
-            <rect x="4" y="4" width="16" height="12" rx="2" />
-            <path d="m7 14 3.5-4 3 3 2-2 2.5 3M12 16v5m-3-3 3 3 3-3" />
-          </svg>
-        </button>
-        <button type="button" className="icon-only" aria-label="Present" title="Present" onClick={onPresent} disabled={building}>
-          <svg viewBox="0 0 24 24" aria-hidden="true">
-            <rect x="3" y="4" width="18" height="12" rx="2" />
-            <path d="M12 16v5m-4 0h8M10 7l5 3-5 3Z" />
-          </svg>
-        </button>
-        {browserTools && (
-          <details className="browser-menu" ref={browserMenu} open={browserMenuOpen} onKeyDown={(event) => {
-            if (event.key === "Escape" && browserMenu.current?.open) {
-              event.preventDefault();
-              event.stopPropagation();
-              closeBrowserMenu();
-            }
-          }}>
-            <summary onClick={(event) => {
-              event.preventDefault();
-              setBrowserMenuOpen(open => !open);
-            }}>
-              Demo Mode
-              <svg viewBox="0 0 16 16" aria-hidden="true"><path d="m4 10 4-4 4 4" /></svg>
-            </summary>
-            <div className="browser-menu-popover" role="region" aria-label="Demo Mode" inert={!browserMenuOpen}>
-              <div className="browser-menu-intro">
-                <strong>Demo Mode</strong>
-                <p>
-                  Explore the canvas here. No agent connection or file sync.{" "}
-                  <span role="status">{browserTools.saveMessage}</span>
-                </p>
-              </div>
-              <div className="browser-menu-actions">
-                <button type="button" onClick={() => importInput.current?.click()}>
-                  Import
-                </button>
-                <input
-                  ref={importInput}
-                  hidden
-                  type="file"
-                  accept="application/json,.json"
-                  aria-label="Choose composition JSON"
-                  onChange={(event) => {
-                    const file = event.target.files?.[0];
-                    event.target.value = "";
-                    if (!file) return;
-                    closeBrowserMenu();
-                    browserTools.onImportJSON(file);
-                  }}
-                />
-                <button type="button" onClick={() => {
-                  closeBrowserMenu();
-                  browserTools.onDownloadJSON();
-                }}>
-                  Export
-                </button>
-                <button type="button" className="secondary" onClick={() => {
-                  closeBrowserMenu();
-                  browserTools.onStartBlank();
-                }}>
-                  Start blank
-                </button>
-                <button type="button" className="secondary" onClick={() => {
-                  closeBrowserMenu();
-                  browserTools.onReset();
-                }}>
-                  {browserTools.example ? "Reset example" : "Reset local draft"}
-                </button>
-              </div>
-              <div className="browser-agent-handoff">
-                <strong>Continue with an agent</strong>
-                <p>Export the JSON file, then ask your coding agent to open it with Konpeki.</p>
-                <a
-                  href="https://github.com/vcfgdev/konpeki/blob/main/SETUP.md"
-                  target="_blank"
-                  rel="noreferrer"
-                >
-                  Setup guide
-                </a>
-              </div>
-            </div>
-          </details>
-        )}
-        {onBuild && (
-          <button
-            type="button"
-            className={`primary build-button ${building ? "building" : ""}`}
-            disabled={fileStatus !== "saved" || building}
-            aria-busy={building}
-            onClick={onBuild}
-          >
-            <BuildOrb active={building} />
-            <span className="build-label">{buildState === "ready" ? "Request ready" : buildState === "working" ? "Agent working" : "Build it"}</span>
-          </button>
-        )}
-      </div>
-      </div>
-
-      <nav className="component-dock" aria-label="Canvas tools" inert={building}>
-        <button
-          type="button"
-          className={!selectedKind ? "active" : ""}
-          aria-pressed={!selectedKind}
-          onClick={onSelectTool}
-        >
-          <DockIcon kind="select" />
-          <span>Select</span>
-        </button>
-        {dockItems.map(({ kind }) => (
-          <button
-            key={kind}
-            type="button"
-            className={selectedKind === kind ? "active" : ""}
-            aria-pressed={selectedKind === kind}
-            title={`Add or select ${componentLabels[kind]}`}
-            onClick={() => onComponentTool(kind)}
-          >
-            <DockIcon kind={kind} />
-            <span>{componentLabels[kind]}</span>
-          </button>
-        ))}
-      </nav>
-    </>
-  );
-}

package/src/components/ui.tsx

@@ -1,147 +0,0 @@
-import { useEffect, useId, useLayoutEffect, useRef, useState, type ReactNode } from "react";
-import { createPortal } from "react-dom";
-
-/** Retain the last content while CSS transitions out; hidden notices are inert. */
-export function FeedbackNotice({ kind, children, tone = "neutral", onDismiss, onPauseChange }: {
-  kind: "toast" | "recovery";
-  children: ReactNode;
-  tone?: "neutral" | "error";
-  onDismiss?: () => void;
-  onPauseChange?: (paused: boolean) => void;
-}) {
-  const visible = Boolean(children);
-  const [last, setLast] = useState({ children, tone });
-  if (visible && (children !== last.children || tone !== last.tone)) setLast({ children, tone });
-  return <div className={`feedback-notice ${kind}${visible ? " visible" : ""}${last.tone === "error" ? " error" : ""}`}
-    inert={!visible} aria-hidden={!visible} role={kind === "recovery" && visible ? "alert" : undefined}
-    onMouseEnter={() => onPauseChange?.(true)} onMouseLeave={() => onPauseChange?.(false)}
-    onFocus={() => onPauseChange?.(true)} onBlur={event => { if (!event.currentTarget.contains(event.relatedTarget)) onPauseChange?.(false); }}>
-    {kind === "toast" ? <span role={visible ? last.tone === "error" ? "alert" : "status" : undefined}
-      aria-live={visible ? last.tone === "error" ? "assertive" : "polite" : "off"}>{last.children}</span> : last.children}
-    {onDismiss && last.children && <button type="button" className="toast-dismiss" aria-label="Dismiss notification" onClick={onDismiss}>×</button>}
-  </div>;
-}
-
-/** Keep incomplete input out of the document, without silently correcting it. */
-export function NumberField({ label, name, value, min, max, step = 1, unit, onCommit, onEditEnd }: {
-  label: string;
-  name?: string;
-  value: number;
-  min: number;
-  max: number;
-  step?: number;
-  unit?: string;
-  onCommit: (value: number) => void;
-  onEditEnd: () => void;
-}) {
-  const [text, setText] = useState(String(value));
-  const [error, setError] = useState("");
-  const [showError, setShowError] = useState(false);
-  const [position, setPosition] = useState({ top: 0, left: 0 });
-  const input = useRef<HTMLInputElement>(null);
-  const id = useId();
-  useEffect(() => { setText(String(value)); setError(""); }, [value]);
-  useLayoutEffect(() => {
-    if (!error || !showError) return;
-    function place() {
-      const rect = input.current!.getBoundingClientRect();
-      const panel = input.current!.closest(".right-panel")!.getBoundingClientRect();
-      const beside = panel.left >= 276;
-      setPosition({ top: Math.max(8, Math.min(beside ? rect.top : rect.bottom + 6, window.innerHeight - 80)), left: beside ? panel.left - 268 : Math.max(8, Math.min(rect.left, window.innerWidth - 268)) });
-      if (rect.bottom < panel.top + 58 || rect.top > panel.bottom) setShowError(false);
-    }
-    function focus(event: FocusEvent) {
-      if (event.target !== input.current) setShowError(false);
-    }
-    place();
-    window.addEventListener("resize", place);
-    window.addEventListener("scroll", place, true);
-    document.addEventListener("focusin", focus);
-    return () => {
-      window.removeEventListener("resize", place);
-      window.removeEventListener("scroll", place, true);
-      document.removeEventListener("focusin", focus);
-    };
-  }, [error, showError]);
-  function commit() {
-    const number = Number(text);
-    if (!text.trim() || !Number.isFinite(number) || number < min || number > max) {
-      setError(`${label} must be ${min}–${max}${unit ? ` ${unit}` : ""}. Escape restores the previous value.`);
-      setShowError(true);
-    } else {
-      setError("");
-      if (number !== value) onCommit(number);
-    }
-    onEditEnd();
-  }
-  return <Field label={label}>
-    <span className={unit ? "parameter-input" : "number-input"}>
-      <input ref={input} name={name} type="number" autoComplete="off" min={min} max={max} step={step}
-        value={text} aria-invalid={error ? true : undefined} aria-describedby={error ? id : undefined}
-        onChange={event => setText(event.target.value)} onFocus={() => setShowError(true)} onBlur={commit}
-        onKeyDown={event => {
-          if ((event.metaKey || event.ctrlKey) && ["z", "y"].includes(event.key.toLowerCase()) && text !== String(value)) event.stopPropagation();
-          if (event.key === "Enter") { event.preventDefault(); commit(); }
-          if (event.key === "Escape") {
-            event.preventDefault(); event.stopPropagation();
-            setText(String(value)); setError(""); onEditEnd();
-          }
-        }} />
-      {unit && <span className="parameter-unit" aria-hidden="true">{unit}</span>}
-    </span>
-    {error && createPortal(<span id={id} role="alert" className={showError ? "parameter-error" : "sr-only"} style={showError ? position : undefined}>{error}</span>, document.body)}
-  </Field>;
-}
-
-export function Field({
-  label,
-  children,
-}: {
-  label: string;
-  children: ReactNode;
-}) {
-  return (
-    <label className="field">
-      <span>{label}</span>
-      {children}
-    </label>
-  );
-}
-export function Select({
-  label,
-  value,
-  options,
-  optionLabels,
-  onChange,
-}: {
-  label: string;
-  value: string;
-  options: readonly string[];
-  optionLabels?: Partial<Record<string, string>>;
-  onChange: (value: string) => void;
-}) {
-  const id = useId();
-  return (
-    <Field label={label}>
-      <select
-        id={id}
-        name={label}
-        autoComplete="off"
-        value={value}
-        onChange={(e) => onChange(e.target.value)}
-      >
-        {options.map((option) => (
-          <option key={option} value={option}>
-            {optionLabels?.[option] ?? humanize(option)}
-          </option>
-        ))}
-      </select>
-    </Field>
-  );
-}
-export function humanize(value: string) {
-  return value
-    .replace(/([a-z])([A-Z])/g, "$1 $2")
-    .replaceAll("-", " ")
-    .replace(/^./, (c) => c.toUpperCase());
-}