@cloudraker/reki 2.6.1

package/dist/blocks-source/delete-resource/delete-resource.tsx

@@ -0,0 +1,213 @@
+import { useState, useCallback, useEffect } from "react";
+import {
+  Dialog,
+  DialogRoot,
+  DialogTitle,
+  DialogClose,
+} from "../../components/dialog";
+import { Input } from "../../components/input";
+import { Button } from "../../components/button";
+import { cn } from "../../utils/cn";
+import {
+  CheckIcon,
+  CopyIcon,
+  WarningCircleIcon,
+  XIcon,
+} from "@phosphor-icons/react";
+import { Banner } from "../../components/banner";
+
+export const REKI_DELETE_RESOURCE_VARIANTS = {
+  size: {
+    sm: {
+      classes: "",
+      description: "Small dialog for simple delete confirmations",
+    },
+    base: {
+      classes: "",
+      description: "Default delete confirmation dialog size",
+    },
+  },
+} as const;
+
+export const REKI_DELETE_RESOURCE_DEFAULT_VARIANTS = {
+  size: "base",
+} as const;
+
+export type RekiDeleteResourceSize =
+  keyof typeof REKI_DELETE_RESOURCE_VARIANTS.size;
+
+export interface RekiDeleteResourceVariantsProps {
+  size?: RekiDeleteResourceSize;
+}
+
+export interface DeleteResourceProps extends RekiDeleteResourceVariantsProps {
+  /** Whether the dialog is open */
+  open: boolean;
+  /** Callback when open state changes */
+  onOpenChange: (open: boolean) => void;
+  /** The type of resource being deleted (e.g., "Zone", "Worker", "KV Namespace") */
+  resourceType: string;
+  /** The name of the specific resource being deleted */
+  resourceName: string;
+  /** Callback when delete is confirmed */
+  onDelete: () => void | Promise<void>;
+  /** Whether the delete action is in progress */
+  isDeleting?: boolean;
+  /** Whether the confirmation input should be case-sensitive (default: true) */
+  caseSensitive?: boolean;
+  /** Custom delete button text (defaults to "Delete {resourceType}") */
+  deleteButtonText?: string;
+  /** Additional className for the dialog */
+  className?: string;
+  /** Error message to display if the delete action fails */
+  errorMessage?: string;
+}
+
+export function DeleteResource({
+  open,
+  onOpenChange,
+  resourceType,
+  resourceName,
+  onDelete,
+  isDeleting = false,
+  caseSensitive = true,
+  deleteButtonText,
+  size = REKI_DELETE_RESOURCE_DEFAULT_VARIANTS.size,
+  errorMessage,
+  className,
+}: DeleteResourceProps) {
+  const [confirmationInput, setConfirmationInput] = useState("");
+  const [copied, setCopied] = useState(false);
+
+  useEffect(() => {
+    if (!open) {
+      setConfirmationInput("");
+      setCopied(false);
+    }
+  }, [open]);
+
+  const normalizeForComparison = useCallback(
+    (str: string) => (caseSensitive ? str : str.toLowerCase()),
+    [caseSensitive],
+  );
+
+  const isConfirmed =
+    normalizeForComparison(confirmationInput) ===
+    normalizeForComparison(resourceName);
+
+  const handleDelete = useCallback(async () => {
+    if (!isConfirmed || isDeleting) return;
+    await onDelete();
+  }, [isConfirmed, isDeleting, onDelete]);
+
+  const handleCopy = useCallback(async () => {
+    await navigator.clipboard.writeText(resourceName);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1500);
+  }, [resourceName]);
+
+  return (
+    <DialogRoot open={open} onOpenChange={onOpenChange}>
+      <Dialog size={size} className={cn("p-0", className)}>
+        <div className="flex items-center justify-between border-b border-reki-line px-6 py-4">
+          <DialogTitle className="text-lg font-semibold">
+            Delete {resourceName}
+          </DialogTitle>
+          <DialogClose
+            render={(props) => (
+              <Button
+                {...props}
+                variant="ghost"
+                shape="square"
+                size="sm"
+                aria-label="Close"
+                disabled={isDeleting}
+              >
+                <XIcon size={18} />
+              </Button>
+            )}
+          />
+        </div>
+
+        <div className="flex flex-col p-6 gap-4">
+          <div className="flex flex-col gap-2">
+            {errorMessage && (
+              <Banner icon={<WarningCircleIcon />} variant="error">
+                {errorMessage}
+              </Banner>
+            )}
+            <p className="text-base text-reki-subtle max-w-prose text-pretty">
+              This action cannot be undone. This will permanently delete the{" "}
+              <span className="font-medium text-reki-default">
+                {resourceName}
+              </span>{" "}
+              {resourceType.toLowerCase()}.
+            </p>
+          </div>
+
+          <div className="flex flex-col gap-2">
+            <div className="flex items-center gap-1.5 text-base">
+              <span>
+                Type{" "}
+                <button
+                  className="font-mono text-sm inline font-semibold bg-reki-tint hover:bg-reki-fill rounded-md px-2 py-1 group hover:cursor-pointer"
+                  onClick={handleCopy}
+                  aria-label={`Copy ${resourceName} to clipboard`}
+                >
+                  {resourceName}
+
+                  {copied ? (
+                    <CheckIcon
+                      size={12}
+                      weight="bold"
+                      className="inline ml-1.5"
+                    />
+                  ) : (
+                    <CopyIcon
+                      size={12}
+                      weight="bold"
+                      className="inline text-reki-subtle group-hover:text-reki-default ml-1.5"
+                    />
+                  )}
+                </button>{" "}
+                to confirm:
+              </span>
+            </div>
+            <Input
+              placeholder={resourceName}
+              value={confirmationInput}
+              onChange={(e) => setConfirmationInput(e.target.value)}
+              disabled={isDeleting}
+              autoComplete="off"
+              autoCorrect="off"
+              autoCapitalize="off"
+              spellCheck={false}
+              aria-label={`Type ${resourceName} to confirm deletion`}
+              className="w-full"
+            />
+          </div>
+        </div>
+
+        <div className="flex justify-end gap-3 border-t border-reki-line px-6 py-4">
+          <DialogClose
+            render={(props) => (
+              <Button {...props} variant="secondary" disabled={isDeleting}>
+                Cancel
+              </Button>
+            )}
+          />
+          <Button
+            variant="destructive"
+            onClick={handleDelete}
+            disabled={!isConfirmed || isDeleting}
+            loading={isDeleting}
+          >
+            {deleteButtonText || `Delete ${resourceType}`}
+          </Button>
+        </div>
+      </Dialog>
+    </DialogRoot>
+  );
+}
+
+DeleteResource.displayName = "DeleteResource";

package/dist/blocks-source/page-header/page-header.tsx

@@ -0,0 +1,99 @@
+import { ReactNode } from "react";
+import { Tabs, type TabsItem } from "../../components/tabs";
+import { cn } from "../../utils/cn";
+
+export const REKI_PAGE_HEADER_VARIANTS = {
+  spacing: {
+    compact: {
+      classes: "gap-1",
+      description: "Compact spacing between header elements",
+    },
+    base: {
+      classes: "gap-2",
+      description: "Default spacing between header elements",
+    },
+    relaxed: {
+      classes: "gap-4",
+      description: "Relaxed spacing for more prominent headers",
+    },
+  },
+} as const;
+
+export const REKI_PAGE_HEADER_DEFAULT_VARIANTS = {
+  spacing: "base",
+} as const;
+
+export type RekiPageHeaderSpacing =
+  keyof typeof REKI_PAGE_HEADER_VARIANTS.spacing;
+
+export interface RekiPageHeaderVariantsProps {
+  spacing?: RekiPageHeaderSpacing;
+}
+
+export function pageHeaderVariants({
+  spacing = REKI_PAGE_HEADER_DEFAULT_VARIANTS.spacing,
+}: RekiPageHeaderVariantsProps = {}) {
+  return cn(
+    "flex flex-col",
+    REKI_PAGE_HEADER_VARIANTS.spacing[spacing].classes,
+  );
+}
+
+export interface PageHeaderProps extends RekiPageHeaderVariantsProps {
+  breadcrumbs: ReactNode;
+  title?: string;
+  description?: string;
+  tabs?: TabsItem[];
+  defaultTab?: string;
+  onValueChange?: (value: string) => void;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export function PageHeader({
+  breadcrumbs,
+  title,
+  description,
+  tabs,
+  defaultTab,
+  onValueChange,
+  spacing = "base",
+  className,
+  children,
+}: PageHeaderProps) {
+  return (
+    <div className={cn(pageHeaderVariants({ spacing }), className)}>
+      <div className="border-b border-reki-line">{breadcrumbs}</div>
+
+      {(title || description) && (
+        <div className="flex flex-col gap-2 py-3 pl-3">
+          {title && (
+            <h1 className="font-heading text-3xl font-semibold text-reki-default">
+              {title}
+            </h1>
+          )}
+          {description && (
+            <p className="max-w-prose text-base text-reki-subtle">
+              {description}
+            </p>
+          )}
+        </div>
+      )}
+
+      {tabs && (
+        <div className="flex w-full items-center justify-between border-b border-reki-line pt-1 pb-3 pl-3">
+          <Tabs
+            tabs={tabs}
+            selectedValue={defaultTab}
+            onValueChange={(nextValue) => {
+              const stringValue = String(nextValue);
+              onValueChange?.(stringValue);
+            }}
+          />
+
+          <div className="flex items-center gap-2">{children}</div>
+        </div>
+      )}
+    </div>
+  );
+}

package/dist/blocks-source/resource-list/resource-list.test.tsx

@@ -0,0 +1,28 @@
+import { describe, it, expect } from "vitest";
+import { ResourceListPage } from "./resource-list";
+
+describe("ResourceListPage", () => {
+  it("should be defined", () => {
+    expect(ResourceListPage).toBeDefined();
+  });
+
+  it("should accept required props", () => {
+    const props = {
+      children: "Test content",
+    };
+    expect(() => ResourceListPage(props)).not.toThrow();
+  });
+
+  it("should accept all optional props", () => {
+    const props = {
+      title: "Test Title",
+      description: "Test Description",
+      icon: "Icon",
+      usage: "Usage",
+      additionalContent: "Additional",
+      children: "Content",
+      className: "custom-class",
+    };
+    expect(() => ResourceListPage(props)).not.toThrow();
+  });
+});

package/dist/blocks-source/resource-list/resource-list.tsx

@@ -0,0 +1,69 @@
+import type { ReactNode } from "react";
+import { cn } from "../../utils/cn";
+
+export interface ResourceListPageProps {
+  title?: string;
+  description?: string;
+  icon?: ReactNode;
+  usage?: ReactNode;
+  additionalContent?: ReactNode;
+  children: ReactNode;
+  className?: string;
+}
+
+/**
+ * ResourceListPage - A layout component for resource list pages
+ *
+ * Layouts are page-level components that provide consistent structure
+ * for common page patterns like resource lists, dashboards, and settings.
+ */
+export function ResourceListPage({
+  title,
+  description,
+  icon,
+  usage,
+  additionalContent,
+  children,
+  className,
+}: ResourceListPageProps) {
+  return (
+    <div
+      className={cn(
+        "h-full min-h-screen w-full bg-reki-overlay",
+        className,
+      )}
+    >
+      <div className="mx-auto flex max-w-[1400px] flex-col p-6 md:gap-4 md:p-8 lg:px-10 lg:py-9 xl:gap-6">
+        <div className="flex flex-col">
+          <div className="mb-1.5 flex items-center gap-1.5">
+            {icon}
+            <h1 className="font-heading m-0 p-0 text-3xl font-semibold">
+              {title}
+            </h1>
+          </div>
+          <p className="hidden p-0 text-lg leading-normal text-pretty text-reki-subtle md:block">
+            {description}
+          </p>
+        </div>
+
+        <div className="flex flex-col-reverse gap-6 xl:flex-row xl:gap-8">
+          <div className="min-w-0 grow">{children}</div>
+
+          {(usage || additionalContent) && (
+            <div
+              className={`top-22 flex h-fit w-full shrink-0 flex-col gap-4 xl:sticky xl:w-[380px]`}
+            >
+              {usage}
+
+              <div className={cn("hidden xl:block", usage ? "mt-6" : "")}>
+                {additionalContent}
+              </div>
+            </div>
+          )}
+        </div>
+
+        <div className="mt-6 xl:hidden">{additionalContent}</div>
+      </div>
+    </div>
+  );
+}

package/dist/catalog.js

@@ -0,0 +1,229 @@
+"use client";
+let c = null, h = null;
+async function y() {
+  return c || h || (h = import("./ai/schemas.js").then((t) => (c = t, c)), h);
+}
+function l() {
+  if (!c)
+    throw new Error(
+      "Schemas not loaded. Call initCatalog(catalog) first or use async validation."
+    );
+  return c;
+}
+function E(t = {}) {
+  const { actions: s = {} } = t, r = Object.keys(s);
+  return {
+    get componentNames() {
+      return l().REKI_COMPONENT_NAMES;
+    },
+    get actionNames() {
+      return r;
+    },
+    hasComponent(n) {
+      try {
+        return l().REKI_COMPONENT_NAMES.includes(n);
+      } catch {
+        return !1;
+      }
+    },
+    hasAction(n) {
+      return n in s;
+    },
+    validateElement(n) {
+      try {
+        const e = l(), a = e.UIElementBaseSchema.safeParse(n);
+        if (a.success) {
+          const u = e.validateElementProps(
+            a.data
+          );
+          return u.success ? { success: !0, data: a.data } : {
+            success: !1,
+            error: u.error.issues.map((o) => ({
+              message: o.message,
+              path: ["props", ...o.path]
+            }))
+          };
+        }
+        return {
+          success: !1,
+          error: a.error?.issues.map((u) => ({
+            message: u.message,
+            path: u.path
+          })) ?? [{ message: "Validation failed", path: [] }]
+        };
+      } catch (e) {
+        return {
+          success: !1,
+          error: [
+            {
+              message: e instanceof Error ? e.message : "Validation failed",
+              path: []
+            }
+          ]
+        };
+      }
+    },
+    validateTree(n) {
+      try {
+        const a = l().validateUITree(n);
+        return a.success ? { success: !0, data: a.data } : {
+          success: !1,
+          error: a.error.issues.map((u) => ({
+            message: u.message,
+            path: u.path
+          }))
+        };
+      } catch (e) {
+        return {
+          success: !1,
+          error: [
+            {
+              message: e instanceof Error ? e.message : "Validation failed",
+              path: []
+            }
+          ]
+        };
+      }
+    },
+    generatePrompt() {
+      const n = l(), e = [
+        "# Reki Component Catalog",
+        "",
+        "You are generating UI using Reki components. Output must be valid JSON matching the UITree schema.",
+        "",
+        "## Available Components",
+        ""
+      ];
+      for (const a of n.REKI_COMPONENT_NAMES)
+        e.push(`- \`${a}\``);
+      if (r.length > 0) {
+        e.push(""), e.push("## Available Actions"), e.push("");
+        for (const [a, u] of Object.entries(s))
+          e.push(`- \`${a}\`: ${u.description}`);
+      }
+      return e.push(""), e.push("## Output Format"), e.push(""), e.push("```json"), e.push("{"), e.push('  "root": "element-1",'), e.push('  "elements": {'), e.push('    "element-1": {'), e.push('      "key": "element-1",'), e.push('      "type": "ComponentName",'), e.push('      "props": { ... },'), e.push('      "children": ["element-2"],'), e.push(
+        '      "visible": true | { "path": "/data/path" } | { "auth": "signedIn" }'
+      ), e.push("    }"), e.push("  }"), e.push("}"), e.push("```"), e.push(""), e.push("## Dynamic Values"), e.push(""), e.push(
+        'Props can reference data model values using `{ path: "/data/path" }`:'
+      ), e.push(""), e.push("```json"), e.push("{"), e.push('  "type": "Text",'), e.push('  "props": {'), e.push('    "children": { "path": "/user/name" }'), e.push("  }"), e.push("}"), e.push("```"), e.push(""), e.join(`
+`);
+    }
+  };
+}
+async function v(t) {
+  t.validateTree({});
+}
+function p(t, s) {
+  if (!s || s === "/")
+    return t;
+  const r = s.startsWith("/") ? s.slice(1).split("/") : s.split("/");
+  let n = t;
+  for (const e of r) {
+    if (n == null)
+      return;
+    if (typeof n == "object")
+      n = n[e];
+    else
+      return;
+  }
+  return n;
+}
+function b(t, s, r) {
+  const n = s.startsWith("/") ? s.slice(1).split("/") : s.split("/");
+  if (n.length === 0) return;
+  let e = t;
+  for (let u = 0; u < n.length - 1; u++) {
+    const o = n[u];
+    (!(o in e) || typeof e[o] != "object") && (e[o] = {}), e = e[o];
+  }
+  const a = n[n.length - 1];
+  e[a] = r;
+}
+function m(t) {
+  return typeof t == "object" && t !== null && "path" in t && typeof t.path == "string";
+}
+function i(t, s) {
+  if (t != null)
+    return m(t) ? p(s, t.path) : t;
+}
+function d(t, s) {
+  const r = {};
+  for (const [n, e] of Object.entries(t))
+    m(e) ? r[n] = p(s, e.path) : typeof e == "object" && e !== null && !Array.isArray(e) ? r[n] = d(e, s) : r[n] = e;
+  return r;
+}
+function g(t) {
+  return t == null ? !1 : typeof t == "boolean" ? t : typeof t == "number" ? t !== 0 : typeof t == "string" || Array.isArray(t) ? t.length > 0 : typeof t == "object" ? Object.keys(t).length > 0 : !!t;
+}
+function f(t, s) {
+  if ("path" in t && !("eq" in t) && !("neq" in t)) {
+    const r = p(s.data, t.path);
+    return g(r);
+  }
+  if ("and" in t)
+    return t.and.every((r) => f(r, s));
+  if ("or" in t)
+    return t.or.some((r) => f(r, s));
+  if ("not" in t)
+    return !f(t.not, s);
+  if ("eq" in t) {
+    const r = t, n = i(r.eq[0], s.data), e = i(r.eq[1], s.data);
+    return n === e;
+  }
+  if ("neq" in t) {
+    const r = t, n = i(r.neq[0], s.data), e = i(r.neq[1], s.data);
+    return n !== e;
+  }
+  if ("gt" in t) {
+    const r = t, n = i(r.gt[0], s.data), e = i(r.gt[1], s.data);
+    return n > e;
+  }
+  if ("gte" in t) {
+    const r = t, n = i(r.gte[0], s.data), e = i(r.gte[1], s.data);
+    return n >= e;
+  }
+  if ("lt" in t) {
+    const r = t, n = i(r.lt[0], s.data), e = i(r.lt[1], s.data);
+    return n < e;
+  }
+  if ("lte" in t) {
+    const r = t, n = i(r.lte[0], s.data), e = i(r.lte[1], s.data);
+    return n <= e;
+  }
+  return !0;
+}
+function A(t, s) {
+  if (t === void 0)
+    return !0;
+  if (typeof t == "boolean")
+    return t;
+  if ("auth" in t)
+    return t.auth === "signedIn" ? s.auth.isSignedIn : t.auth === "signedOut" ? !s.auth.isSignedIn : !0;
+  if ("path" in t && !("and" in t) && !("or" in t)) {
+    const r = p(s.data, t.path);
+    return g(r);
+  }
+  return f(t, s);
+}
+function N(t = {}, s = {}) {
+  return {
+    data: t,
+    auth: {
+      isSignedIn: s.isSignedIn ?? !1,
+      user: s.user
+    }
+  };
+}
+export {
+  E as createRekiCatalog,
+  N as createVisibilityContext,
+  A as evaluateVisibility,
+  p as getByPath,
+  v as initCatalog,
+  m as isDynamicPath,
+  y as loadSchemas,
+  i as resolveDynamicValue,
+  d as resolveProps,
+  b as setByPath
+};
+//# sourceMappingURL=catalog.js.map