@ramme-io/ui 3.0.0 → 4.0.0

package/README.md

@@ -89,7 +89,7 @@ This library is built on a modern, accessible foundation:
 To develop components locally and view the full interactive catalog:
 
 ```bash
-cd packages/ui
+cd framework/ui
 pnpm install
 pnpm run storybook
 ```
@@ -105,6 +105,60 @@ When contributing a new component, you must complete the full supply chain:
 
 ---
 
+## The `@wizard` Convention
+
+Components tagged `@wizard` in their JSDoc block are discoverable by AI scaffolding —
+`products/builder` reads the generated manifest to know what it can place on a
+page, and the Showroom pages use it to render the live catalog. A component with
+no `@wizard` block is invisible to both, even if it's fully built and exported.
+
+`pnpm run generate:manifest` (invoked by `generate:registry`) scans every `.ts`/`.tsx`
+file under `src/`, parses `/** @wizard ... */` blocks with `doctrine`, and emits
+`src/wizardManifest.ts`. Do not edit that file by hand — it's regenerated from tags.
+
+Tag a component like this:
+
+```tsx
+/**
+ * @wizard
+ * @name DeviceCard
+ * @description A specialized card for a physical device or entity with live state.
+ * @tags layout, iot, device, card, dashboard
+ * @category layout
+ * @props
+ * - name: title
+ * type: string
+ * description: The name of the device or entity (e.g., "Living Room Thermostat").
+ * - name: status
+ * type: 'online' | 'offline' | 'error' | 'warning' | 'active'
+ * description: The current operational state. Changes the badge color.
+ * default: 'offline'
+ */
+export function DeviceCard(props: DeviceCardProps) { /* ... */ }
+```
+
+Recognized tags:
+
+| Tag | Purpose |
+| --- | --- |
+| `@wizard` | Marks the block for extraction. Required — everything else is ignored without it. |
+| `@name` | Component name. Also derives the manifest `id` (kebab-cased) and import path. |
+| `@description` | Shown in the AI scaffolding UI and Showroom. |
+| `@category` | Bucket used for both the manifest key (`components`/`layouts`/`utils`/`hooks`/`data`) and the derived SKU (e.g. `layout` → `@chassis/layout/...`). |
+| `@tags` | Comma-separated search/filter keywords. |
+| `@props` | One `- name: / type: / description: / default:` block per prop. |
+| `@sku`, `@humanLabel`, `@humanDescription` | Optional overrides — auto-derived from `@category`/`@name`/`@description` when omitted. |
+
+Versioning is automatic: the generator fingerprints each entry's description/props/tags/category
+and bumps the patch version in `component-history.json` whenever that fingerprint changes.
+
+**Coverage gap:** as of this writing, `auth/`, `hardware/`, `molecular/`, `theme/`,
+and `showroom/` have zero `@wizard`-tagged components — they're real, in-use code,
+but the AI scaffolding pipeline can't see any of it. Tag components in those folders
+as they're touched.
+
+---
+
 ## Documentation
 
 For full documentation, visit [https://ramme.io/docs](https://ramme.io/docs).

package/dist/blocks/ai/Actions.js

@@ -0,0 +1,6 @@
+import { jsx as o } from "react/jsx-runtime";
+const s = ({ children: t, onClick: r }) => /* @__PURE__ */ o("button", { onClick: r, className: "px-3 py-1.5 bg-card-alt hover:bg-bg-hover border border-border rounded-full text-sm text-text-light transition-colors", children: t }), a = ({ children: t }) => /* @__PURE__ */ o("div", { className: "flex flex-wrap gap-2 mt-3", children: t });
+export {
+  a as Actions,
+  s as Suggestion
+};

package/dist/blocks/ai/ChatFAB.js

@@ -0,0 +1,31 @@
+import { jsx as e } from "react/jsx-runtime";
+import { Icon as n } from "../../components/ui/Icon.js";
+import { TippyTooltip as i } from "../../components/feedback/TippyTooltip.js";
+const l = ({
+  onClick: o,
+  className: t = "",
+  tooltipContent: r = "Open AI Assistant"
+}) => /* @__PURE__ */ e(i, { content: r, placement: "left", children: /* @__PURE__ */ e(
+  "button",
+  {
+    onClick: o,
+    "aria-label": r,
+    className: `
+          w-14 h-14
+          bg-primary text-primary-foreground 
+          rounded-full
+          flex items-center justify-center
+          shadow-lg
+          hover:bg-primary/90
+          focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2
+          transition-all duration-200 ease-in-out
+          hover:scale-110
+          active:scale-100
+          ${t}
+        `,
+    children: /* @__PURE__ */ e(n, { name: "bot", size: 28 })
+  }
+) });
+export {
+  l as ChatFAB
+};

package/dist/blocks/ai/Conversation.js

@@ -0,0 +1,15 @@
+import { jsxs as s, jsx as t } from "react/jsx-runtime";
+import { useRef as n, useEffect as f } from "react";
+const l = ({ children: o }) => {
+  const e = n(null);
+  return f(() => {
+    var r;
+    (r = e.current) == null || r.scrollIntoView({ behavior: "smooth" });
+  }, [o]), /* @__PURE__ */ s("div", { className: "flex-1 p-4 overflow-y-auto", children: [
+    o,
+    /* @__PURE__ */ t("div", { ref: e })
+  ] });
+};
+export {
+  l as Conversation
+};

package/dist/blocks/ai/Loader.js

@@ -0,0 +1,34 @@
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { cn as i } from "../../utils/cn.js";
+import { Icon as s } from "../../components/ui/Icon.js";
+const o = ({
+  variant: r = "bubble",
+  label: a,
+  className: t
+}) => r === "bubble" ? /* @__PURE__ */ n("div", { className: i("flex items-center gap-3 h-8 animate-in fade-in zoom-in-95 duration-200", t), children: [
+  /* @__PURE__ */ n("div", { className: "flex items-center gap-1 px-3 py-2 bg-muted rounded-full rounded-tl-none", children: [
+    /* @__PURE__ */ e("div", { className: "w-1.5 h-1.5 bg-foreground/40 rounded-full animate-bounce [animation-delay:-0.3s]" }),
+    /* @__PURE__ */ e("div", { className: "w-1.5 h-1.5 bg-foreground/40 rounded-full animate-bounce [animation-delay:-0.15s]" }),
+    /* @__PURE__ */ e("div", { className: "w-1.5 h-1.5 bg-foreground/40 rounded-full animate-bounce" })
+  ] }),
+  a && /* @__PURE__ */ e("span", { className: "text-xs font-medium text-muted-foreground animate-pulse", children: a })
+] }) : r === "sparkle" ? /* @__PURE__ */ n("div", { className: i("flex items-center gap-2 h-8 animate-in fade-in duration-300", t), children: [
+  /* @__PURE__ */ n("div", { className: "relative flex items-center justify-center w-6 h-6", children: [
+    /* @__PURE__ */ e("div", { className: "absolute inset-0 bg-primary/20 rounded-full animate-ping opacity-75 duration-1000" }),
+    /* @__PURE__ */ e(s, { name: "sparkles", className: "w-4 h-4 text-primary relative z-10 animate-pulse" })
+  ] }),
+  /* @__PURE__ */ e("span", { className: i(
+    "text-xs font-medium bg-clip-text text-transparent bg-gradient-to-r from-primary to-accent animate-pulse",
+    !a && "hidden"
+  ), children: a || "Generating..." })
+] }) : /* @__PURE__ */ n("div", { className: i("flex items-center gap-2 h-6 animate-in fade-in duration-200", t), children: [
+  /* @__PURE__ */ n("div", { className: "flex items-center gap-0.5 h-full", children: [
+    /* @__PURE__ */ e("div", { className: "w-1 h-3 bg-primary/50 rounded-full animate-[pulse_1s_ease-in-out_infinite]" }),
+    /* @__PURE__ */ e("div", { className: "w-1 h-4 bg-primary rounded-full animate-[pulse_1s_ease-in-out_0.2s_infinite]" }),
+    /* @__PURE__ */ e("div", { className: "w-1 h-3 bg-primary/50 rounded-full animate-[pulse_1s_ease-in-out_0.4s_infinite]" })
+  ] }),
+  a && /* @__PURE__ */ e("span", { className: "text-xs text-muted-foreground", children: a })
+] });
+export {
+  o as Loader
+};

package/dist/blocks/ai/Message.js

@@ -0,0 +1,26 @@
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
+import { Avatar as r } from "../../components/ui/Avatar.js";
+import { Loader as s } from "./Loader.js";
+import { Actions as p, Suggestion as f } from "./Actions.js";
+const b = ({
+  author: a,
+  content: t,
+  isUser: m,
+  loading: c,
+  suggestions: i,
+  onSuggestionClick: n = () => {
+  }
+}) => /* @__PURE__ */ d("div", { className: `flex flex-col ${m ? "items-end" : "items-start"}`, children: [
+  /* @__PURE__ */ d("div", { className: `flex items-start gap-3 my-2 ${m ? "justify-end" : ""}`, children: [
+    !m && /* @__PURE__ */ e(r, { name: a, size: "md" }),
+    /* @__PURE__ */ d("div", { className: `p-3 rounded-lg max-w-lg ${m ? "bg-primary text-primary-foreground" : "bg-card"}`, children: [
+      a && !m && /* @__PURE__ */ e("p", { className: "font-semibold text-sm mb-1", children: a }),
+      c ? /* @__PURE__ */ e(s, {}) : /* @__PURE__ */ e("div", { className: "text-sm", children: t })
+    ] }),
+    m && /* @__PURE__ */ e(r, { name: a, size: "md" })
+  ] }),
+  i && !m && /* @__PURE__ */ e(p, { children: i.map((l, o) => /* @__PURE__ */ e(f, { onClick: () => n(l), children: l }, o)) })
+] });
+export {
+  b as Message
+};

package/dist/blocks/ai/PromptInput.js

@@ -0,0 +1,18 @@
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { Icon as m } from "../../components/ui/Icon.js";
+const i = ({ value: t, onChange: r, onSubmit: o, placeholder: s = "Type your message..." }) => /* @__PURE__ */ n("form", { onSubmit: o, className: "flex items-center p-2 border-t border-border", children: [
+  /* @__PURE__ */ e(
+    "input",
+    {
+      type: "text",
+      placeholder: s,
+      className: "flex-1 p-2 bg-transparent focus:outline-none text-text",
+      value: t,
+      onChange: r
+    }
+  ),
+  /* @__PURE__ */ e("button", { type: "submit", className: "p-2 text-primary hover:bg-primary/10 rounded-full transition-colors", children: /* @__PURE__ */ e(m, { name: "send" }) })
+] });
+export {
+  i as PromptInput
+};

package/dist/blocks/engines/WatchlistEngine.d.ts

@@ -1,5 +1,13 @@
 import React from 'react';
 import { z } from 'zod';
+/**
+ * @wizard
+ * @name WatchlistEngine
+ * @description A self-contained financial watchlist showing tickers with live price, day change, market cap, and a risk grade. Strategic purpose: a worked reference for a schema-validated data block — rows are parsed through FinancialAssetSchema before render, so malformed feed data is rejected at the boundary rather than crashing the table.
+ * @tags engines, finance, watchlist, table, market, block
+ * @category blocks
+ * @id watchlist-engine
+ */
 export declare const FinancialAssetSchema: z.ZodObject<{
     id: z.ZodString;
     ticker: z.ZodString;

package/dist/blocks/engines/WatchlistEngine.js

@@ -0,0 +1,130 @@
+import { jsx as a, jsxs as t } from "react/jsx-runtime";
+import { useMemo as c } from "react";
+import { z as i } from "zod";
+import { CollectionLayout as h } from "../../components/layout/CollectionLayout.js";
+import { DenseMetricRibbon as g } from "../../components/layout/DenseMetricRibbon.js";
+import { DataTable as f } from "../../components/data-display/DataTable.js";
+import { Badge as o } from "../../components/ui/Badge.js";
+import { Button as s } from "../../components/ui/Button.js";
+import { Icon as m } from "../../components/ui/Icon.js";
+const S = i.object({
+  id: i.string(),
+  ticker: i.string(),
+  companyName: i.string(),
+  currentPrice: i.number(),
+  dayChangePercent: i.number(),
+  marketCap: i.number(),
+  riskScore: i.enum(["Low", "Medium", "High"])
+}), l = [
+  { id: "1", ticker: "AAPL", companyName: "Apple Inc.", currentPrice: 175.5, dayChangePercent: 1.2, marketCap: 28e11, riskScore: "Low" },
+  { id: "2", ticker: "TSLA", companyName: "Tesla, Inc.", currentPrice: 210.25, dayChangePercent: -3.4, marketCap: 65e10, riskScore: "High" },
+  { id: "3", ticker: "MSFT", companyName: "Microsoft Corp.", currentPrice: 330.1, dayChangePercent: 0.8, marketCap: 25e11, riskScore: "Low" },
+  { id: "4", ticker: "NVDA", companyName: "NVIDIA Corp.", currentPrice: 450.8, dayChangePercent: 5.6, marketCap: 11e11, riskScore: "High" },
+  { id: "5", ticker: "JPM", companyName: "JPMorgan Chase", currentPrice: 145.2, dayChangePercent: -0.5, marketCap: 42e10, riskScore: "Medium" },
+  { id: "6", ticker: "V", companyName: "Visa Inc.", currentPrice: 235, dayChangePercent: 0.2, marketCap: 49e10, riskScore: "Low" }
+], M = () => {
+  const d = c(() => [
+    {
+      id: "total-assets",
+      label: "Total Assets",
+      value: l.length,
+      icon: "pie-chart"
+    },
+    {
+      id: "avg-risk",
+      label: "Avg Risk",
+      value: "Medium",
+      intent: "warning",
+      icon: "alert-triangle"
+    },
+    {
+      id: "top-mover",
+      label: "Top Mover",
+      value: "NVDA",
+      trend: "up",
+      trendValue: "+5.6%",
+      intent: "success"
+    }
+  ], []), p = c(() => [
+    {
+      field: "ticker",
+      headerName: "Ticker",
+      width: 100,
+      pinned: "left",
+      cellRenderer: (r) => /* @__PURE__ */ a("span", { className: "font-bold", children: r.value })
+    },
+    { field: "companyName", headerName: "Company Name", flex: 1 },
+    {
+      field: "currentPrice",
+      headerName: "Price",
+      width: 120,
+      valueFormatter: (r) => {
+        var e;
+        return `$${((e = r.value) == null ? void 0 : e.toFixed(2)) ?? "0.00"}`;
+      }
+    },
+    {
+      field: "dayChangePercent",
+      headerName: "Day Change",
+      width: 130,
+      cellRenderer: (r) => {
+        const e = r.value;
+        if (typeof e != "number") return null;
+        const n = e > 0, u = e < 0;
+        return /* @__PURE__ */ a("div", { className: "flex items-center gap-1 h-full", children: /* @__PURE__ */ t(o, { variant: n ? "success" : u ? "danger" : "secondary", className: "px-1.5 py-0", children: [
+          n ? "+" : "",
+          e,
+          "%"
+        ] }) });
+      }
+    },
+    {
+      field: "marketCap",
+      headerName: "Market Cap",
+      width: 150,
+      valueFormatter: (r) => {
+        const e = r.value;
+        return typeof e != "number" ? "-" : `$${(e / 1e9).toFixed(1)}B`;
+      }
+    },
+    {
+      field: "riskScore",
+      headerName: "Risk",
+      width: 110,
+      cellRenderer: (r) => {
+        const e = r.value;
+        return /* @__PURE__ */ a("div", { className: "flex items-center h-full", children: /* @__PURE__ */ a(o, { variant: e === "Low" ? "success" : e === "Medium" ? "warning" : "danger", className: "px-1.5 py-0", children: e }) });
+      }
+    }
+  ], []);
+  return /* @__PURE__ */ a(
+    h,
+    {
+      title: "Risk Watchlist",
+      description: "Real-time monitoring of your high-priority assets",
+      headerActions: /* @__PURE__ */ t("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ t(s, { variant: "outline", size: "sm", children: [
+          /* @__PURE__ */ a(m, { name: "download", size: 14, className: "mr-2" }),
+          "Export"
+        ] }),
+        /* @__PURE__ */ t(s, { variant: "primary", size: "sm", children: [
+          /* @__PURE__ */ a(m, { name: "plus", size: 14, className: "mr-2" }),
+          "Add Asset"
+        ] })
+      ] }),
+      metricsRibbon: /* @__PURE__ */ a(g, { metrics: d }),
+      children: /* @__PURE__ */ a(
+        f,
+        {
+          rowData: l,
+          columnDefs: p,
+          height: "100%"
+        }
+      )
+    }
+  );
+};
+export {
+  S as FinancialAssetSchema,
+  M as WatchlistEngine
+};

package/dist/blocks/iot/DeviceCard.js

@@ -0,0 +1,48 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { Icon as c } from "../../components/ui/Icon.js";
+import { cn as f } from "../../utils/cn.js";
+import { Card as x } from "../../components/layout/Card.js";
+import { Badge as p } from "../../components/ui/Badge.js";
+const u = {
+  online: "success",
+  offline: "secondary",
+  error: "danger",
+  warning: "outline",
+  active: "primary"
+}, y = ({
+  title: i,
+  description: a,
+  icon: s,
+  status: n = "offline",
+  value: o,
+  trend: t,
+  children: d,
+  className: l,
+  onClick: m
+}) => /* @__PURE__ */ r(
+  x,
+  {
+    className: f("p-5 flex flex-col justify-between h-full transition-all hover:border-primary/50", l),
+    onClick: m,
+    children: [
+      /* @__PURE__ */ r("div", { className: "flex justify-between items-start mb-4", children: [
+        /* @__PURE__ */ r("div", { className: "flex gap-3", children: [
+          s && /* @__PURE__ */ e("div", { className: "p-2 rounded-md bg-muted text-muted-foreground", children: /* @__PURE__ */ e(c, { name: s, size: 20 }) }),
+          /* @__PURE__ */ r("div", { children: [
+            /* @__PURE__ */ e("h3", { className: "font-semibold text-foreground leading-none mb-1", children: i }),
+            a && /* @__PURE__ */ e("p", { className: "text-xs text-muted-foreground", children: a })
+          ] })
+        ] }),
+        /* @__PURE__ */ e(p, { variant: u[n] || "secondary", children: n })
+      ] }),
+      (o || t) && /* @__PURE__ */ e("div", { className: "mb-4", children: /* @__PURE__ */ r("div", { className: "flex items-baseline gap-2", children: [
+        o && /* @__PURE__ */ e("span", { className: "text-2xl font-bold text-foreground", children: o }),
+        t && /* @__PURE__ */ e("span", { className: "text-xs font-medium text-muted-foreground", children: t })
+      ] }) }),
+      d && /* @__PURE__ */ e("div", { className: "mt-auto pt-4 border-t border-border", children: d })
+    ]
+  }
+);
+export {
+  y as DeviceCard
+};

package/dist/blocks/iot/TelemetryLog.d.ts

@@ -1,4 +1,16 @@
 import React from 'react';
+/**
+ * @wizard
+ * @name TelemetryLog
+ * @description A scrolling, newest-first table of raw sensor readings with a bounded row count. Strategic purpose: the debugging companion to a device dashboard — shows exactly what arrived and when, while `maxRows` caps memory so a high-frequency feed can run indefinitely without growing without limit.
+ * @tags iot, telemetry, log, table, sensor, debug
+ * @category iot
+ * @id telemetry-log
+ * @param {TelemetryLogRow[]} rowData - Readings, each `{ timestamp, soilMoisture?, ambientLight?, temperature? }`.
+ * @param {number} maxRows - Cap on retained rows; oldest are dropped past this.
+ * @param {string} height - CSS height for the scroll viewport.
+ * @param {string} className - Additional CSS classes.
+ */
 export interface TelemetryLogRow {
     timestamp: number;
     soilMoisture?: number;

package/dist/blocks/iot/TelemetryLog.js

@@ -0,0 +1,93 @@
+import { jsxs as i, jsx as d } from "react/jsx-runtime";
+import { useRef as g, useMemo as u, useCallback as h } from "react";
+import { AgGridReact as b } from "ag-grid-react";
+import { cn as v } from "../../utils/cn.js";
+const x = (e) => {
+  if (!e.value) return "—";
+  const t = new Date(e.value), r = String(t.getHours()).padStart(2, "0"), o = String(t.getMinutes()).padStart(2, "0"), l = String(t.getSeconds()).padStart(2, "0"), n = String(t.getMilliseconds()).padStart(3, "0");
+  return `${r}:${o}:${l}.${n}`;
+}, m = (e, t) => (r) => r.value == null ? "—" : `${r.value.toFixed(e)}${t}`, F = ({
+  rowData: e,
+  maxRows: t = 500,
+  height: r = "320px",
+  className: o
+}) => {
+  const l = g(null), n = u(() => [
+    {
+      headerName: "Time",
+      field: "timestamp",
+      valueFormatter: x,
+      width: 140,
+      sortable: !1,
+      suppressMovable: !0
+    },
+    {
+      headerName: "Soil %",
+      field: "soilMoisture",
+      valueFormatter: m(1, "%"),
+      width: 100,
+      sortable: !1,
+      suppressMovable: !0
+    },
+    {
+      headerName: "Light (lx)",
+      field: "ambientLight",
+      valueFormatter: m(0, " lx"),
+      width: 120,
+      sortable: !1,
+      suppressMovable: !0
+    },
+    {
+      headerName: "Temp (°C)",
+      field: "temperature",
+      valueFormatter: m(1, "°C"),
+      width: 110,
+      sortable: !1,
+      suppressMovable: !0
+    }
+  ], []), f = u(() => ({
+    resizable: !1,
+    filter: !1,
+    cellStyle: { fontVariantNumeric: "tabular-nums" }
+  }), []), a = u(() => e.length <= t ? e : e.slice(e.length - t), [e, t]), p = h(() => {
+    var c;
+    const s = (c = l.current) == null ? void 0 : c.api;
+    s && a.length > 0 && s.ensureIndexVisible(a.length - 1, "bottom");
+  }, [a.length]);
+  return /* @__PURE__ */ i("div", { className: v("flex flex-col gap-3", o), children: [
+    /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ d("div", { className: "font-mono text-[10px] font-bold uppercase tracking-[0.3em] text-muted-foreground", children: "Telemetry Log" }),
+      /* @__PURE__ */ i("div", { className: "font-mono text-[10px] tabular-nums text-muted-foreground/60", children: [
+        a.length,
+        " entries"
+      ] })
+    ] }),
+    /* @__PURE__ */ d(
+      "div",
+      {
+        className: "ag-theme-quartz ag-theme-ramme rounded-xl border border-border overflow-hidden",
+        style: { height: r, width: "100%" },
+        children: /* @__PURE__ */ d(
+          b,
+          {
+            ref: l,
+            rowData: a,
+            columnDefs: n,
+            defaultColDef: f,
+            headerHeight: 32,
+            rowHeight: 28,
+            suppressCellFocus: !0,
+            suppressRowHoverHighlight: !1,
+            animateRows: !1,
+            pagination: !1,
+            onRowDataUpdated: p,
+            getRowId: (s) => String(s.data.timestamp)
+          }
+        )
+      }
+    )
+  ] });
+};
+export {
+  F as TelemetryLog
+};

package/dist/blocks/iot/WaterPumpControl.d.ts

@@ -1,4 +1,16 @@
 import React from 'react';
+/**
+ * @wizard
+ * @name WaterPumpControl
+ * @description An irrigation control block: choose automatic or manual operation and set the soil-moisture target the controller should hold. Strategic purpose: a worked example of the command half of an edge loop — it emits a typed payload for you to publish, and never talks to the broker itself, so it stays testable and transport-agnostic.
+ * @tags iot, control, pump, irrigation, hardware, command
+ * @category iot
+ * @id water-pump-control
+ * @param {string} pumpMode - Current mode: 'AUTO', 'MANUAL_ON', or 'MANUAL_OFF'.
+ * @param {number} targetMoisture - Moisture set-point the controller should maintain.
+ * @param {function} onCommand - Called with `{ pumpMode, targetMoisture }` when the operator commits a change. Publish this via useMqtt().
+ * @param {string} className - Additional CSS classes.
+ */
 export type PumpMode = 'AUTO' | 'MANUAL_ON' | 'MANUAL_OFF';
 export interface WaterPumpCommandPayload {
     pumpMode: PumpMode;

package/dist/blocks/iot/WaterPumpControl.js

@@ -0,0 +1,106 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { cn as r } from "../../utils/cn.js";
+import { Card as c, CardHeader as d, CardTitle as m, CardContent as u } from "../../components/layout/Card.js";
+import { SegmentedControl as b } from "../../components/forms/SegmentedControl.js";
+const f = [
+  { label: "Auto", value: "AUTO" },
+  { label: "Force On", value: "MANUAL_ON" },
+  { label: "Force Off", value: "MANUAL_OFF" }
+], g = ({
+  pumpMode: t,
+  targetMoisture: n,
+  onCommand: s,
+  className: o
+}) => {
+  const i = t === "AUTO";
+  return /* @__PURE__ */ a(c, { className: r("overflow-hidden", o), children: [
+    /* @__PURE__ */ e(d, { className: "pb-4", children: /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ e(
+        "div",
+        {
+          className: r(
+            "h-2.5 w-2.5 rounded-full",
+            t === "MANUAL_ON" && "bg-blue-500 animate-pulse",
+            t === "AUTO" && "bg-green-500",
+            t === "MANUAL_OFF" && "bg-muted-foreground/40"
+          )
+        }
+      ),
+      /* @__PURE__ */ e(m, { className: "text-sm font-bold uppercase tracking-[0.15em]", children: "Water Pump Control" })
+    ] }) }),
+    /* @__PURE__ */ a(u, { className: "space-y-5", children: [
+      /* @__PURE__ */ a("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ e("label", { className: "block text-[10px] font-bold uppercase tracking-[0.3em] text-muted-foreground", children: "Pump Mode" }),
+        /* @__PURE__ */ e(
+          b,
+          {
+            options: f,
+            value: t,
+            onChange: (l) => s({ pumpMode: l, targetMoisture: n }),
+            size: "sm"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ a(
+        "div",
+        {
+          className: r(
+            "space-y-3 transition-opacity duration-200",
+            i ? "opacity-100" : "opacity-30 pointer-events-none"
+          ),
+          children: [
+            /* @__PURE__ */ a("div", { className: "flex items-baseline justify-between", children: [
+              /* @__PURE__ */ e("label", { className: "text-[10px] font-bold uppercase tracking-[0.3em] text-muted-foreground", children: "Target Moisture" }),
+              /* @__PURE__ */ a("span", { className: "font-mono text-lg font-black tabular-nums text-foreground", children: [
+                n,
+                /* @__PURE__ */ e("span", { className: "text-sm text-muted-foreground ml-0.5", children: "%" })
+              ] })
+            ] }),
+            /* @__PURE__ */ e(
+              "input",
+              {
+                type: "range",
+                min: 0,
+                max: 100,
+                step: 1,
+                value: n,
+                disabled: !i,
+                onChange: (l) => s({ pumpMode: t, targetMoisture: Number(l.target.value) }),
+                className: r(
+                  "w-full h-2 rounded-full appearance-none cursor-pointer",
+                  "bg-muted accent-primary",
+                  "[&::-webkit-slider-thumb]:appearance-none",
+                  "[&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:w-4",
+                  "[&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-primary",
+                  "[&::-webkit-slider-thumb]:shadow-sm",
+                  "disabled:cursor-not-allowed"
+                )
+              }
+            ),
+            /* @__PURE__ */ a("div", { className: "flex justify-between text-[9px] font-mono text-muted-foreground/60 tabular-nums", children: [
+              /* @__PURE__ */ e("span", { children: "0%" }),
+              /* @__PURE__ */ e("span", { children: "50%" }),
+              /* @__PURE__ */ e("span", { children: "100%" })
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ e("div", { className: "pt-2 border-t border-border", children: /* @__PURE__ */ a("div", { className: "flex items-center justify-between text-[10px] font-mono text-muted-foreground", children: [
+        /* @__PURE__ */ e("span", { className: "uppercase tracking-[0.2em]", children: "Status" }),
+        /* @__PURE__ */ a("span", { className: r(
+          "font-bold tabular-nums",
+          t === "MANUAL_ON" && "text-blue-500",
+          t === "AUTO" && "text-green-500",
+          t === "MANUAL_OFF" && "text-muted-foreground"
+        ), children: [
+          t === "MANUAL_ON" && "PUMP ACTIVE",
+          t === "AUTO" && `AUTO @ ${n}%`,
+          t === "MANUAL_OFF" && "PUMP OFF"
+        ] })
+      ] }) })
+    ] })
+  ] });
+};
+export {
+  g as WaterPumpControl
+};