@freighttech/ui 0.13.18

package/dist/backend/JsonDisplay.js

@@ -0,0 +1,207 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "@open-mercato/shared/lib/utils";
+import { Button } from "../primitives/button.js";
+import { Check, Copy, ChevronRight, ChevronDown } from "lucide-react";
+function JsonDisplay({
+  data,
+  title,
+  className,
+  defaultExpanded = false,
+  maxInitialDepth = 2,
+  theme = "light",
+  showCopy = true,
+  maxHeight
+}) {
+  const [copied, setCopied] = React.useState(false);
+  const jsonString = React.useMemo(() => {
+    try {
+      return JSON.stringify(data, null, 2);
+    } catch (err) {
+      return String(data);
+    }
+  }, [data]);
+  const handleCopy = React.useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(jsonString);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    } catch (err) {
+      console.error("Failed to copy to clipboard:", err);
+    }
+  }, [jsonString]);
+  const containerClasses = cn(
+    "rounded-lg border bg-card p-6",
+    className
+  );
+  return /* @__PURE__ */ jsxs("div", { className: containerClasses, children: [
+    (title || showCopy) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-4", children: [
+      title && /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold", children: title }),
+      showCopy && /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "sm",
+          onClick: handleCopy,
+          className: "h-7 px-2",
+          children: copied ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Check, { className: "h-3 w-3 mr-1" }),
+            /* @__PURE__ */ jsx("span", { className: "text-xs", children: "Copied" })
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Copy, { className: "h-3 w-3 mr-1" }),
+            /* @__PURE__ */ jsx("span", { className: "text-xs", children: "Copy" })
+          ] })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "bg-muted p-4 rounded overflow-x-auto font-mono text-sm",
+        style: maxHeight ? { maxHeight, overflowY: "auto" } : void 0,
+        children: /* @__PURE__ */ jsx(
+          JsonNode,
+          {
+            data,
+            depth: 0,
+            maxInitialDepth: defaultExpanded ? Infinity : maxInitialDepth,
+            theme
+          }
+        )
+      }
+    )
+  ] });
+}
+const JsonNode = React.memo(({ data, depth, maxInitialDepth, theme, isLast = true, parentKey }) => {
+  const [isExpanded, setIsExpanded] = React.useState(depth < maxInitialDepth);
+  const indent = depth * 16;
+  const themeClasses = {
+    key: theme === "light" ? "text-blue-600" : "text-blue-400",
+    string: theme === "light" ? "text-green-600" : "text-green-400",
+    number: theme === "light" ? "text-purple-600" : "text-purple-400",
+    boolean: theme === "light" ? "text-orange-600" : "text-orange-400",
+    null: "text-muted-foreground",
+    punctuation: "text-muted-foreground"
+  };
+  if (data === null) {
+    return /* @__PURE__ */ jsx("span", { className: themeClasses.null, children: "null" });
+  }
+  if (data === void 0) {
+    return /* @__PURE__ */ jsx("span", { className: themeClasses.null, children: "undefined" });
+  }
+  if (typeof data === "string") {
+    return /* @__PURE__ */ jsxs("span", { className: themeClasses.string, children: [
+      '"',
+      data,
+      '"'
+    ] });
+  }
+  if (typeof data === "number") {
+    return /* @__PURE__ */ jsx("span", { className: themeClasses.number, children: data });
+  }
+  if (typeof data === "boolean") {
+    return /* @__PURE__ */ jsx("span", { className: themeClasses.boolean, children: String(data) });
+  }
+  if (Array.isArray(data)) {
+    if (data.length === 0) {
+      return /* @__PURE__ */ jsx("span", { className: themeClasses.punctuation, children: "[]" });
+    }
+    return /* @__PURE__ */ jsxs("span", { children: [
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "sm",
+          className: "h-auto px-1 -mx-1",
+          onClick: () => setIsExpanded(!isExpanded),
+          children: [
+            isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3 mr-1" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-3 w-3 mr-1" }),
+            /* @__PURE__ */ jsxs("span", { className: themeClasses.punctuation, children: [
+              "[",
+              data.length,
+              "]"
+            ] })
+          ]
+        }
+      ),
+      isExpanded && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("br", {}),
+        data.map((item, index) => /* @__PURE__ */ jsxs("div", { style: { paddingLeft: `${indent + 16}px` }, children: [
+          /* @__PURE__ */ jsx(
+            JsonNode,
+            {
+              data: item,
+              depth: depth + 1,
+              maxInitialDepth,
+              theme,
+              isLast: index === data.length - 1
+            }
+          ),
+          index < data.length - 1 && /* @__PURE__ */ jsx("span", { className: themeClasses.punctuation, children: "," }),
+          /* @__PURE__ */ jsx("br", {})
+        ] }, index)),
+        /* @__PURE__ */ jsx("span", { style: { paddingLeft: `${indent}px` }, className: themeClasses.punctuation, children: "]" })
+      ] })
+    ] });
+  }
+  if (typeof data === "object") {
+    const entries = Object.entries(data);
+    if (entries.length === 0) {
+      return /* @__PURE__ */ jsx("span", { className: themeClasses.punctuation, children: "{}" });
+    }
+    return /* @__PURE__ */ jsxs("span", { children: [
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "sm",
+          className: "h-auto px-1 -mx-1",
+          onClick: () => setIsExpanded(!isExpanded),
+          children: [
+            isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3 mr-1" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-3 w-3 mr-1" }),
+            /* @__PURE__ */ jsxs("span", { className: themeClasses.punctuation, children: [
+              "{",
+              entries.length,
+              "}"
+            ] })
+          ]
+        }
+      ),
+      isExpanded && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("br", {}),
+        entries.map(([key, value], index) => /* @__PURE__ */ jsxs("div", { style: { paddingLeft: `${indent + 16}px` }, children: [
+          /* @__PURE__ */ jsxs("span", { className: themeClasses.key, children: [
+            '"',
+            key,
+            '"'
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: themeClasses.punctuation, children: ": " }),
+          /* @__PURE__ */ jsx(
+            JsonNode,
+            {
+              data: value,
+              depth: depth + 1,
+              maxInitialDepth,
+              theme,
+              isLast: index === entries.length - 1,
+              parentKey: key
+            }
+          ),
+          index < entries.length - 1 && /* @__PURE__ */ jsx("span", { className: themeClasses.punctuation, children: "," }),
+          /* @__PURE__ */ jsx("br", {})
+        ] }, key)),
+        /* @__PURE__ */ jsx("span", { style: { paddingLeft: `${indent}px` }, className: themeClasses.punctuation, children: "}" })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsx("span", { className: themeClasses.null, children: String(data) });
+});
+JsonNode.displayName = "JsonNode";
+export {
+  JsonDisplay
+};
+//# sourceMappingURL=JsonDisplay.js.map

package/dist/backend/JsonDisplay.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/backend/JsonDisplay.tsx"],
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport { cn } from '@open-mercato/shared/lib/utils'\nimport { Button } from '../primitives/button'\nimport { Check, Copy, ChevronRight, ChevronDown } from 'lucide-react'\n\ntype JsonDisplayProps = {\n  data: unknown\n  title?: string\n  className?: string\n  defaultExpanded?: boolean\n  maxInitialDepth?: number\n  theme?: 'light' | 'dark'\n  showCopy?: boolean\n  maxHeight?: string\n}\n\ntype JsonNodeProps = {\n  data: unknown\n  depth: number\n  maxInitialDepth: number\n  theme: 'light' | 'dark'\n  isLast?: boolean\n  parentKey?: string\n}\n\nexport function JsonDisplay({\n  data,\n  title,\n  className,\n  defaultExpanded = false,\n  maxInitialDepth = 2,\n  theme = 'light',\n  showCopy = true,\n  maxHeight,\n}: JsonDisplayProps) {\n  const [copied, setCopied] = React.useState(false)\n\n  const jsonString = React.useMemo(() => {\n    try {\n      return JSON.stringify(data, null, 2)\n    } catch (err) {\n      return String(data)\n    }\n  }, [data])\n\n  const handleCopy = React.useCallback(async () => {\n    try {\n      await navigator.clipboard.writeText(jsonString)\n      setCopied(true)\n      setTimeout(() => setCopied(false), 2000)\n    } catch (err) {\n      console.error('Failed to copy to clipboard:', err)\n    }\n  }, [jsonString])\n\n  const containerClasses = cn(\n    'rounded-lg border bg-card p-6',\n    className\n  )\n\n  return (\n    <div className={containerClasses}>\n      {(title || showCopy) && (\n        <div className=\"flex items-center justify-between mb-4\">\n          {title && <h2 className=\"text-lg font-semibold\">{title}</h2>}\n          {showCopy && (\n            <Button\n              type=\"button\"\n              variant=\"ghost\"\n              size=\"sm\"\n              onClick={handleCopy}\n              className=\"h-7 px-2\"\n            >\n              {copied ? (\n                <>\n                  <Check className=\"h-3 w-3 mr-1\" />\n                  <span className=\"text-xs\">Copied</span>\n                </>\n              ) : (\n                <>\n                  <Copy className=\"h-3 w-3 mr-1\" />\n                  <span className=\"text-xs\">Copy</span>\n                </>\n              )}\n            </Button>\n          )}\n        </div>\n      )}\n      <div\n        className=\"bg-muted p-4 rounded overflow-x-auto font-mono text-sm\"\n        style={maxHeight ? { maxHeight, overflowY: 'auto' } : undefined}\n      >\n        <JsonNode\n          data={data}\n          depth={0}\n          maxInitialDepth={defaultExpanded ? Infinity : maxInitialDepth}\n          theme={theme}\n        />\n      </div>\n    </div>\n  )\n}\n\nconst JsonNode = React.memo<JsonNodeProps>(({ data, depth, maxInitialDepth, theme, isLast = true, parentKey }) => {\n  const [isExpanded, setIsExpanded] = React.useState(depth < maxInitialDepth)\n\n  const indent = depth * 16\n\n  const themeClasses = {\n    key: theme === 'light' ? 'text-blue-600' : 'text-blue-400',\n    string: theme === 'light' ? 'text-green-600' : 'text-green-400',\n    number: theme === 'light' ? 'text-purple-600' : 'text-purple-400',\n    boolean: theme === 'light' ? 'text-orange-600' : 'text-orange-400',\n    null: 'text-muted-foreground',\n    punctuation: 'text-muted-foreground',\n  }\n\n  if (data === null) {\n    return (\n      <span className={themeClasses.null}>null</span>\n    )\n  }\n\n  if (data === undefined) {\n    return (\n      <span className={themeClasses.null}>undefined</span>\n    )\n  }\n\n  if (typeof data === 'string') {\n    return (\n      <span className={themeClasses.string}>\"{data}\"</span>\n    )\n  }\n\n  if (typeof data === 'number') {\n    return (\n      <span className={themeClasses.number}>{data}</span>\n    )\n  }\n\n  if (typeof data === 'boolean') {\n    return (\n      <span className={themeClasses.boolean}>{String(data)}</span>\n    )\n  }\n\n  if (Array.isArray(data)) {\n    if (data.length === 0) {\n      return <span className={themeClasses.punctuation}>[]</span>\n    }\n\n    return (\n      <span>\n        <Button\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"sm\"\n          className=\"h-auto px-1 -mx-1\"\n          onClick={() => setIsExpanded(!isExpanded)}\n        >\n          {isExpanded ? (\n            <ChevronDown className=\"h-3 w-3 mr-1\" />\n          ) : (\n            <ChevronRight className=\"h-3 w-3 mr-1\" />\n          )}\n          <span className={themeClasses.punctuation}>\n            [{data.length}]\n          </span>\n        </Button>\n        {isExpanded && (\n          <>\n            <br />\n            {data.map((item, index) => (\n              <div key={index} style={{ paddingLeft: `${indent + 16}px` }}>\n                <JsonNode\n                  data={item}\n                  depth={depth + 1}\n                  maxInitialDepth={maxInitialDepth}\n                  theme={theme}\n                  isLast={index === data.length - 1}\n                />\n                {index < data.length - 1 && (\n                  <span className={themeClasses.punctuation}>,</span>\n                )}\n                <br />\n              </div>\n            ))}\n            <span style={{ paddingLeft: `${indent}px` }} className={themeClasses.punctuation}>\n              ]\n            </span>\n          </>\n        )}\n      </span>\n    )\n  }\n\n  if (typeof data === 'object') {\n    const entries = Object.entries(data)\n\n    if (entries.length === 0) {\n      return <span className={themeClasses.punctuation}>{'{}'}</span>\n    }\n\n    return (\n      <span>\n        <Button\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"sm\"\n          className=\"h-auto px-1 -mx-1\"\n          onClick={() => setIsExpanded(!isExpanded)}\n        >\n          {isExpanded ? (\n            <ChevronDown className=\"h-3 w-3 mr-1\" />\n          ) : (\n            <ChevronRight className=\"h-3 w-3 mr-1\" />\n          )}\n          <span className={themeClasses.punctuation}>\n            {'{'}{entries.length}{'}'}\n          </span>\n        </Button>\n        {isExpanded && (\n          <>\n            <br />\n            {entries.map(([key, value], index) => (\n              <div key={key} style={{ paddingLeft: `${indent + 16}px` }}>\n                <span className={themeClasses.key}>\"{key}\"</span>\n                <span className={themeClasses.punctuation}>: </span>\n                <JsonNode\n                  data={value}\n                  depth={depth + 1}\n                  maxInitialDepth={maxInitialDepth}\n                  theme={theme}\n                  isLast={index === entries.length - 1}\n                  parentKey={key}\n                />\n                {index < entries.length - 1 && (\n                  <span className={themeClasses.punctuation}>,</span>\n                )}\n                <br />\n              </div>\n            ))}\n            <span style={{ paddingLeft: `${indent}px` }} className={themeClasses.punctuation}>\n              {'}'}\n            </span>\n          </>\n        )}\n      </span>\n    )\n  }\n\n  return <span className={themeClasses.null}>{String(data)}</span>\n})\n\nJsonNode.displayName = 'JsonNode'\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/backend/NextStepCallout.js

@@ -0,0 +1,79 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "@open-mercato/shared/lib/utils";
+import { Badge } from "@freighttech/ui/primitives/badge";
+import { Button } from "@freighttech/ui/primitives/button";
+import { Progress } from "@freighttech/ui/primitives/progress";
+const STEP_STYLES = {
+  pending: "",
+  active: "border-primary/40 bg-primary/10 text-primary",
+  completed: "border-emerald-500/30 bg-emerald-500/10 text-emerald-200"
+};
+const STATUS_STYLES = {
+  default: "border-border bg-background/70 text-foreground",
+  info: "border-primary/20 bg-primary/5 text-primary",
+  success: "border-emerald-500/20 bg-emerald-500/5 text-emerald-200",
+  warning: "border-amber-500/20 bg-amber-500/5 text-amber-200",
+  danger: "border-destructive/20 bg-destructive/5 text-destructive",
+  muted: "border-zinc-500/20 bg-zinc-500/5 text-zinc-200"
+};
+function NextStepCallout({
+  icon,
+  title,
+  description,
+  steps,
+  actionLabel,
+  actionIcon,
+  onAction,
+  disabled = false,
+  disabledMessage,
+  busy = false,
+  status,
+  className
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cn("rounded-xl border border-dashed border-primary/30 bg-primary/5 px-6 py-8", className), children: /* @__PURE__ */ jsxs("div", { className: "mx-auto flex max-w-2xl flex-col items-center text-center", children: [
+    icon ? /* @__PURE__ */ jsx("div", { className: "mb-4 flex h-14 w-14 items-center justify-center rounded-full border border-primary/30 bg-background text-primary", children: icon }) : null,
+    /* @__PURE__ */ jsx("h4", { className: "text-lg font-semibold", children: title }),
+    description ? /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: description }) : null,
+    steps && steps.length > 0 ? /* @__PURE__ */ jsx("div", { className: "mt-4 flex flex-wrap items-center justify-center gap-2", children: steps.map((step) => /* @__PURE__ */ jsx(
+      Badge,
+      {
+        variant: "outline",
+        className: cn(step.state ? STEP_STYLES[step.state] : STEP_STYLES.pending),
+        children: step.label
+      },
+      step.id
+    )) }) : null,
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        type: "button",
+        size: "lg",
+        className: "mt-6 min-w-72",
+        onClick: onAction,
+        disabled: disabled || busy,
+        children: [
+          actionIcon,
+          actionLabel
+        ]
+      }
+    ),
+    disabledMessage ? /* @__PURE__ */ jsx("p", { className: "mt-3 text-xs text-muted-foreground", children: disabledMessage }) : null,
+    status ? /* @__PURE__ */ jsxs("div", { className: cn("mt-4 w-full rounded-lg border px-4 py-3 text-left", STATUS_STYLES[status.tone ?? "default"]), children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm font-medium", children: [
+          status.icon ? /* @__PURE__ */ jsx("span", { className: "shrink-0", children: status.icon }) : null,
+          /* @__PURE__ */ jsx("span", { children: status.label })
+        ] }),
+        status.badge ? status.badge : null
+      ] }),
+      typeof status.progressValue === "number" ? /* @__PURE__ */ jsx(Progress, { value: status.progressValue, className: "mt-3 h-2" }) : busy ? /* @__PURE__ */ jsx("div", { className: "mt-3 h-2 rounded-full bg-secondary" }) : null,
+      status.progressDescription ? /* @__PURE__ */ jsx("p", { className: "mt-2 text-xs text-muted-foreground", children: status.progressDescription }) : null,
+      status.errorMessage ? /* @__PURE__ */ jsx("p", { className: "mt-2 text-xs text-destructive", children: status.errorMessage }) : null
+    ] }) : null
+  ] }) });
+}
+export {
+  NextStepCallout
+};
+//# sourceMappingURL=NextStepCallout.js.map

package/dist/backend/NextStepCallout.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/backend/NextStepCallout.tsx"],
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport { cn } from '@open-mercato/shared/lib/utils'\nimport { Badge } from '@freighttech/ui/primitives/badge'\nimport { Button } from '@freighttech/ui/primitives/button'\nimport { Progress } from '@freighttech/ui/primitives/progress'\n\ntype NextStepCalloutStep = {\n  id: string\n  label: React.ReactNode\n  state?: 'pending' | 'active' | 'completed'\n}\n\ntype NextStepCalloutStatusTone = 'default' | 'info' | 'success' | 'warning' | 'danger' | 'muted'\n\ntype NextStepCalloutStatus = {\n  tone?: NextStepCalloutStatusTone\n  icon?: React.ReactNode\n  label: React.ReactNode\n  badge?: React.ReactNode\n  progressValue?: number | null\n  progressDescription?: React.ReactNode\n  errorMessage?: React.ReactNode\n}\n\ntype NextStepCalloutProps = {\n  icon?: React.ReactNode\n  title: React.ReactNode\n  description?: React.ReactNode\n  steps?: NextStepCalloutStep[]\n  actionLabel: React.ReactNode\n  actionIcon?: React.ReactNode\n  onAction?: () => void\n  disabled?: boolean\n  disabledMessage?: React.ReactNode\n  busy?: boolean\n  status?: NextStepCalloutStatus | null\n  className?: string\n}\n\nconst STEP_STYLES: Record<NonNullable<NextStepCalloutStep['state']>, string> = {\n  pending: '',\n  active: 'border-primary/40 bg-primary/10 text-primary',\n  completed: 'border-emerald-500/30 bg-emerald-500/10 text-emerald-200',\n}\n\nconst STATUS_STYLES: Record<NextStepCalloutStatusTone, string> = {\n  default: 'border-border bg-background/70 text-foreground',\n  info: 'border-primary/20 bg-primary/5 text-primary',\n  success: 'border-emerald-500/20 bg-emerald-500/5 text-emerald-200',\n  warning: 'border-amber-500/20 bg-amber-500/5 text-amber-200',\n  danger: 'border-destructive/20 bg-destructive/5 text-destructive',\n  muted: 'border-zinc-500/20 bg-zinc-500/5 text-zinc-200',\n}\n\nexport function NextStepCallout({\n  icon,\n  title,\n  description,\n  steps,\n  actionLabel,\n  actionIcon,\n  onAction,\n  disabled = false,\n  disabledMessage,\n  busy = false,\n  status,\n  className,\n}: NextStepCalloutProps) {\n  return (\n    <div className={cn('rounded-xl border border-dashed border-primary/30 bg-primary/5 px-6 py-8', className)}>\n      <div className=\"mx-auto flex max-w-2xl flex-col items-center text-center\">\n        {icon ? (\n          <div className=\"mb-4 flex h-14 w-14 items-center justify-center rounded-full border border-primary/30 bg-background text-primary\">\n            {icon}\n          </div>\n        ) : null}\n        <h4 className=\"text-lg font-semibold\">{title}</h4>\n        {description ? (\n          <p className=\"mt-2 text-sm text-muted-foreground\">{description}</p>\n        ) : null}\n        {steps && steps.length > 0 ? (\n          <div className=\"mt-4 flex flex-wrap items-center justify-center gap-2\">\n            {steps.map((step) => (\n              <Badge\n                key={step.id}\n                variant=\"outline\"\n                className={cn(step.state ? STEP_STYLES[step.state] : STEP_STYLES.pending)}\n              >\n                {step.label}\n              </Badge>\n            ))}\n          </div>\n        ) : null}\n        <Button\n          type=\"button\"\n          size=\"lg\"\n          className=\"mt-6 min-w-72\"\n          onClick={onAction}\n          disabled={disabled || busy}\n        >\n          {actionIcon}\n          {actionLabel}\n        </Button>\n        {disabledMessage ? (\n          <p className=\"mt-3 text-xs text-muted-foreground\">{disabledMessage}</p>\n        ) : null}\n        {status ? (\n          <div className={cn('mt-4 w-full rounded-lg border px-4 py-3 text-left', STATUS_STYLES[status.tone ?? 'default'])}>\n            <div className=\"flex flex-wrap items-center justify-between gap-2\">\n              <div className=\"flex items-center gap-2 text-sm font-medium\">\n                {status.icon ? <span className=\"shrink-0\">{status.icon}</span> : null}\n                <span>{status.label}</span>\n              </div>\n              {status.badge ? status.badge : null}\n            </div>\n            {typeof status.progressValue === 'number' ? (\n              <Progress value={status.progressValue} className=\"mt-3 h-2\" />\n            ) : busy ? (\n              <div className=\"mt-3 h-2 rounded-full bg-secondary\" />\n            ) : null}\n            {status.progressDescription ? (\n              <p className=\"mt-2 text-xs text-muted-foreground\">{status.progressDescription}</p>\n            ) : null}\n            {status.errorMessage ? (\n              <p className=\"mt-2 text-xs text-destructive\">{status.errorMessage}</p>\n            ) : null}\n          </div>\n        ) : null}\n      </div>\n    </div>\n  )\n}\n"],
+  "mappings": ";AA0EU,cAqBF,YArBE;AAvEV,SAAS,UAAU;AACnB,SAAS,aAAa;AACtB,SAAS,cAAc;AACvB,SAAS,gBAAgB;AAmCzB,MAAM,cAAyE;AAAA,EAC7E,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,WAAW;AACb;AAEA,MAAM,gBAA2D;AAAA,EAC/D,SAAS;AAAA,EACT,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,OAAO;AACT;AAEO,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AACF,GAAyB;AACvB,SACE,oBAAC,SAAI,WAAW,GAAG,4EAA4E,SAAS,GACtG,+BAAC,SAAI,WAAU,4DACZ;AAAA,WACC,oBAAC,SAAI,WAAU,oHACZ,gBACH,IACE;AAAA,IACJ,oBAAC,QAAG,WAAU,yBAAyB,iBAAM;AAAA,IAC5C,cACC,oBAAC,OAAE,WAAU,sCAAsC,uBAAY,IAC7D;AAAA,IACH,SAAS,MAAM,SAAS,IACvB,oBAAC,SAAI,WAAU,yDACZ,gBAAM,IAAI,CAAC,SACV;AAAA,MAAC;AAAA;AAAA,QAEC,SAAQ;AAAA,QACR,WAAW,GAAG,KAAK,QAAQ,YAAY,KAAK,KAAK,IAAI,YAAY,OAAO;AAAA,QAEvE,eAAK;AAAA;AAAA,MAJD,KAAK;AAAA,IAKZ,CACD,GACH,IACE;AAAA,IACJ;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,MAAK;AAAA,QACL,WAAU;AAAA,QACV,SAAS;AAAA,QACT,UAAU,YAAY;AAAA,QAErB;AAAA;AAAA,UACA;AAAA;AAAA;AAAA,IACH;AAAA,IACC,kBACC,oBAAC,OAAE,WAAU,sCAAsC,2BAAgB,IACjE;AAAA,IACH,SACC,qBAAC,SAAI,WAAW,GAAG,qDAAqD,cAAc,OAAO,QAAQ,SAAS,CAAC,GAC7G;AAAA,2BAAC,SAAI,WAAU,qDACb;AAAA,6BAAC,SAAI,WAAU,+CACZ;AAAA,iBAAO,OAAO,oBAAC,UAAK,WAAU,YAAY,iBAAO,MAAK,IAAU;AAAA,UACjE,oBAAC,UAAM,iBAAO,OAAM;AAAA,WACtB;AAAA,QACC,OAAO,QAAQ,OAAO,QAAQ;AAAA,SACjC;AAAA,MACC,OAAO,OAAO,kBAAkB,WAC/B,oBAAC,YAAS,OAAO,OAAO,eAAe,WAAU,YAAW,IAC1D,OACF,oBAAC,SAAI,WAAU,sCAAqC,IAClD;AAAA,MACH,OAAO,sBACN,oBAAC,OAAE,WAAU,sCAAsC,iBAAO,qBAAoB,IAC5E;AAAA,MACH,OAAO,eACN,oBAAC,OAAE,WAAU,iCAAiC,iBAAO,cAAa,IAChE;AAAA,OACN,IACE;AAAA,KACN,GACF;AAEJ;",
+  "names": []
+}

package/dist/backend/Page.js

@@ -0,0 +1,27 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "@open-mercato/shared/lib/utils";
+function Page({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("space-y-6", className), children });
+}
+function PageHeader({
+  title,
+  description,
+  actions
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between sm:gap-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsx("h1", { className: "text-xl sm:text-2xl font-semibold leading-tight", children: title }),
+      description ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mt-1", children: description }) : null
+    ] }),
+    actions ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-2", children: actions }) : null
+  ] });
+}
+function PageBody({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("space-y-4", className), children });
+}
+export {
+  Page,
+  PageBody,
+  PageHeader
+};
+//# sourceMappingURL=Page.js.map

package/dist/backend/Page.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/backend/Page.tsx"],
+  "sourcesContent": ["import * as React from 'react'\nimport { cn } from '@open-mercato/shared/lib/utils'\n\nexport function Page({ children, className }: { children: React.ReactNode; className?: string }) {\n  return <div className={cn('space-y-6', className)}>{children}</div>\n}\n\nexport function PageHeader({\n  title,\n  description,\n  actions,\n}: {\n  title: string\n  description?: string\n  actions?: React.ReactNode\n}) {\n  return (\n    <div className=\"flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between sm:gap-4\">\n      <div className=\"min-w-0\">\n        <h1 className=\"text-xl sm:text-2xl font-semibold leading-tight\">{title}</h1>\n        {description ? <p className=\"text-sm text-muted-foreground mt-1\">{description}</p> : null}\n      </div>\n      {actions ? <div className=\"flex flex-wrap items-center gap-2\">{actions}</div> : null}\n    </div>\n  )\n}\n\nexport function PageBody({ children, className }: { children: React.ReactNode; className?: string }) {\n  return <div className={cn('space-y-4', className)}>{children}</div>\n}\n"],
+  "mappings": "AAIS,cAcH,YAdG;AAHT,SAAS,UAAU;AAEZ,SAAS,KAAK,EAAE,UAAU,UAAU,GAAsD;AAC/F,SAAO,oBAAC,SAAI,WAAW,GAAG,aAAa,SAAS,GAAI,UAAS;AAC/D;AAEO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,SACE,qBAAC,SAAI,WAAU,8EACb;AAAA,yBAAC,SAAI,WAAU,WACb;AAAA,0BAAC,QAAG,WAAU,mDAAmD,iBAAM;AAAA,MACtE,cAAc,oBAAC,OAAE,WAAU,sCAAsC,uBAAY,IAAO;AAAA,OACvF;AAAA,IACC,UAAU,oBAAC,SAAI,WAAU,qCAAqC,mBAAQ,IAAS;AAAA,KAClF;AAEJ;AAEO,SAAS,SAAS,EAAE,UAAU,UAAU,GAAsD;AACnG,SAAO,oBAAC,SAAI,WAAW,GAAG,aAAa,SAAS,GAAI,UAAS;AAC/D;",
+  "names": []
+}