@ramme-io/ui 3.1.0 → 4.0.1

package/dist/components/forms/Select.js

@@ -0,0 +1,92 @@
+import { jsxs as f, jsx as e } from "react/jsx-runtime";
+import { useId as h } from "react";
+import y, { components as I } from "react-select";
+import { cn as n } from "../../utils/cn.js";
+import { Icon as C } from "../ui/Icon.js";
+const S = (a) => /* @__PURE__ */ e(I.DropdownIndicator, { ...a, children: /* @__PURE__ */ e(C, { name: "chevron-down", className: "h-4 w-4 text-muted-foreground" }) }), R = ({
+  options: a,
+  value: l,
+  onChange: i,
+  label: c,
+  placeholder: m = "Select...",
+  isDisabled: s = !1,
+  isLoading: u = !1,
+  isClearable: b = !0,
+  isSearchable: g = !0,
+  className: v,
+  error: p,
+  helperText: t
+}) => {
+  const d = h(), x = {
+    control: (r, o) => ({
+      ...r,
+      backgroundColor: "rgb(var(--app-card-bg-color))",
+      borderColor: p ? "rgb(var(--app-danger-color))" : o.isFocused ? "rgb(var(--app-primary-color))" : "rgb(var(--app-border-color))",
+      color: "rgb(var(--app-text-color))",
+      borderRadius: "var(--app-border-radius-md)",
+      boxShadow: o.isFocused ? "0 0 0 1px rgb(var(--app-primary-color))" : "none",
+      "&:hover": {
+        borderColor: o.isFocused ? "rgb(var(--app-primary-color))" : "rgb(var(--app-text-color) / 0.5)"
+      },
+      minHeight: "2.5rem"
+      // Match Tailwind h-10
+    }),
+    menu: (r) => ({
+      ...r,
+      backgroundColor: "rgb(var(--app-card-bg-color))",
+      border: "1px solid rgb(var(--app-border-color))",
+      borderRadius: "var(--app-border-radius-md)",
+      zIndex: 50
+    }),
+    option: (r, o) => ({
+      ...r,
+      backgroundColor: o.isSelected ? "rgb(var(--app-primary-color))" : o.isFocused ? "rgb(var(--app-primary-color) / 0.1)" : "transparent",
+      color: o.isSelected ? "rgb(var(--app-primary-foreground-color))" : "rgb(var(--app-text-color))",
+      cursor: "pointer",
+      "&:active": {
+        backgroundColor: "rgb(var(--app-primary-color) / 0.2)"
+      }
+    }),
+    singleValue: (r) => ({
+      ...r,
+      color: "rgb(var(--app-text-color))"
+    }),
+    input: (r) => ({
+      ...r,
+      color: "rgb(var(--app-text-color))"
+    }),
+    placeholder: (r) => ({
+      ...r,
+      color: "rgb(var(--app-text-color) / 0.5)"
+    }),
+    menuPortal: (r) => ({
+      ...r,
+      zIndex: 9999
+    })
+  };
+  return /* @__PURE__ */ f("div", { className: n("w-full", v), children: [
+    c && /* @__PURE__ */ e("label", { htmlFor: d, className: "block text-sm font-medium text-foreground mb-1.5", children: c }),
+    /* @__PURE__ */ e(
+      y,
+      {
+        instanceId: d,
+        styles: x,
+        components: { DropdownIndicator: S },
+        options: a,
+        value: l,
+        onChange: (r) => i(r),
+        isDisabled: s,
+        isLoading: u,
+        isClearable: b,
+        isSearchable: g,
+        placeholder: m,
+        menuPortalTarget: typeof document < "u" ? document.body : null,
+        menuPosition: "fixed"
+      }
+    ),
+    t && /* @__PURE__ */ e("p", { className: n("mt-1.5 text-xs", p ? "text-destructive" : "text-muted-foreground"), children: t })
+  ] });
+};
+export {
+  R as Select
+};

package/dist/components/forms/Textarea.js

@@ -0,0 +1,19 @@
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import l from "react";
+const n = l.forwardRef(
+  ({ label: r, className: a, containerClassName: o, ...e }, s) => /* @__PURE__ */ i("div", { className: `w-full ${o || ""}`, children: [
+    r && /* @__PURE__ */ t("label", { htmlFor: e.id || e.name, className: "block text-sm font-medium text-text-light mb-1", children: r }),
+    /* @__PURE__ */ t(
+      "textarea",
+      {
+        ref: s,
+        className: `w-full px-3 py-2 rounded-md bg-card border border-border transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary ${a || ""}`,
+        ...e
+      }
+    )
+  ] })
+);
+n.displayName = "Textarea";
+export {
+  n as Textarea
+};

package/dist/components/forms/ToggleSwitch.js

@@ -0,0 +1,39 @@
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
+import m from "react";
+const d = ({
+  checked: t,
+  onChange: n,
+  label: a,
+  className: l,
+  disabled: o = !1
+}) => {
+  const i = () => {
+    o || n(!t);
+  }, r = m.useId();
+  return /* @__PURE__ */ s("label", { htmlFor: r, className: `flex items-center cursor-pointer ${l || ""} ${o ? "opacity-50 cursor-not-allowed" : ""}`, children: [
+    /* @__PURE__ */ s("div", { className: "relative", children: [
+      /* @__PURE__ */ e(
+        "input",
+        {
+          id: r,
+          type: "checkbox",
+          className: "sr-only",
+          checked: t,
+          onChange: i,
+          disabled: o
+        }
+      ),
+      /* @__PURE__ */ e("div", { className: `block w-12 h-6 rounded-full transition-colors duration-200 ease-in-out ${t ? "bg-primary" : "bg-border"}` }),
+      /* @__PURE__ */ e(
+        "div",
+        {
+          className: `dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full shadow-sm transition-transform duration-200 ease-in-out ${t ? "translate-x-6" : ""}`
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e("div", { className: "ml-3 text-text font-medium select-none", children: a })
+  ] });
+};
+export {
+  d as ToggleSwitch
+};

package/dist/components/hardware/CircularDial.d.ts

@@ -1,3 +1,40 @@
+/**
+ * @wizard
+ * @name CircularDial
+ * @description A 270-degree arc gauge for a single live telemetry value, styled like a physical instrument dial.
+ * @tags hardware, gauge, dial, telemetry, iot
+ * @category hardware
+ * @props
+ * - name: value
+ * type: number
+ * description: The current value to display and plot on the arc.
+ * - name: min
+ * type: number
+ * description: The value at the start of the arc.
+ * default: 0
+ * - name: max
+ * type: number
+ * description: The value at the end of the arc.
+ * default: 100
+ * - name: label
+ * type: string
+ * description: The caption shown beneath the dial (e.g., "CPU TEMP").
+ * - name: unit
+ * type: string
+ * description: The unit suffix shown beneath the readout (e.g., "°C").
+ * - name: size
+ * type: number
+ * description: The width/height of the dial in pixels.
+ * default: 160
+ * - name: strokeWidth
+ * type: number
+ * description: The thickness of the arc track and indicator.
+ * default: 12
+ * - name: colorClass
+ * type: string
+ * description: A Tailwind text-color class applied to the live indicator arc.
+ * default: 'text-emerald-500'
+ */
 export interface CircularDialProps {
     value: number;
     min?: number;

package/dist/components/hardware/CircularDial.js

@@ -0,0 +1,65 @@
+import { jsxs as a, jsx as t } from "react/jsx-runtime";
+const N = ({
+  value: o,
+  min: c = 0,
+  max: l = 100,
+  label: m,
+  unit: d = "",
+  size: e = 160,
+  strokeWidth: n = 12,
+  colorClass: x = "text-emerald-500"
+}) => {
+  const s = (e - n) / 2, i = 2 * Math.PI * s, r = i * 0.75, f = i * 0.25, u = (Math.min(Math.max(o, c), l) - c) / (l - c), h = r - u * r;
+  return /* @__PURE__ */ a("div", { className: "flex flex-col items-center justify-center", style: { width: e }, children: [
+    /* @__PURE__ */ a("div", { className: "relative flex items-center justify-center", children: [
+      /* @__PURE__ */ a(
+        "svg",
+        {
+          width: e,
+          height: e,
+          viewBox: `0 0 ${e} ${e}`,
+          className: "transform rotate-[135deg]",
+          children: [
+            /* @__PURE__ */ t(
+              "circle",
+              {
+                cx: e / 2,
+                cy: e / 2,
+                r: s,
+                fill: "transparent",
+                stroke: "currentColor",
+                strokeWidth: n,
+                strokeDasharray: `${r} ${f}`,
+                className: "text-muted-foreground/20",
+                strokeLinecap: "round"
+              }
+            ),
+            /* @__PURE__ */ t(
+              "circle",
+              {
+                cx: e / 2,
+                cy: e / 2,
+                r: s,
+                fill: "transparent",
+                stroke: "currentColor",
+                strokeWidth: n,
+                strokeDasharray: `${r} ${f}`,
+                strokeDashoffset: h,
+                strokeLinecap: "round",
+                className: `transition-[stroke-dashoffset] duration-75 ease-linear ${x}`
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ a("div", { className: "absolute flex flex-col items-center justify-center text-center mt-2", children: [
+        /* @__PURE__ */ t("span", { className: "text-2xl font-mono font-bold tracking-tight text-foreground", children: o.toFixed(1) }),
+        d && /* @__PURE__ */ t("span", { className: "text-[9px] font-bold text-muted-foreground uppercase mt-0.5", children: d })
+      ] })
+    ] }),
+    /* @__PURE__ */ t("span", { className: "text-[10px] font-bold text-muted-foreground uppercase tracking-widest mt-4", children: m })
+  ] });
+};
+export {
+  N as CircularDial
+};

package/dist/components/hardware/EdgeInsightTerminal.d.ts

@@ -1,4 +1,16 @@
 import React from 'react';
+/**
+ * @wizard
+ * @name EdgeInsightTerminal
+ * @description A terminal-styled panel that streams an AI analysis of live edge telemetry as it arrives. Strategic purpose: pairs a device dashboard with a plain-language read of what the numbers mean, rendered progressively so the operator sees tokens as they land rather than waiting for a complete answer.
+ * @tags hardware, ai, terminal, insight, telemetry, streaming
+ * @category hardware
+ * @id edge-insight-terminal
+ * @param {boolean} isAnalyzing - True while a response is streaming; drives the busy affordance.
+ * @param {string} insightStream - The accumulated response text so far.
+ * @param {function} triggerAnalysis - Starts an analysis run.
+ * @param {string} className - Additional CSS classes.
+ */
 export interface EdgeInsightTerminalProps {
     isAnalyzing: boolean;
     insightStream: string;

package/dist/components/hardware/EdgeInsightTerminal.js

@@ -0,0 +1,68 @@
+import { jsxs as r, jsx as e, Fragment as s } from "react/jsx-runtime";
+import { useRef as c, useEffect as p } from "react";
+import { Icon as i } from "../ui/Icon.js";
+const x = ({
+  isAnalyzing: a,
+  insightStream: l,
+  triggerAnalysis: o,
+  className: n = ""
+}) => {
+  const t = c(null);
+  return p(() => {
+    t.current && (t.current.scrollTop = t.current.scrollHeight);
+  }, [l]), /* @__PURE__ */ r("div", { className: `flex flex-col bg-card border border-border rounded-lg overflow-hidden font-mono shadow-2xl ${n}`, children: [
+    /* @__PURE__ */ r("div", { className: "flex items-center justify-between px-3 py-2 bg-muted/50 border-b border-border", children: [
+      /* @__PURE__ */ r("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ e(i, { name: "cpu", size: 14, className: "text-primary" }),
+        /* @__PURE__ */ e("span", { className: "text-[10px] font-bold text-primary/80 uppercase tracking-widest", children: "Edge Intelligence" })
+      ] }),
+      /* @__PURE__ */ e(
+        "button",
+        {
+          onClick: o,
+          disabled: a,
+          className: "flex items-center gap-1.5 px-2 py-1 bg-primary/10 hover:bg-primary/20 text-primary text-[9px] font-bold uppercase rounded border border-primary/20 transition-colors disabled:opacity-50 disabled:pointer-events-none",
+          children: a ? /* @__PURE__ */ r(s, { children: [
+            /* @__PURE__ */ e(i, { name: "loader", size: 10, className: "animate-spin" }),
+            "ANALYZING..."
+          ] }) : /* @__PURE__ */ r(s, { children: [
+            /* @__PURE__ */ e(i, { name: "play", size: 10 }),
+            "REQUEST DIAGNOSTIC"
+          ] })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ r(
+      "div",
+      {
+        ref: t,
+        className: "relative p-4 h-[200px] overflow-auto text-primary text-xs leading-relaxed",
+        children: [
+          a && /* @__PURE__ */ e("div", { className: "absolute top-0 left-0 w-full h-[2px] bg-primary/50 shadow-[0_0_8px_2px_var(--app-primary)] animate-[scan_2s_ease-in-out_infinite]" }),
+          !l && !a ? /* @__PURE__ */ r("div", { className: "text-primary/50 flex flex-col items-center justify-center h-full gap-2", children: [
+            /* @__PURE__ */ e(i, { name: "terminal", size: 24 }),
+            /* @__PURE__ */ e("span", { children: "AWAITING INPUT..." })
+          ] }) : /* @__PURE__ */ r("div", { className: "whitespace-pre-wrap break-words", children: [
+            l,
+            a && /* @__PURE__ */ e("span", { className: "inline-block w-2 h-3 ml-1 bg-primary animate-[blink_1s_step-end_infinite]" })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ e("style", { children: `
+        @keyframes scan {
+          0% { top: 0; opacity: 0; }
+          10% { opacity: 1; }
+          90% { opacity: 1; }
+          100% { top: 100%; opacity: 0; }
+        }
+        @keyframes blink {
+          0%, 100% { opacity: 1; }
+          50% { opacity: 0; }
+        }
+      ` })
+  ] });
+};
+export {
+  x as EdgeInsightTerminal
+};

package/dist/components/hardware/HardwareCommandButton.d.ts

@@ -1,4 +1,18 @@
 import React from 'react';
+/**
+ * @wizard
+ * @name HardwareCommandButton
+ * @description A command trigger that shows the full round trip to a physical device — transmitting, awaiting acknowledgement, then success or failure. Strategic purpose: edge commands are not instant and can fail silently; this makes the in-flight and unacknowledged states visible instead of leaving the operator guessing. Drive `status` from your MQTT publish/ack cycle.
+ * @tags hardware, button, command, iot, mqtt, control, telemetry
+ * @category hardware
+ * @id hardware-command-button
+ * @param {string} label - The command's name.
+ * @param {string} status - Lifecycle state: 'idle', 'transmitting', 'awaiting_ack', 'success', or 'error'.
+ * @param {function} onClick - Fires the command.
+ * @param {ReactNode} icon - Optional leading icon.
+ * @param {boolean} disabled - Disables the trigger.
+ * @param {string} className - Additional CSS classes.
+ */
 export type CommandStatus = 'idle' | 'transmitting' | 'awaiting_ack' | 'success' | 'error';
 export interface HardwareCommandButtonProps {
     label: string;

package/dist/components/hardware/HardwareCommandButton.js

@@ -0,0 +1,55 @@
+import { jsxs as n, jsx as i } from "react/jsx-runtime";
+const d = {
+  idle: { text: "", color: "", pulse: !1 },
+  transmitting: { text: "> TRANSMITTING_PAYLOAD", color: "text-warning bg-warning/10", pulse: !0 },
+  awaiting_ack: { text: "> AWAITING_ACK...", color: "text-primary bg-primary/10", pulse: !0 },
+  success: { text: "> ACK_OK ✓", color: "text-success bg-success/10", pulse: !1 },
+  error: { text: "> TX_FAIL ✗", color: "text-destructive bg-destructive/10", pulse: !0 }
+}, u = ({
+  label: o,
+  status: e,
+  onClick: s,
+  disabled: c = !1,
+  icon: l,
+  className: r = ""
+}) => {
+  const a = e !== "idle", t = d[e];
+  return a ? /* @__PURE__ */ n(
+    "div",
+    {
+      className: `
+          inline-flex items-center gap-2 px-3 py-1.5 rounded border
+          font-mono text-[10px] font-bold uppercase tracking-wider
+          ${t.color} border-current/20
+          ${t.pulse ? "animate-pulse" : ""}
+          ${r}
+        `,
+      children: [
+        /* @__PURE__ */ i("span", { className: "inline-block w-1.5 h-1.5 rounded-full bg-current" }),
+        t.text,
+        (e === "transmitting" || e === "awaiting_ack") && /* @__PURE__ */ i("span", { className: "inline-block w-[5px] h-3 bg-current animate-[blink_1s_step-end_infinite] ml-0.5" })
+      ]
+    }
+  ) : /* @__PURE__ */ n(
+    "button",
+    {
+      onClick: s,
+      disabled: c,
+      className: `
+        inline-flex items-center gap-1.5 px-3 py-1.5 rounded border
+        border-border bg-card hover:bg-muted
+        text-[10px] font-bold uppercase tracking-wider text-foreground
+        transition-colors duration-150
+        disabled:opacity-40 disabled:pointer-events-none
+        ${r}
+      `,
+      children: [
+        l,
+        o
+      ]
+    }
+  );
+};
+export {
+  u as HardwareCommandButton
+};

package/dist/components/hardware/Sparkline.d.ts

@@ -5,4 +5,17 @@ export interface SparklineProps {
     colorClass?: string;
     strokeWidth?: number;
 }
+/**
+ * @wizard
+ * @name Sparkline
+ * @description A compact, axis-less trend line for showing the shape of a series inline — in a table cell, a stat tile, or next to a live value. Strategic purpose: conveys direction and volatility in the space of a word, where a full chart would not fit. Auto-scales to the data's own min/max with 10% vertical padding so peaks are never clipped. For a full chart with axes and tooltips, use LineChart instead.
+ * @tags data-display, chart, trend, sparkline, inline, telemetry
+ * @category hardware
+ * @id sparkline
+ * @param {number[]} data - The series to plot, oldest first. A single point renders a flat mid-line; an empty array renders nothing.
+ * @param {number} width - SVG width in px. Defaults to 100.
+ * @param {number} height - SVG height in px. Defaults to 24.
+ * @param {string} colorClass - Semantic text-color utility driving the stroke via currentColor. Defaults to text-success. Use a semantic token (text-success, text-destructive, text-primary) — never a numeric palette shade, which will not adapt across themes.
+ * @param {number} strokeWidth - Line thickness in px. Defaults to 2.
+ */
 export declare const Sparkline: ({ data, width, height, colorClass, strokeWidth }: SparklineProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/hardware/Sparkline.js

@@ -0,0 +1,34 @@
+import { jsx as m } from "react/jsx-runtime";
+import { useMemo as k } from "react";
+const N = ({
+  data: n,
+  width: o = 100,
+  height: r = 24,
+  colorClass: u = "text-success",
+  strokeWidth: x = 2
+}) => {
+  const $ = k(() => {
+    if (!n || n.length === 0) return "";
+    if (n.length === 1) return `M 0 ${r / 2} L ${o} ${r / 2}`;
+    const e = Math.min(...n), s = Math.max(...n), c = s - e || 1, t = e - c * 0.1, p = s + c * 0.1 - t;
+    return n.reduce((M, f, l) => {
+      const i = l / (n.length - 1) * o, a = r - (f - t) / p * r;
+      return `${M} ${l === 0 ? "M" : "L"} ${i} ${a.toFixed(1)}`;
+    }, "");
+  }, [n, o, r]);
+  return /* @__PURE__ */ m("svg", { width: o, height: r, viewBox: `0 0 ${o} ${r}`, className: "overflow-visible", children: /* @__PURE__ */ m(
+    "path",
+    {
+      d: $,
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: x,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: u
+    }
+  ) });
+};
+export {
+  N as Sparkline
+};

package/dist/components/layout/AboutRamme.js

@@ -0,0 +1,87 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { Icon as o } from "../ui/Icon.js";
+const s = ({ pkg: t, label: r, children: l }) => /* @__PURE__ */ a("div", { children: [
+  /* @__PURE__ */ e("p", { className: "text-[10px] font-mono text-muted-foreground/60 leading-none mb-1", children: t }),
+  /* @__PURE__ */ e("h4", { className: "text-sm font-semibold text-foreground mb-1", children: r }),
+  /* @__PURE__ */ e("p", { className: "text-xs text-muted-foreground leading-relaxed", children: l })
+] }), n = ({ title: t, children: r }) => /* @__PURE__ */ a("div", { children: [
+  /* @__PURE__ */ e("h4", { className: "text-sm font-semibold text-foreground mb-1", children: t }),
+  /* @__PURE__ */ e("p", { className: "text-xs text-muted-foreground leading-relaxed", children: r })
+] }), i = ({ label: t }) => /* @__PURE__ */ e("h3", { className: "text-[10px] font-bold uppercase tracking-widest text-muted-foreground/60 mb-4", children: t }), m = () => /* @__PURE__ */ a("div", { className: "space-y-10 max-w-2xl", children: [
+  /* @__PURE__ */ a("div", { children: [
+    /* @__PURE__ */ a("div", { className: "flex items-baseline gap-2 flex-wrap mb-3", children: [
+      /* @__PURE__ */ e("h2", { className: "text-xl font-bold text-foreground", children: "About Ramme" }),
+      /* @__PURE__ */ e("span", { className: "text-xs font-medium text-muted-foreground/60 italic", children: 'Danish / Norwegian for "Frame"' })
+    ] }),
+    /* @__PURE__ */ e("p", { className: "text-sm text-muted-foreground leading-relaxed", children: "Ramme is an open-source, AI-native software framework and user interface kit built to bridge the gap between continuous hardware sensor data, automated AI systems, and a completely smooth, stutter-free screen." }),
+    /* @__PURE__ */ e("p", { className: "mt-2 text-sm text-muted-foreground/80 leading-relaxed", children: "Just as a physical frame supports a canvas, Ramme provides the sturdy, invisible foundation—handling application state, smart buffering for live device streams, navigation, and AI connections—so developers and AI agents can focus purely on creating the visual experience, business logic, and physical hardware." })
+  ] }),
+  /* @__PURE__ */ e("div", { className: "border-t border-border" }),
+  /* @__PURE__ */ a("section", { children: [
+    /* @__PURE__ */ e(i, { label: "Core Concepts" }),
+    /* @__PURE__ */ a("div", { className: "flex flex-col divide-y divide-border", children: [
+      /* @__PURE__ */ e("div", { className: "py-4 first:pt-0", children: /* @__PURE__ */ e(s, { pkg: "@ramme-io/ui", label: "The Interface", children: "A modular visual component library built on Radix UI, Framer Motion, and Lucide React. Designed to ensure complete layout stability and eliminate visual stutter, incorporating device-specific components like virtual visualizers, custom gauges, and real-time sparklines." }) }),
+      /* @__PURE__ */ e("div", { className: "py-4", children: /* @__PURE__ */ a(s, { pkg: "@ramme-io/kernel", label: "The Core Engine", children: [
+        "The brain of the system that manages application state and parses incoming data streams (WebSocket, MQTT, and Serial). It features a",
+        " ",
+        /* @__PURE__ */ e("strong", { className: "text-foreground", children: "15 Hz Refresh Shield" }),
+        ": hardware sensors stream data hundreds of times a second, which freezes web browsers. This shield intercepts those rapid signals and updates the screen exactly 15 times per second, delivering real-time responsiveness while keeping the application smooth and lag-free."
+      ] }) }),
+      /* @__PURE__ */ e("div", { className: "py-4 last:pb-0", children: /* @__PURE__ */ a(s, { pkg: "@ramme-io/create-app", label: "The Scaffolder", children: [
+        "A command-line starter tool that instantly sets up a professional development environment. It features a built-in AI connector that integrates major models (like Gemini, OpenAI, and Anthropic) to stream responses word-by-word instantly, and includes local",
+        " ",
+        /* @__PURE__ */ e("code", { className: "font-mono text-[10px] bg-muted px-1 rounded", children: ".rammerules" }),
+        " ",
+        "to guide AI coding assistants safely."
+      ] }) })
+    ] })
+  ] }),
+  /* @__PURE__ */ a("section", { children: [
+    /* @__PURE__ */ e(i, { label: "Business & Operational Value" }),
+    /* @__PURE__ */ a("div", { className: "flex flex-col divide-y divide-border", children: [
+      /* @__PURE__ */ e("div", { className: "py-4 first:pt-0", children: /* @__PURE__ */ a(n, { title: "AI Safety Guardrails", children: [
+        "By enforcing a strict data blueprint (",
+        /* @__PURE__ */ e("code", { className: "font-mono text-[10px] bg-muted px-1 rounded", children: "schema.ts" }),
+        ") and layout constraints upfront, Ramme provides structural rules. This allows AI coding assistants to write code and add features rapidly without breaking existing features or causing system-wide errors."
+      ] }) }),
+      /* @__PURE__ */ e("div", { className: "py-4", children: /* @__PURE__ */ e(n, { title: "Decoupled Complexity", children: "Ramme separates the complex plumbing of physical device data and multiple AI providers from the visual layer. This lets developers build hardware-connected software products without having to build standard database, telemetry, and stream-handling systems from scratch." }) }),
+      /* @__PURE__ */ e("div", { className: "py-4 last:pb-0", children: /* @__PURE__ */ e(n, { title: "Data and State Stability", children: "Engineered to absorb real-world signal noise and erratic hardware streams. It ensures that user dashboards display clean, steady, and readable insights instead of flickering and jumping with raw, unfiltered data." }) })
+    ] })
+  ] }),
+  /* @__PURE__ */ a("section", { children: [
+    /* @__PURE__ */ e(i, { label: "Resources" }),
+    /* @__PURE__ */ a("div", { className: "flex flex-wrap gap-3", children: [
+      /* @__PURE__ */ a(
+        "a",
+        {
+          href: "https://ramme.io",
+          target: "_blank",
+          rel: "noopener noreferrer",
+          className: "inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors",
+          children: [
+            "ramme.io",
+            /* @__PURE__ */ e(o, { name: "external-link", size: 12, className: "text-muted-foreground/60" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ e("span", { className: "text-border", children: "·" }),
+      /* @__PURE__ */ a(
+        "a",
+        {
+          href: "https://www.npmjs.com/settings/ramme-io/packages",
+          target: "_blank",
+          rel: "noopener noreferrer",
+          className: "inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors",
+          children: [
+            "NPM — @ramme-io",
+            /* @__PURE__ */ e(o, { name: "external-link", size: 12, className: "text-muted-foreground/60" })
+          ]
+        }
+      )
+    ] })
+  ] }),
+  /* @__PURE__ */ e("p", { className: "text-[10px] text-muted-foreground/40 font-mono", children: "Ramme Framework · Open Source · MIT License" })
+] });
+export {
+  m as AboutRamme
+};

package/dist/components/layout/Accordion.js

@@ -0,0 +1,52 @@
+import { jsx as n, jsxs as m } from "react/jsx-runtime";
+import d, { useState as u, useCallback as f } from "react";
+const g = ({ id: e, header: r, children: i, isOpen: t, onToggle: a }) => {
+  const [c, o] = u(t !== void 0 ? t : !1), s = t !== void 0, l = s ? t : c, h = f(() => {
+    s && a ? a(e, !l) : o((v) => !v);
+  }, [e, l, s, a]), p = `transform transition-transform duration-300 ${l ? "rotate-180" : "rotate-0"}`;
+  return /* @__PURE__ */ m("div", { className: "border border-border rounded-md overflow-hidden", children: [
+    /* @__PURE__ */ m(
+      "button",
+      {
+        id: `accordion-header-${e}`,
+        "aria-expanded": l,
+        "aria-controls": `accordion-panel-${e}`,
+        onClick: h,
+        className: "flex items-center justify-between w-full p-4 text-text bg-background hover:bg-background/80 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2",
+        role: "heading",
+        "aria-level": 3,
+        children: [
+          /* @__PURE__ */ n("span", { className: "text-xl font-semibold", children: r }),
+          /* @__PURE__ */ n("svg", { className: `w-6 h-6 text-text ${p}`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ n("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M19 9l-7 7-7-7" }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ n(
+      "div",
+      {
+        id: `accordion-panel-${e}`,
+        role: "region",
+        "aria-labelledby": `accordion-header-${e}`,
+        style: {
+          maxHeight: l ? "1000px" : "0",
+          // Arbitrary large height for transition
+          overflow: "hidden",
+          transition: "max-height 0.3s ease-in-out"
+        },
+        children: /* @__PURE__ */ n("div", { className: "p-4 bg-card", children: i })
+      }
+    )
+  ] });
+}, w = ({ children: e, singleOpen: r = !1, className: i }) => {
+  const [t, a] = u(null), c = f((o, s) => {
+    r && a(s ? o : null);
+  }, [r]);
+  return /* @__PURE__ */ n("div", { className: `space-y-4 ${i || ""}`, children: d.Children.map(e, (o) => d.isValidElement(o) ? d.cloneElement(o, {
+    isOpen: r ? o.props.id === t : void 0,
+    onToggle: r ? c : void 0
+  }) : o) });
+};
+export {
+  w as Accordion,
+  g as AccordionItem
+};

package/dist/components/layout/ActionBar.js

@@ -0,0 +1,5 @@
+import { jsx as t } from "react/jsx-runtime";
+const a = ({ children: r, className: e }) => /* @__PURE__ */ t("div", { className: `flex items-center justify-end gap-4 p-4 bg-background-alt border-t border-border ${e || ""}`, children: r });
+export {
+  a as ActionBar
+};

package/dist/components/layout/AppShell.d.ts

@@ -1,5 +1,23 @@
 import React from 'react';
 import type { AppSpecification } from '@ramme-io/shared';
+/**
+ * @wizard
+ * @name AppShell
+ * @description The viewport orchestrator — the outermost frame that owns the sidebar, header, toolbar, statusbar, and inspector slots and decides how they compose. Strategic purpose: this is the only component allowed to control full-viewport geometry. Page components render inside it and must never set `h-screen` or `overflow-hidden` themselves. Pick a `layoutPreset` rather than rearranging slots by hand.
+ * @tags layout, shell, chassis, viewport, scaffold, application
+ * @category layout
+ * @id app-shell
+ * @param {string} layoutPreset - Arrangement of the slots: 'dashboard' (default), 'explorer', 'studio', or 'focus'.
+ * @param {ReactNode} sidebarSlot - Primary navigation region.
+ * @param {ReactNode} headerSlot - Top bar, above the content canvas.
+ * @param {ReactNode} toolbarSlot - Secondary action strip beneath the header.
+ * @param {ReactNode} statusbarSlot - Persistent strip pinned to the bottom.
+ * @param {ReactNode} inspectorSlot - Right-hand detail panel.
+ * @param {boolean} isInspectorOpen - Controls inspector visibility.
+ * @param {function} setInspectorOpen - Setter paired with isInspectorOpen.
+ * @param {number} inspectorWidth - Inspector width in px.
+ * @param {ReactNode} children - The page content, rendered into the main canvas.
+ */
 export interface AppShellProps extends React.HTMLAttributes<HTMLDivElement> {
     layoutPreset?: AppSpecification['config']['layout'];
     sidebarSlot?: React.ReactNode;