@ai4b-team/fsaos-gateway-sdk 1.0.1

package/dist/ui.cjs

@@ -0,0 +1,201 @@
+'use strict';
+
+var react = require('react');
+
+// src/ui.ts
+function getEdgeBaseUrl() {
+  const config = typeof window !== "undefined" && window.__FSAOS_CONFIG__ || {};
+  return config.edgeBaseUrl || "";
+}
+function Page(props) {
+  return react.createElement("div", {
+    style: { minHeight: "100vh", display: "flex", flexDirection: "column" },
+    className: props.className || ""
+  }, props.children);
+}
+function Stack(props) {
+  const dir = props.direction || "vertical";
+  return react.createElement("div", {
+    style: {
+      display: "flex",
+      flexDirection: dir === "horizontal" ? "row" : "column",
+      gap: props.gap || "0.5rem",
+      padding: props.padding || "0",
+      alignItems: props.align || "stretch",
+      justifyContent: props.justify || "flex-start",
+      flex: props.flex || "initial"
+    },
+    className: props.className || ""
+  }, props.children);
+}
+function Grid(props) {
+  return react.createElement("div", {
+    style: {
+      display: "grid",
+      gridTemplateColumns: "repeat(" + (props.columns || 3) + ", 1fr)",
+      gap: props.gap || "1rem",
+      padding: props.padding || "0"
+    },
+    className: props.className || ""
+  }, props.children);
+}
+function Sidebar(props) {
+  return react.createElement("div", {
+    style: { display: "flex", flexDirection: "row", minHeight: "100vh" },
+    className: props.className || ""
+  }, props.children);
+}
+function Card(props) {
+  return react.createElement("div", {
+    style: {
+      border: "1px solid var(--color-border, #e5e7eb)",
+      borderRadius: "var(--border-radius, 0.5rem)",
+      padding: props.padding || "1rem",
+      background: "var(--color-surface, #fff)"
+    },
+    className: props.className || "",
+    onClick: props.onClick
+  }, props.children);
+}
+function Badge(props) {
+  return react.createElement("span", {
+    style: {
+      display: "inline-flex",
+      alignItems: "center",
+      padding: "0.125rem 0.5rem",
+      fontSize: "0.75rem",
+      fontWeight: "500",
+      borderRadius: "9999px",
+      background: props.color || "#e5e7eb",
+      color: props.textColor || "#374151"
+    },
+    className: props.className || ""
+  }, props.children || props.label);
+}
+function Spinner(props) {
+  const size = props.size || "1.5rem";
+  return react.createElement("div", {
+    style: {
+      width: size,
+      height: size,
+      border: "2px solid #e5e7eb",
+      borderTopColor: "var(--color-primary, #3b82f6)",
+      borderRadius: "50%",
+      animation: "fsaos-spin 0.6s linear infinite"
+    }
+  });
+}
+function Button(props) {
+  return react.createElement("button", {
+    style: {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      padding: "0.5rem 1rem",
+      fontSize: "0.875rem",
+      fontWeight: "500",
+      borderRadius: "var(--border-radius, 0.375rem)",
+      border: props.variant === "outline" ? "1px solid var(--color-border, #d1d5db)" : "none",
+      background: props.variant === "outline" || props.variant === "ghost" ? "transparent" : "var(--color-primary, #3b82f6)",
+      color: props.variant === "outline" || props.variant === "ghost" ? "var(--color-text, #1a1a1a)" : "#fff",
+      cursor: props.disabled ? "not-allowed" : "pointer",
+      opacity: props.disabled ? "0.5" : "1",
+      gap: "0.5rem"
+    },
+    className: props.className || "",
+    onClick: props.onClick,
+    disabled: props.disabled
+  }, props.children || props.label);
+}
+function Empty(props) {
+  return react.createElement(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "3rem",
+        color: "var(--color-text-secondary, #6b7280)",
+        textAlign: "center"
+      }
+    },
+    props.icon ? react.createElement("div", { style: { fontSize: "2rem", marginBottom: "0.5rem" } }, props.icon) : null,
+    react.createElement(
+      "div",
+      { style: { fontWeight: 500, marginBottom: "0.25rem" } },
+      props.title || props.message || props.children || "No items"
+    ),
+    props.description ? react.createElement("div", { style: { fontSize: "0.875rem", opacity: 0.7 } }, props.description) : null
+  );
+}
+function DataView(props) {
+  return react.createElement("div", { className: props.className || "" }, props.children);
+}
+function Table(props) {
+  return react.createElement("table", { className: props.className || "" }, props.children);
+}
+function Form(props) {
+  return react.createElement("form", { className: props.className || "", onSubmit: props.onSubmit }, props.children);
+}
+function Detail(props) {
+  return react.createElement("div", { className: props.className || "" }, props.children);
+}
+function Router(props) {
+  return react.createElement("div", null, props.children);
+}
+function Link(props) {
+  return react.createElement("a", {
+    href: props.href || props.to,
+    className: props.className || "",
+    onClick: props.onClick
+  }, props.children);
+}
+function Tabs(props) {
+  return react.createElement("div", { className: props.className || "" }, props.children);
+}
+function Breadcrumbs(props) {
+  return react.createElement("nav", { className: props.className || "" }, props.children);
+}
+function Image(props) {
+  return react.createElement("img", {
+    src: props.src || (props.path ? getEdgeBaseUrl() + props.path : ""),
+    alt: props.alt || "",
+    className: props.className || "",
+    style: props.style
+  });
+}
+function Video(props) {
+  return react.createElement("video", {
+    src: props.src || (props.path ? getEdgeBaseUrl() + props.path : ""),
+    controls: true,
+    className: props.className || ""
+  });
+}
+function FilePreview(props) {
+  return react.createElement("div", { className: props.className || "" }, props.children || "File preview");
+}
+
+exports.Badge = Badge;
+exports.Breadcrumbs = Breadcrumbs;
+exports.Button = Button;
+exports.Card = Card;
+exports.DataView = DataView;
+exports.Detail = Detail;
+exports.Empty = Empty;
+exports.FilePreview = FilePreview;
+exports.Form = Form;
+exports.Grid = Grid;
+exports.Image = Image;
+exports.Link = Link;
+exports.Page = Page;
+exports.Router = Router;
+exports.Sidebar = Sidebar;
+exports.Spinner = Spinner;
+exports.Stack = Stack;
+exports.Table = Table;
+exports.Tabs = Tabs;
+exports.Video = Video;
+//# sourceMappingURL=ui.cjs.map
+//# sourceMappingURL=ui.cjs.map

package/dist/ui.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ui.ts"],"names":["createElement"],"mappings":"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","file":"ui.cjs","sourcesContent":["/**\n * @fsaos/ui — UI Primitives\n *\n * Lightweight layout and display components for edge-served FSAOS components.\n * These render real HTML/CSS using CSS custom properties from the scope's theme.\n *\n * Built as a separate IIFE bundle → window.__FSAOS_UI__\n * Components: Page, Stack, Grid, Sidebar, Card, Badge, Spinner, Button,\n *             Empty, DataView, Table, Form, Detail, Router, Link, Tabs,\n *             Breadcrumbs, Image, Video, FilePreview\n */\n\nimport { createElement } from 'react';\n\n// ── Helpers ────────────────────────────────────────────────────────────────\n\nfunction getEdgeBaseUrl(): string {\n  const config = (typeof window !== 'undefined' && (window as any).__FSAOS_CONFIG__) || {};\n  return config.edgeBaseUrl || '';\n}\n\n// ── Layout Components ──────────────────────────────────────────────────────\n\nexport function Page(props: { className?: string; children?: any }) {\n  return createElement('div', {\n    style: { minHeight: '100vh', display: 'flex', flexDirection: 'column' },\n    className: props.className || '',\n  }, props.children);\n}\n\nexport function Stack(props: {\n  direction?: 'vertical' | 'horizontal';\n  gap?: string;\n  padding?: string;\n  align?: string;\n  justify?: string;\n  flex?: string;\n  className?: string;\n  children?: any;\n}) {\n  const dir = props.direction || 'vertical';\n  return createElement('div', {\n    style: {\n      display: 'flex',\n      flexDirection: dir === 'horizontal' ? 'row' : 'column',\n      gap: props.gap || '0.5rem',\n      padding: props.padding || '0',\n      alignItems: props.align || 'stretch',\n      justifyContent: props.justify || 'flex-start',\n      flex: props.flex || 'initial',\n    },\n    className: props.className || '',\n  }, props.children);\n}\n\nexport function Grid(props: {\n  columns?: number;\n  gap?: string;\n  padding?: string;\n  className?: string;\n  children?: any;\n}) {\n  return createElement('div', {\n    style: {\n      display: 'grid',\n      gridTemplateColumns: 'repeat(' + (props.columns || 3) + ', 1fr)',\n      gap: props.gap || '1rem',\n      padding: props.padding || '0',\n    },\n    className: props.className || '',\n  }, props.children);\n}\n\nexport function Sidebar(props: { className?: string; children?: any }) {\n  return createElement('div', {\n    style: { display: 'flex', flexDirection: 'row', minHeight: '100vh' },\n    className: props.className || '',\n  }, props.children);\n}\n\n// ── Display Components ─────────────────────────────────────────────────────\n\nexport function Card(props: {\n  padding?: string;\n  className?: string;\n  onClick?: () => void;\n  children?: any;\n}) {\n  return createElement('div', {\n    style: {\n      border: '1px solid var(--color-border, #e5e7eb)',\n      borderRadius: 'var(--border-radius, 0.5rem)',\n      padding: props.padding || '1rem',\n      background: 'var(--color-surface, #fff)',\n    },\n    className: props.className || '',\n    onClick: props.onClick,\n  }, props.children);\n}\n\nexport function Badge(props: {\n  color?: string;\n  textColor?: string;\n  label?: string;\n  className?: string;\n  children?: any;\n}) {\n  return createElement('span', {\n    style: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      padding: '0.125rem 0.5rem',\n      fontSize: '0.75rem',\n      fontWeight: '500',\n      borderRadius: '9999px',\n      background: props.color || '#e5e7eb',\n      color: props.textColor || '#374151',\n    },\n    className: props.className || '',\n  }, props.children || props.label);\n}\n\nexport function Spinner(props: { size?: string }) {\n  const size = props.size || '1.5rem';\n  return createElement('div', {\n    style: {\n      width: size,\n      height: size,\n      border: '2px solid #e5e7eb',\n      borderTopColor: 'var(--color-primary, #3b82f6)',\n      borderRadius: '50%',\n      animation: 'fsaos-spin 0.6s linear infinite',\n    },\n  });\n}\n\nexport function Button(props: {\n  variant?: 'default' | 'outline' | 'ghost';\n  disabled?: boolean;\n  label?: string;\n  className?: string;\n  onClick?: () => void;\n  children?: any;\n}) {\n  return createElement('button', {\n    style: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      padding: '0.5rem 1rem',\n      fontSize: '0.875rem',\n      fontWeight: '500',\n      borderRadius: 'var(--border-radius, 0.375rem)',\n      border: props.variant === 'outline' ? '1px solid var(--color-border, #d1d5db)' : 'none',\n      background: props.variant === 'outline' || props.variant === 'ghost'\n        ? 'transparent'\n        : 'var(--color-primary, #3b82f6)',\n      color: props.variant === 'outline' || props.variant === 'ghost'\n        ? 'var(--color-text, #1a1a1a)'\n        : '#fff',\n      cursor: props.disabled ? 'not-allowed' : 'pointer',\n      opacity: props.disabled ? '0.5' : '1',\n      gap: '0.5rem',\n    },\n    className: props.className || '',\n    onClick: props.onClick,\n    disabled: props.disabled,\n  }, props.children || props.label);\n}\n\nexport function Empty(props: {\n  icon?: string;\n  title?: string;\n  message?: string;\n  description?: string;\n  className?: string;\n  children?: any;\n}) {\n  return createElement('div', {\n    style: {\n      display: 'flex',\n      flexDirection: 'column',\n      alignItems: 'center',\n      justifyContent: 'center',\n      padding: '3rem',\n      color: 'var(--color-text-secondary, #6b7280)',\n      textAlign: 'center',\n    },\n  },\n    props.icon\n      ? createElement('div', { style: { fontSize: '2rem', marginBottom: '0.5rem' } }, props.icon)\n      : null,\n    createElement('div', { style: { fontWeight: 500, marginBottom: '0.25rem' } },\n      props.title || props.message || props.children || 'No items',\n    ),\n    props.description\n      ? createElement('div', { style: { fontSize: '0.875rem', opacity: 0.7 } }, props.description)\n      : null,\n  );\n}\n\n// ── Passthrough Components ─────────────────────────────────────────────────\n// These render basic HTML elements. Components can style them via className.\n\nexport function DataView(props: { className?: string; children?: any }) {\n  return createElement('div', { className: props.className || '' }, props.children);\n}\n\nexport function Table(props: { className?: string; children?: any }) {\n  return createElement('table', { className: props.className || '' }, props.children);\n}\n\nexport function Form(props: { className?: string; onSubmit?: (e: any) => void; children?: any }) {\n  return createElement('form', { className: props.className || '', onSubmit: props.onSubmit }, props.children);\n}\n\nexport function Detail(props: { className?: string; children?: any }) {\n  return createElement('div', { className: props.className || '' }, props.children);\n}\n\nexport function Router(props: { children?: any }) {\n  return createElement('div', null, props.children);\n}\n\nexport function Link(props: {\n  href?: string;\n  to?: string;\n  className?: string;\n  onClick?: (e: any) => void;\n  children?: any;\n}) {\n  return createElement('a', {\n    href: props.href || props.to,\n    className: props.className || '',\n    onClick: props.onClick,\n  }, props.children);\n}\n\nexport function Tabs(props: { className?: string; children?: any }) {\n  return createElement('div', { className: props.className || '' }, props.children);\n}\n\nexport function Breadcrumbs(props: { className?: string; children?: any }) {\n  return createElement('nav', { className: props.className || '' }, props.children);\n}\n\n// ── Media Components ───────────────────────────────────────────────────────\n\nexport function Image(props: {\n  src?: string;\n  path?: string;\n  alt?: string;\n  className?: string;\n  style?: any;\n}) {\n  return createElement('img', {\n    src: props.src || (props.path ? getEdgeBaseUrl() + props.path : ''),\n    alt: props.alt || '',\n    className: props.className || '',\n    style: props.style,\n  });\n}\n\nexport function Video(props: {\n  src?: string;\n  path?: string;\n  className?: string;\n}) {\n  return createElement('video', {\n    src: props.src || (props.path ? getEdgeBaseUrl() + props.path : ''),\n    controls: true,\n    className: props.className || '',\n  });\n}\n\nexport function FilePreview(props: { className?: string; children?: any }) {\n  return createElement('div', { className: props.className || '' }, props.children || 'File preview');\n}\n"]}

package/dist/ui.d.cts

@@ -0,0 +1,243 @@
+import * as react from 'react';
+
+/**
+ * @fsaos/ui — UI Primitives
+ *
+ * Lightweight layout and display components for edge-served FSAOS components.
+ * These render real HTML/CSS using CSS custom properties from the scope's theme.
+ *
+ * Built as a separate IIFE bundle → window.__FSAOS_UI__
+ * Components: Page, Stack, Grid, Sidebar, Card, Badge, Spinner, Button,
+ *             Empty, DataView, Table, Form, Detail, Router, Link, Tabs,
+ *             Breadcrumbs, Image, Video, FilePreview
+ */
+declare function Page(props: {
+    className?: string;
+    children?: any;
+}): react.DetailedReactHTMLElement<{
+    style: {
+        minHeight: string;
+        display: "flex";
+        flexDirection: "column";
+    };
+    className: string;
+}, HTMLElement>;
+declare function Stack(props: {
+    direction?: 'vertical' | 'horizontal';
+    gap?: string;
+    padding?: string;
+    align?: string;
+    justify?: string;
+    flex?: string;
+    className?: string;
+    children?: any;
+}): react.DetailedReactHTMLElement<{
+    style: {
+        display: "flex";
+        flexDirection: "column" | "row";
+        gap: string;
+        padding: string;
+        alignItems: string;
+        justifyContent: string;
+        flex: string;
+    };
+    className: string;
+}, HTMLElement>;
+declare function Grid(props: {
+    columns?: number;
+    gap?: string;
+    padding?: string;
+    className?: string;
+    children?: any;
+}): react.DetailedReactHTMLElement<{
+    style: {
+        display: "grid";
+        gridTemplateColumns: string;
+        gap: string;
+        padding: string;
+    };
+    className: string;
+}, HTMLElement>;
+declare function Sidebar(props: {
+    className?: string;
+    children?: any;
+}): react.DetailedReactHTMLElement<{
+    style: {
+        display: "flex";
+        flexDirection: "row";
+        minHeight: string;
+    };
+    className: string;
+}, HTMLElement>;
+declare function Card(props: {
+    padding?: string;
+    className?: string;
+    onClick?: () => void;
+    children?: any;
+}): react.DetailedReactHTMLElement<{
+    style: {
+        border: string;
+        borderRadius: string;
+        padding: string;
+        background: string;
+    };
+    className: string;
+    onClick: (() => void) | undefined;
+}, HTMLElement>;
+declare function Badge(props: {
+    color?: string;
+    textColor?: string;
+    label?: string;
+    className?: string;
+    children?: any;
+}): react.DetailedReactHTMLElement<{
+    style: {
+        display: "inline-flex";
+        alignItems: "center";
+        padding: string;
+        fontSize: string;
+        fontWeight: "500";
+        borderRadius: string;
+        background: string;
+        color: string;
+    };
+    className: string;
+}, HTMLElement>;
+declare function Spinner(props: {
+    size?: string;
+}): react.DetailedReactHTMLElement<{
+    style: {
+        width: string;
+        height: string;
+        border: string;
+        borderTopColor: "var(--color-primary, #3b82f6)";
+        borderRadius: string;
+        animation: "fsaos-spin 0.6s linear infinite";
+    };
+}, HTMLElement>;
+declare function Button(props: {
+    variant?: 'default' | 'outline' | 'ghost';
+    disabled?: boolean;
+    label?: string;
+    className?: string;
+    onClick?: () => void;
+    children?: any;
+}): react.DetailedReactHTMLElement<{
+    style: {
+        display: "inline-flex";
+        alignItems: "center";
+        justifyContent: "center";
+        padding: string;
+        fontSize: string;
+        fontWeight: "500";
+        borderRadius: string;
+        border: string;
+        background: string;
+        color: "var(--color-text, #1a1a1a)" | "#fff";
+        cursor: "not-allowed" | "pointer";
+        opacity: "0.5" | "1";
+        gap: string;
+    };
+    className: string;
+    onClick: (() => void) | undefined;
+    disabled: boolean | undefined;
+}, HTMLElement>;
+declare function Empty(props: {
+    icon?: string;
+    title?: string;
+    message?: string;
+    description?: string;
+    className?: string;
+    children?: any;
+}): react.DetailedReactHTMLElement<{
+    style: {
+        display: "flex";
+        flexDirection: "column";
+        alignItems: "center";
+        justifyContent: "center";
+        padding: string;
+        color: "var(--color-text-secondary, #6b7280)";
+        textAlign: "center";
+    };
+}, HTMLElement>;
+declare function DataView(props: {
+    className?: string;
+    children?: any;
+}): react.DetailedReactHTMLElement<{
+    className: string;
+}, HTMLElement>;
+declare function Table(props: {
+    className?: string;
+    children?: any;
+}): react.DetailedReactHTMLElement<{
+    className: string;
+}, HTMLElement>;
+declare function Form(props: {
+    className?: string;
+    onSubmit?: (e: any) => void;
+    children?: any;
+}): react.DetailedReactHTMLElement<{
+    className: string;
+    onSubmit: ((e: any) => void) | undefined;
+}, HTMLElement>;
+declare function Detail(props: {
+    className?: string;
+    children?: any;
+}): react.DetailedReactHTMLElement<{
+    className: string;
+}, HTMLElement>;
+declare function Router(props: {
+    children?: any;
+}): react.DetailedReactHTMLElement<react.HTMLAttributes<HTMLElement>, HTMLElement>;
+declare function Link(props: {
+    href?: string;
+    to?: string;
+    className?: string;
+    onClick?: (e: any) => void;
+    children?: any;
+}): react.DetailedReactHTMLElement<{
+    href: string | undefined;
+    className: string;
+    onClick: ((e: any) => void) | undefined;
+}, HTMLElement>;
+declare function Tabs(props: {
+    className?: string;
+    children?: any;
+}): react.DetailedReactHTMLElement<{
+    className: string;
+}, HTMLElement>;
+declare function Breadcrumbs(props: {
+    className?: string;
+    children?: any;
+}): react.DetailedReactHTMLElement<{
+    className: string;
+}, HTMLElement>;
+declare function Image(props: {
+    src?: string;
+    path?: string;
+    alt?: string;
+    className?: string;
+    style?: any;
+}): react.DetailedReactHTMLElement<{
+    src: string;
+    alt: string;
+    className: string;
+    style: any;
+}, HTMLElement>;
+declare function Video(props: {
+    src?: string;
+    path?: string;
+    className?: string;
+}): react.DetailedReactHTMLElement<{
+    src: string;
+    controls: boolean;
+    className: string;
+}, HTMLElement>;
+declare function FilePreview(props: {
+    className?: string;
+    children?: any;
+}): react.DetailedReactHTMLElement<{
+    className: string;
+}, HTMLElement>;
+
+export { Badge, Breadcrumbs, Button, Card, DataView, Detail, Empty, FilePreview, Form, Grid, Image, Link, Page, Router, Sidebar, Spinner, Stack, Table, Tabs, Video };