@neuralumina/lumina-ui 0.1.1

package/lumina-ui/widgets/text.js

@@ -0,0 +1,121 @@
+import { isVNode, luminaTheme } from "./utils.js";
+
+export function Text(content = "", props = {}) {
+  const {
+    size,
+    weight,
+    align,
+    color,
+    lineHeight,
+    maxLines,
+    as,
+    style: userStyle,
+    ...rest
+  } = props;
+
+  const fontSize = typeof size === "number" ? `${size}px` : size || "14px";
+
+  const style = {
+    fontSize,
+    fontWeight: weight || "normal",
+    color: color || "inherit",
+    textAlign: align || "left",
+    margin: 0,
+    lineHeight: lineHeight || "1.5",
+    letterSpacing: "0",
+    WebkitFontSmoothing: "antialiased",
+    ...(userStyle || {}),
+  };
+
+  if (maxLines) {
+    style.display = "-webkit-box";
+    style.WebkitLineClamp = maxLines;
+    style.WebkitBoxOrient = "vertical";
+    style.overflow = "hidden";
+  }
+
+  const tag = as || "span";
+  const safeProps = { style, ...rest };
+
+  // Normalize content: preserve nodes if passed
+  const children = [];
+  const isNode = (value) => typeof Node !== "undefined" && value instanceof Node;
+
+  if (isNode(content) || isVNode(content)) children.push(content);
+  else if (Array.isArray(content))
+    content.forEach((c) =>
+      children.push(isNode(c) || isVNode(c) ? c : String(c ?? "")),
+    );
+  else children.push(String(content ?? ""));
+
+  return { tag, props: safeProps, children };
+}
+
+export function Heading(props = {}, children = []) {
+  const level = props.level ?? 1;
+  const sizes = { 1: 32, 2: 28, 3: 24, 4: 20, 5: 18, 6: 16 };
+  const content = Array.isArray(children) ? children : [children];
+  return Text(content, {
+    size: sizes[level] ?? 16,
+    weight: "bold",
+    as: `h${level}`,
+    ...props,
+  });
+}
+
+export function Caption(props = {}, children = []) {
+  const content = Array.isArray(children) ? children : [children];
+  return Text(content, { size: 12, color: luminaTheme.colors.muted, ...props });
+}
+
+export function DefaultTextStyle(props = {}, children = []) {
+  const content = Array.isArray(children) ? children : [children];
+  const {
+    size,
+    weight,
+    color,
+    align,
+    lineHeight,
+    style = {},
+    ...rest
+  } = props;
+
+  return {
+    tag: "div",
+    props: {
+      ...rest,
+      style: {
+        fontSize: typeof size === "number" ? `${size}px` : size,
+        fontWeight: weight,
+        color,
+        textAlign: align,
+        lineHeight,
+        ...style,
+      },
+    },
+    children: content,
+    key: props.key,
+  };
+}
+
+export function RichText({ spans = [], as = "span", style = {}, ...props } = {}) {
+  return {
+    tag: as,
+    props: {
+      ...props,
+      style,
+    },
+    children: spans.map((span, index) => ({
+      tag: span.as || "span",
+      props: {
+        key: span.key ?? index,
+        style: span.style || {},
+      },
+      children: Array.isArray(span.children)
+        ? span.children
+        : [span.text ?? ""],
+      key: span.key ?? index,
+    })),
+    key: props.key,
+  };
+}

package/lumina-ui/widgets/utils.js

@@ -0,0 +1,221 @@
+export function isDomNode(value) {
+  return typeof Node !== "undefined" && value instanceof Node;
+}
+
+export const luminaTheme = {
+  colors: {
+    primary: "#2563eb",
+    primaryDark: "#1d4ed8",
+    primarySoft: "rgba(37, 99, 235, 0.12)",
+    danger: "#dc2626",
+    dangerDark: "#b91c1c",
+    dangerSoft: "rgba(220, 38, 38, 0.12)",
+    surface: "#ffffff",
+    surfaceMuted: "#f8fafc",
+    surfaceRaised: "#ffffff",
+    text: "#111827",
+    muted: "#64748b",
+    border: "#e5e7eb",
+    borderStrong: "#cbd5e1",
+    track: "#e2e8f0",
+    shadow: "rgba(15, 23, 42, 0.12)",
+    overlay: "rgba(15, 23, 42, 0.58)",
+    focus: "rgba(37, 99, 235, 0.18)",
+  },
+  radius: {
+    sm: "6px",
+    md: "8px",
+    lg: "12px",
+    xl: "16px",
+    pill: "999px",
+  },
+  shadow: {
+    xs: "0 1px 2px rgba(15, 23, 42, 0.06)",
+    sm: "0 8px 22px rgba(15, 23, 42, 0.08)",
+    md: "0 18px 44px rgba(15, 23, 42, 0.14)",
+    lg: "0 24px 70px rgba(15, 23, 42, 0.24)",
+  },
+  transition: "160ms ease",
+};
+
+export function isVNode(value) {
+  return value && typeof value === "object" && typeof value.tag === "string";
+}
+
+export function isRenderable(value) {
+  return (
+    value === null ||
+    value === undefined ||
+    Array.isArray(value) ||
+    isDomNode(value) ||
+    isVNode(value) ||
+    typeof value === "string" ||
+    typeof value === "number" ||
+    typeof value === "boolean" ||
+    typeof value === "function"
+  );
+}
+
+export function childrenOf(children) {
+  if (children === null || children === undefined) return [];
+  return Array.isArray(children) ? children : [children];
+}
+
+export function normalizeWidgetArgs(
+  propsOrChildren = {},
+  maybeChildren = undefined,
+) {
+  if (isRenderable(propsOrChildren)) {
+    return [{}, childrenOf(propsOrChildren)];
+  }
+
+  const props = propsOrChildren || {};
+  const propChildren = props.child !== undefined ? props.child : props.children;
+  const children =
+    propChildren !== undefined && maybeChildren === undefined
+      ? propChildren
+      : maybeChildren;
+
+  return [props, childrenOf(children)];
+}
+
+export function px(value, fallback = undefined) {
+  if (value === undefined || value === null) return fallback;
+  return typeof value === "number" ? `${value}px` : value;
+}
+
+export function edgeInsets(value, fallback = undefined) {
+  if (value === undefined || value === null) return fallback;
+  if (typeof value === "number" || typeof value === "string") return px(value);
+
+  const all = value.all;
+  const vertical = value.vertical ?? all ?? 0;
+  const horizontal = value.horizontal ?? all ?? 0;
+
+  return [
+    px(value.top ?? vertical),
+    px(value.right ?? horizontal),
+    px(value.bottom ?? vertical),
+    px(value.left ?? horizontal),
+  ].join(" ");
+}
+
+export function flexMainAlignment(value, fallback = "flex-start") {
+  const map = {
+    start: "flex-start",
+    end: "flex-end",
+    center: "center",
+    spaceBetween: "space-between",
+    "space-between": "space-between",
+    spaceAround: "space-around",
+    "space-around": "space-around",
+    spaceEvenly: "space-evenly",
+    "space-evenly": "space-evenly",
+  };
+
+  return map[value] || value || fallback;
+}
+
+export function flexCrossAlignment(value, fallback = "stretch") {
+  const map = {
+    start: "flex-start",
+    end: "flex-end",
+    center: "center",
+    stretch: "stretch",
+    baseline: "baseline",
+  };
+
+  return map[value] || value || fallback;
+}
+
+export function alignmentStyle(alignment = "center") {
+  const map = {
+    center: ["center", "center"],
+    topCenter: ["center", "flex-start"],
+    bottomCenter: ["center", "flex-end"],
+    centerLeft: ["flex-start", "center"],
+    centerRight: ["flex-end", "center"],
+    topLeft: ["flex-start", "flex-start"],
+    topRight: ["flex-end", "flex-start"],
+    bottomLeft: ["flex-start", "flex-end"],
+    bottomRight: ["flex-end", "flex-end"],
+    start: ["flex-start", "center"],
+    end: ["flex-end", "center"],
+  };
+
+  const [justifyContent, alignItems] = map[alignment] || map.center;
+  return { justifyContent, alignItems };
+}
+
+export function decorationStyle(decoration = {}) {
+  if (!decoration || typeof decoration !== "object") return {};
+
+  return {
+    backgroundColor: decoration.color,
+    border: decoration.border,
+    borderRadius: px(decoration.borderRadius),
+    boxShadow: decoration.boxShadow,
+    backgroundImage: decoration.gradient,
+  };
+}
+
+export function cleanStyle(style) {
+  return Object.fromEntries(
+    Object.entries(style || {}).filter(([, value]) => value !== undefined),
+  );
+}
+
+export function fieldStyle(style = {}) {
+  return cleanStyle({
+    width: "100%",
+    minHeight: "38px",
+    padding: "9px 12px",
+    borderRadius: luminaTheme.radius.md,
+    border: `1px solid ${luminaTheme.colors.borderStrong}`,
+    backgroundColor: luminaTheme.colors.surface,
+    color: luminaTheme.colors.text,
+    font: "inherit",
+    fontSize: "14px",
+    outline: "none",
+    transition: `border-color ${luminaTheme.transition}, box-shadow ${luminaTheme.transition}, background-color ${luminaTheme.transition}`,
+    boxShadow: "0 1px 1px rgba(15, 23, 42, 0.03)",
+    ...style,
+  });
+}
+
+export function applyFieldFocus(event, style = {}) {
+  event.target.style.borderColor =
+    style.borderColor || luminaTheme.colors.primary;
+  event.target.style.boxShadow =
+    style.boxShadow || `0 0 0 3px ${luminaTheme.colors.focus}`;
+}
+
+export function clearFieldFocus(event, style = {}) {
+  event.target.style.borderColor =
+    style.borderColor || luminaTheme.colors.borderStrong;
+  event.target.style.boxShadow =
+    style.boxShadow || "0 1px 1px rgba(15, 23, 42, 0.03)";
+}
+
+export function omitProps(props = {}, omitted = []) {
+  const omittedSet = new Set(["child", "children", "style", "key", ...omitted]);
+  return Object.fromEntries(
+    Object.entries(props).filter(([key]) => !omittedSet.has(key)),
+  );
+}
+
+export function ensureGlobalStyle(id, css) {
+  if (
+    typeof document === "undefined" ||
+    !document.head ||
+    typeof document.getElementById !== "function" ||
+    document.getElementById(id)
+  ) {
+    return;
+  }
+
+  const style = document.createElement("style");
+  style.id = id;
+  style.textContent = css;
+  document.head.appendChild(style);
+}

package/lumina-ui.js

@@ -0,0 +1,154 @@
+export { mount } from "./lumina-ui/core/renderer.js";
+export {
+  createState as useState,
+  useEffect,
+  createStore,
+} from "./lumina-ui/core/state.js";
+export {
+  createElement,
+  Fragment,
+  applyStyles,
+  addClasses,
+} from "./lumina-ui/core/element.js";
+export { luminaTheme } from "./lumina-ui/widgets/utils.js";
+
+export {
+  Column,
+  Row,
+  Container,
+  Center,
+  Align,
+  Expanded,
+  Flexible,
+  Padding,
+  SizedBox,
+  Spacer,
+  Wrap,
+  Stack,
+  Positioned,
+  Divider,
+  Card,
+  AspectRatio,
+  Baseline,
+  ConstrainedBox,
+  DecoratedBox,
+  FractionallySizedBox,
+  LayoutBuilder,
+  LimitedBox,
+  Offstage,
+  OverflowBox,
+  RotatedBox,
+  SizedOverflowBox,
+  Transform,
+} from "./lumina-ui/widgets/layout.js";
+export {
+  Button,
+  Input,
+  TextField,
+  Checkbox,
+  Switch,
+} from "./lumina-ui/widgets/controls.js";
+export {
+  Badge,
+  CircleAvatar,
+  ClipRRect,
+  Icon,
+  Image,
+  Placeholder,
+  ClipOval,
+  ClipPath,
+  ClipRect,
+  FittedBox,
+  Opacity,
+  PhysicalModel,
+  ShaderMask,
+} from "./lumina-ui/widgets/display.js";
+export {
+  CustomScrollView,
+  GridView,
+  ListView,
+  NestedScrollView,
+  PageView,
+  SingleChildScrollView,
+  SliverAppBar,
+  SliverGrid,
+  SliverList,
+  SliverPadding,
+  SliverToBoxAdapter,
+} from "./lumina-ui/widgets/scrolling.js";
+export {
+  AlertDialog,
+  CircularProgressIndicator,
+  Dialog,
+  LinearProgressIndicator,
+  ModalBarrier,
+  SnackBar,
+  Tooltip,
+} from "./lumina-ui/widgets/feedback.js";
+export {
+  Dropdown,
+  Form,
+  FormField,
+  Radio,
+  RadioGroup,
+  Slider,
+  TextArea,
+} from "./lumina-ui/widgets/forms.js";
+export {
+  AppBar,
+  BottomNavigationBar,
+  Drawer,
+  NavigationRail,
+  Scaffold,
+  TabBar,
+  TabBarView,
+} from "./lumina-ui/widgets/navigation.js";
+export {
+  AnimatedContainer,
+  AnimatedOpacity,
+  AnimatedScale,
+  AnimatedSlide,
+  AnimatedSwitcher,
+} from "./lumina-ui/widgets/animation.js";
+export {
+  Text,
+  Heading,
+  Caption,
+  DefaultTextStyle,
+  RichText,
+} from "./lumina-ui/widgets/text.js";
+export {
+  Semantics,
+  ExcludeSemantics,
+} from "./lumina-ui/widgets/accessibility.js";
+export {
+  AbsorbPointer,
+  Dismissible,
+  Draggable,
+  DragTarget,
+  GestureDetector,
+  IgnorePointer,
+} from "./lumina-ui/widgets/interaction.js";
+
+/*
+export default {
+  mount,
+  useState: createState,
+  useEffect,
+  createStore,
+  Column,
+  Row,
+  Container,
+  Center,
+  Expanded,
+  Padding,
+  Button,
+  Input,
+  Checkbox,
+  Switch,
+  Text,
+  Heading,
+  Caption,
+  App,
+};
+*/

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@neuralumina/lumina-ui",
+  "version": "0.1.1",
+  "description": "A lightweight Flutter-inspired UI library for building web interfaces with plain JavaScript and the DOM.",
+  "type": "module",
+  "main": "./lumina-ui.js",
+  "module": "./lumina-ui.js",
+  "browser": "./lumina-ui.js",
+  "exports": {
+    ".": "./lumina-ui.js",
+    "./core/*": "./lumina-ui/core/*.js",
+    "./widgets/*": "./lumina-ui/widgets/*.js",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "lumina-ui.js",
+    "lumina-ui/core",
+    "lumina-ui/widgets",
+    "scripts",
+    "README.md",
+    "LICENSE"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "check": "find . -name '*.js' -not -path '*/.git/*' -not -path '*/node_modules/*' -print -exec node --check {} \\;",
+    "test": "npm run check && node scripts/smoke-test.mjs",
+    "pack:dry": "npm pack --dry-run"
+  },
+  "keywords": [
+    "ui",
+    "widgets",
+    "dom",
+    "vanilla-js",
+    "flutter-inspired"
+  ],
+  "author": "Neura Lumina",
+  "license": "MIT"
+}