@jiggai/kitchen 0.3.1 → 0.3.3

package/src/components/GoalFormFields.tsx

@@ -1,163 +0,0 @@
-"use client";
-
-import type { ReactNode } from "react";
-import { useId } from "react";
-import type { GoalFormState, GoalStatus } from "@/lib/goals-client";
-
-export type { GoalFormState };
-
-/** Wraps goal form content with error display and action buttons. */
-export function GoalFormCard({
-  children,
-  error,
-  actions,
-}: {
-  children: ReactNode;
-  error: string | null;
-  actions: ReactNode;
-}) {
-  return (
-    <div className="ck-glass p-6 space-y-4">
-      {children}
-      {error ? <div className="text-sm text-red-300">{error}</div> : null}
-      {actions}
-    </div>
-  );
-}
-
-const inputClass =
-  "mt-1 w-full rounded-[var(--ck-radius-sm)] border border-[color:var(--ck-border-subtle)] bg-transparent px-3 py-2 text-sm";
-
-type Props = {
-  formState: GoalFormState;
-  /** When provided, renders the ID field (for create flow). */
-  idField?: { id: string; setId: (v: string) => void; suggestedId?: string };
-  /** When provided, shows updated timestamp next to body label. */
-  updatedAt?: string | null;
-  /** Body textarea height override (e.g. 260 for new page). */
-  bodyHeight?: string;
-};
-
-export function GoalFormFields({
-  formState,
-  idField,
-  updatedAt,
-  bodyHeight = "h-[320px]",
-}: Props) {
-  const { title, setTitle, status, setStatus, tagsRaw, setTagsRaw, teamsRaw, setTeamsRaw, body, setBody } = formState;
-  const baseId = useId();
-  const idInputId = `${baseId}-id`;
-  const titleInputId = `${baseId}-title`;
-  const statusSelectId = `${baseId}-status`;
-  const teamsInputId = `${baseId}-teams`;
-  const tagsInputId = `${baseId}-tags`;
-  const bodyTextareaId = `${baseId}-body`;
-  return (
-    <>
-      {idField ? (
-        <div>
-          <label htmlFor={idInputId} className="text-xs text-[color:var(--ck-text-tertiary)]">
-            ID
-          </label>
-          <input
-            id={idInputId}
-            className={`${inputClass} font-mono`}
-            value={idField.id}
-            onChange={(e) => idField.setId(e.target.value)}
-            placeholder="increase-trial-activation"
-            aria-describedby={`${baseId}-id-hint`}
-          />
-          <div id={`${baseId}-id-hint`} className="mt-1 text-xs text-[color:var(--ck-text-tertiary)]">
-            Lowercase letters, numbers, hyphens. Stored as <code className="font-mono">{idField.id || "<id>"}.md</code>
-            .
-            {idField.suggestedId && !idField.id.trim() ? (
-              <>
-                {" "}
-                Suggested:{" "}
-                <button type="button" className="underline" onClick={() => idField.setId(idField.suggestedId ?? "")}>
-                  {idField.suggestedId}
-                </button>
-              </>
-            ) : null}
-          </div>
-        </div>
-      ) : null}
-
-      <div>
-        <label htmlFor={titleInputId} className="text-xs text-[color:var(--ck-text-tertiary)]">
-          Title
-        </label>
-        <input
-          id={titleInputId}
-          className={inputClass}
-          value={title}
-          onChange={(e) => setTitle(e.target.value)}
-          placeholder={idField ? "Increase trial activation" : "Goal title"}
-        />
-      </div>
-
-      <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
-        <div>
-          <label htmlFor={statusSelectId} className="text-xs text-[color:var(--ck-text-tertiary)]">
-            Status
-          </label>
-          <select
-            id={statusSelectId}
-            className={inputClass}
-            value={status}
-            onChange={(e) => setStatus(e.target.value as GoalStatus)}
-            aria-label="Goal status"
-          >
-            <option value="planned">Planned</option>
-            <option value="active">Active</option>
-            <option value="done">Done</option>
-          </select>
-        </div>
-        <div>
-          <label htmlFor={teamsInputId} className="text-xs text-[color:var(--ck-text-tertiary)]">
-            Teams (comma-separated)
-          </label>
-          <input
-            id={teamsInputId}
-            className={inputClass}
-            value={teamsRaw}
-            onChange={(e) => setTeamsRaw(e.target.value)}
-            placeholder="development-team, marketing-team"
-          />
-        </div>
-        <div>
-          <label htmlFor={tagsInputId} className="text-xs text-[color:var(--ck-text-tertiary)]">
-            Tags (comma-separated)
-          </label>
-          <input
-            id={tagsInputId}
-            className={inputClass}
-            value={tagsRaw}
-            onChange={(e) => setTagsRaw(e.target.value)}
-            placeholder="onboarding, growth"
-          />
-        </div>
-      </div>
-
-      <div>
-        <div className="flex items-center justify-between">
-          <label htmlFor={bodyTextareaId} className="text-xs text-[color:var(--ck-text-tertiary)]">
-            Body (markdown)
-          </label>
-          {updatedAt != null ? (
-            <div className="text-xs text-[color:var(--ck-text-tertiary)]">
-              {updatedAt ? `updated ${new Date(updatedAt).toLocaleString()}` : ""}
-            </div>
-          ) : null}
-        </div>
-        <textarea
-          id={bodyTextareaId}
-          className={`mt-1 ${bodyHeight} w-full rounded-[var(--ck-radius-sm)] border border-[color:var(--ck-border-subtle)] bg-transparent px-3 py-2 font-mono text-sm`}
-          value={body}
-          onChange={(e) => setBody(e.target.value)}
-          placeholder="Write the goal here…"
-        />
-      </div>
-    </>
-  );
-}

package/src/components/ScaffoldOverlay.tsx

@@ -1,78 +0,0 @@
-"use client";
-
-import { createPortal } from "react-dom";
-
-export type ScaffoldOverlayStep = 1 | 2 | 3;
-
-const stepLabel: Record<ScaffoldOverlayStep, string> = {
-  1: "Ordering team…",
-  2: "Cooking up agents…",
-  3: "Serving them up hot…",
-};
-
-function getStepCircleClass(done: boolean, active: boolean): string {
-  if (done) return "bg-emerald-400";
-  if (active) return "bg-[var(--ck-accent-red)] animate-pulse";
-  return "bg-white/20";
-}
-
-export function ScaffoldOverlay({
-  open,
-  step,
-  onDismiss,
-}: {
-  open: boolean;
-  step: ScaffoldOverlayStep;
-  onDismiss?: () => void;
-}) {
-  if (!open) return null;
-
-  return createPortal(
-    <div className="fixed inset-0 z-[9999]">
-      {/* Slightly transparent full-screen overlay so we hide the app while still showing a hint of context. */}
-      <div className="fixed inset-0 bg-white/90 dark:bg-black/90 pointer-events-none" />
-
-      {onDismiss ? (
-        <button
-          type="button"
-          onClick={(e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            onDismiss();
-          }}
-          className="fixed right-4 top-4 z-[10000] rounded-full border border-white/10 bg-[color:var(--ck-bg-glass)] px-3 py-2 text-sm font-medium text-[color:var(--ck-text-primary)] shadow-[var(--ck-shadow-1)] hover:bg-[color:var(--ck-bg-glass-strong)]"
-          aria-label="Dismiss loading overlay"
-          title="Dismiss"
-        >
-          Esc
-        </button>
-      ) : null}
-
-      <div className="fixed inset-0 flex items-center justify-center p-6 sm:p-10">
-        <div className="w-full max-w-2xl rounded-2xl border border-white/10 bg-[color:var(--ck-bg-glass-strong)] p-8 sm:p-10 shadow-[var(--ck-shadow-2)]">
-          <div className="text-2xl font-semibold text-[color:var(--ck-text-primary)]">Claw Kitchen</div>
-          <div className="mt-3 text-base text-[color:var(--ck-text-secondary)]">Hang tight — we’re updating your OpenClaw install.</div>
-
-          <div className="mt-8 space-y-4 text-base">
-            {[1, 2, 3].map((n) => {
-              const s = n as ScaffoldOverlayStep;
-              const active = s === step;
-              const done = s < step;
-              return (
-                <div key={s} className="flex items-center gap-4">
-                  <div className={"h-4 w-4 rounded-full " + getStepCircleClass(done, active)} />
-                  <div className={done ? "text-[color:var(--ck-text-secondary)] line-through" : "text-[color:var(--ck-text-primary)]"}>
-                    {stepLabel[s]}
-                  </div>
-                </div>
-              );
-            })}
-          </div>
-
-          {/* Details removed — avoid noisy/scrolling stderr in the primary UX. */}
-        </div>
-      </div>
-    </div>,
-    document.body,
-  );
-}

package/src/components/ThemeToggle.tsx

@@ -1,53 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import { MoonIcon, SunIcon } from "@/components/icons";
-
-export type Theme = "light" | "dark";
-
-const STORAGE_KEY = "ck-theme";
-
-function readInitialTheme(): Theme {
-  // Default: dark mode.
-  if (typeof window === "undefined") return "dark";
-  const saved = window.localStorage.getItem(STORAGE_KEY);
-  return saved === "light" ? "light" : "dark";
-}
-
-function applyTheme(theme: Theme) {
-  document.documentElement.dataset.theme = theme;
-}
-
-export function ThemeToggle() {
-  const [theme, setTheme] = useState<Theme>(readInitialTheme);
-
-  useEffect(() => {
-    applyTheme(theme);
-    window.localStorage.setItem(STORAGE_KEY, theme);
-  }, [theme]);
-
-  function toggle() {
-    setTheme((t) => (t === "dark" ? "light" : "dark"));
-  }
-
-  const label = theme === "dark" ? "Switch to light mode" : "Switch to dark mode";
-
-  return (
-    <button
-      type="button"
-      onClick={toggle}
-      className="grid h-9 w-9 place-items-center rounded-full border border-[color:var(--ck-border-subtle)] bg-[color:var(--ck-bg-glass)] text-[color:var(--ck-text-primary)] shadow-[var(--ck-shadow-1)] transition-colors hover:bg-[color:var(--ck-bg-glass-strong)]"
-      aria-label={label}
-      title={label}
-    >
-      <span className="sr-only" suppressHydrationWarning>
-        {label}
-      </span>
-      {theme === "dark" ? (
-        <MoonIcon className="h-4.5 w-4.5" />
-      ) : (
-        <SunIcon className="h-4.5 w-4.5" />
-      )}
-    </button>
-  );
-}

package/src/components/ToastProvider.tsx

@@ -1,163 +0,0 @@
-"use client";
-
-import { createContext, useCallback, useContext, useMemo, useState } from "react";
-
-export type ToastKind = "success" | "error" | "info";
-
-type ToastInternal = Toast & { state: "enter" | "show" | "leave" };
-export type Toast = {
-  id: string;
-  kind: ToastKind;
-  title?: string;
-  message: string;
-  timeoutMs?: number;
-};
-
-type ToastContextValue = {
-  push: (t: Omit<Toast, "id">) => void;
-};
-
-const ToastContext = createContext<ToastContextValue | null>(null);
-
-function randomHex(bytes: number): string {
-  const arr = new Uint8Array(bytes);
-  crypto.getRandomValues(arr);
-  return Array.from(arr, (b) => b.toString(16).padStart(2, "0")).join("");
-}
-
-function getToastMotionClass(state: "enter" | "show" | "leave"): string {
-  if (state === "enter") return "translate-x-[-16px] opacity-0";
-  if (state === "leave") return "translate-x-[-16px] opacity-0";
-  return "translate-x-0 opacity-100";
-}
-
-function ToastIcon({ kind }: { kind: ToastKind }) {
-  if (kind === "success") {
-    return (
-      <svg viewBox="0 0 20 20" fill="currentColor" className="h-5 w-5 text-emerald-400">
-        <path
-          fillRule="evenodd"
-          d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.707a1 1 0 00-1.414-1.414L9 10.172 7.707 8.879a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
-          clipRule="evenodd"
-        />
-      </svg>
-    );
-  }
-  if (kind === "error") {
-    return (
-      <svg viewBox="0 0 20 20" fill="currentColor" className="h-5 w-5 text-red-400">
-        <path
-          fillRule="evenodd"
-          d="M10 18a8 8 0 100-16 8 8 0 000 16zm-1-5a1 1 0 112 0 1 1 0 01-2 0zm0-8a1 1 0 012 0v6a1 1 0 11-2 0V5z"
-          clipRule="evenodd"
-        />
-      </svg>
-    );
-  }
-  return (
-    <svg viewBox="0 0 20 20" fill="currentColor" className="h-5 w-5 text-slate-300">
-      <path
-        fillRule="evenodd"
-        d="M18 10A8 8 0 11 2 10a8 8 0 0116 0zM9 9a1 1 0 112 0v5a1 1 0 11-2 0V9zm0-3a1 1 0 112 0 1 1 0 01-2 0z"
-        clipRule="evenodd"
-      />
-    </svg>
-  );
-}
-
-export function ToastProvider({ children }: { children: React.ReactNode }) {
-  const [toasts, setToasts] = useState<ToastInternal[]>([]);
-
-  const removeNow = useCallback((id: string) => {
-    setToasts((prev) => prev.filter((t) => t.id !== id));
-  }, []);
-
-  const dismiss = useCallback(
-    (id: string) => {
-      // Start leave animation, then remove.
-      setToasts((prev) => prev.map((t) => (t.id === id ? { ...t, state: "leave" } : t)));
-      window.setTimeout(() => removeNow(id), 250);
-    },
-    [removeNow],
-  );
-
-  const promoteToShow = useCallback((id: string) => {
-    setToasts((prev) => prev.map((x) => (x.id === id ? { ...x, state: "show" } : x)));
-  }, []);
-
-  const push = useCallback(
-    (t: Omit<Toast, "id">) => {
-      const id = `${Date.now()}-${randomHex(8)}`;
-      const toast: ToastInternal = { id, timeoutMs: 5000, state: "enter", ...t };
-      setToasts((prev) => [toast, ...prev].slice(0, 4));
-
-      window.setTimeout(() => promoteToShow(id), 10);
-
-      const ms = toast.timeoutMs;
-      if (ms && ms > 0) {
-        window.setTimeout(() => dismiss(id), ms);
-      }
-    },
-    [dismiss, promoteToShow],
-  );
-
-  const value = useMemo(() => ({ push }), [push]);
-
-  return (
-    <ToastContext.Provider value={value}>
-      {children}
-
-      {/* Tailwind UI-inspired notifications */}
-      <div
-        aria-live="assertive"
-        className="pointer-events-none fixed inset-0 z-[100] flex items-end px-4 py-6 sm:p-6"
-      >
-        <div className="flex w-full flex-col items-start space-y-4">
-          {toasts.map((t) => (
-              <div
-                key={t.id}
-                className={
-                  "pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg border bg-[color:var(--ck-toast-bg)] shadow-[var(--ck-shadow-2)] transition-all duration-200 ease-out border-[color:var(--ck-toast-border)] " +
-                  getToastMotionClass(t.state)
-                }
-              >
-                <div className="p-4">
-                  <div className="flex items-start">
-                    <div className="shrink-0">
-                      <ToastIcon kind={t.kind} />
-                    </div>
-                    <div className="ml-3 w-0 flex-1">
-                      {t.title ? (
-                        <p className="text-sm font-medium text-[color:var(--ck-text-primary)]">{t.title}</p>
-                      ) : null}
-                      <p className="whitespace-pre-wrap text-sm text-[color:var(--ck-text-primary)]">{t.message}</p>
-                    </div>
-                    <div className="ml-4 flex shrink-0">
-                      <button
-                        type="button"
-                        onClick={() => dismiss(t.id)}
-                        className="inline-flex rounded-md bg-transparent text-[color:var(--ck-text-tertiary)] hover:text-[color:var(--ck-text-primary)]"
-                        aria-label="Dismiss"
-                        title="Dismiss"
-                      >
-                        <span className="sr-only">Close</span>
-                        <svg viewBox="0 0 20 20" fill="currentColor" className="h-5 w-5">
-                          <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 10-1.06-1.06L10 8.94 6.28 5.22z" />
-                        </svg>
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-          ))}
-        </div>
-      </div>
-    </ToastContext.Provider>
-  );
-}
-
-export function useToast() {
-  const ctx = useContext(ToastContext);
-  if (!ctx) throw new Error("useToast must be used within ToastProvider");
-  return ctx;
-}

package/src/components/__tests__/ConfirmationModal.test.tsx

@@ -1,109 +0,0 @@
-import { describe, expect, it, vi, afterEach } from "vitest";
-import { render, screen, fireEvent, cleanup, within } from "@testing-library/react";
-import { ConfirmationModal } from "../ConfirmationModal";
-
-afterEach(cleanup);
-
-describe("ConfirmationModal", () => {
-  it("returns null when open is false", () => {
-    render(
-      <ConfirmationModal
-        open={false}
-        onClose={vi.fn()}
-        title="Confirm"
-        confirmLabel="Confirm"
-        onConfirm={vi.fn()}
-      >
-        <p>Body content</p>
-      </ConfirmationModal>
-    );
-    expect(screen.queryByText("Confirm")).toBeNull();
-  });
-
-  it("renders title, body, Cancel and Confirm when open", () => {
-    render(
-      <ConfirmationModal
-        open={true}
-        onClose={vi.fn()}
-        title="Delete item?"
-        confirmLabel="Delete"
-        onConfirm={vi.fn()}
-      >
-        <p>Are you sure?</p>
-      </ConfirmationModal>
-    );
-    expect(screen.getByText("Delete item?")).toBeTruthy();
-    expect(screen.getByText("Are you sure?")).toBeTruthy();
-    expect(screen.getByRole("button", { name: "Cancel" })).toBeTruthy();
-    expect(screen.getByRole("button", { name: "Delete" })).toBeTruthy();
-  });
-
-  it("calls onClose when Cancel clicked", () => {
-    const onClose = vi.fn();
-    render(
-      <ConfirmationModal
-        open={true}
-        onClose={onClose}
-        title="Confirm Close"
-        confirmLabel="OK"
-        onConfirm={vi.fn()}
-      >
-        <p>Body</p>
-      </ConfirmationModal>
-    );
-    const modal = screen.getByText("Confirm Close").closest(".rounded-2xl");
-    fireEvent.click(within(modal!).getByRole("button", { name: "Cancel" }));
-    expect(onClose).toHaveBeenCalled();
-  });
-
-  it("calls onConfirm when Confirm clicked", () => {
-    const onConfirm = vi.fn();
-    render(
-      <ConfirmationModal
-        open={true}
-        onClose={vi.fn()}
-        title="Confirm Submit"
-        confirmLabel="Submit"
-        onConfirm={onConfirm}
-      >
-        <p>Body</p>
-      </ConfirmationModal>
-    );
-    const modal = screen.getByText("Confirm Submit").closest(".rounded-2xl");
-    fireEvent.click(within(modal!).getByRole("button", { name: "Submit" }));
-    expect(onConfirm).toHaveBeenCalled();
-  });
-
-  it("shows error when provided", () => {
-    render(
-      <ConfirmationModal
-        open={true}
-        onClose={vi.fn()}
-        title="Confirm"
-        confirmLabel="Confirm"
-        onConfirm={vi.fn()}
-        error="Something failed"
-      >
-        <p>Body</p>
-      </ConfirmationModal>
-    );
-    expect(screen.getByText("Something failed")).toBeTruthy();
-  });
-
-  it("shows confirmBusyLabel when busy", () => {
-    render(
-      <ConfirmationModal
-        open={true}
-        onClose={vi.fn()}
-        title="Confirm"
-        confirmLabel="Confirm"
-        confirmBusyLabel="Confirming…"
-        onConfirm={vi.fn()}
-        busy={true}
-      >
-        <p>Body</p>
-      </ConfirmationModal>
-    );
-    expect(screen.getByRole("button", { name: "Confirming…" })).toBeTruthy();
-  });
-});

package/src/components/__tests__/ErrorBoundary.test.tsx

@@ -1,39 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { render, screen } from "@testing-library/react";
-import { ErrorBoundary } from "../ErrorBoundary";
-
-function ThrowError() {
-  throw new Error("Test error");
-}
-
-describe("ErrorBoundary", () => {
-  it("renders children when no error", () => {
-    render(
-      <ErrorBoundary>
-        <div data-testid="child">Hello</div>
-      </ErrorBoundary>
-    );
-    expect(screen.getByTestId("child").textContent).toBe("Hello");
-  });
-
-  it("renders fallback UI when child throws", () => {
-    render(
-      <ErrorBoundary>
-        <ThrowError />
-      </ErrorBoundary>
-    );
-    expect(screen.getByText("Something went wrong")).toBeTruthy();
-    expect(screen.getByText("Test error")).toBeTruthy();
-    expect(screen.getByRole("button", { name: /refresh page/i })).toBeTruthy();
-    expect(screen.getByRole("link", { name: /go home/i })).toBeTruthy();
-  });
-
-  it("renders custom fallback when provided", () => {
-    render(
-      <ErrorBoundary fallback={<div data-testid="custom">Custom fallback</div>}>
-        <ThrowError />
-      </ErrorBoundary>
-    );
-    expect(screen.getByTestId("custom").textContent).toBe("Custom fallback");
-  });
-});