fvn-ui 0.1.0-alpha.1

package/src/fvn-ui/helpers.js

@@ -0,0 +1,29 @@
+export const merge = (target, ...sources) => {
+  for (const source of sources) {
+    for (const [key, val] of Object.entries(source)) {
+      const existing = target[key];
+
+      // Special handling for 'class' - always merge, never replace
+      if (key === 'class') {
+        target.class = [existing, val];
+        continue;
+      }
+
+      // Merge arrays
+      if (Array.isArray(existing) && Array.isArray(val)) {
+        existing.push(...val);
+        continue;
+      }
+
+      // Deep merge objects
+      if (existing && typeof existing === 'object' && !Array.isArray(existing)
+          && val && typeof val === 'object' && !Array.isArray(val)) {
+        merge(existing, val);
+        continue;
+      }
+
+      target[key] = val;
+    }
+  }
+  return target;
+};

package/src/fvn-ui/index.js

@@ -0,0 +1,53 @@
+/**
+ * fvn-ui — Minimalist vanilla JS component library
+ * Requires a bundler that handles CSS imports (Vite, Webpack, etc.)
+ * @see ./LLM.md for usage reference
+ */
+import './style.css'
+
+export { dom, colors, el, row, col, layout } from './dom.js'
+export { template, processTemplates, autoProcess } from './template.js'
+
+export {
+  avatar,
+  button,
+  buttonGroup,
+  card,
+  checkbox,
+  collapsible,
+  confirm,
+  dashboard,
+  dialog,
+  image,
+  input,
+  modal,
+  radio,
+  selectComponent,
+  svg,
+  switchComponent,
+  tabs,
+  toggle,
+  tooltip,
+
+  // Text primitives
+  text,
+  title,
+  description,
+  header
+} from './components/index.js'
+
+// Namespaced export for cleaner DX: ui.button(), ui.switch(), etc.
+import * as components from './components/index.js'
+import { layout } from './dom.js'
+export const ui = {
+  ...components,
+  select: components.selectComponent,
+  switch: components.switchComponent,
+  layout
+};
+
+document.body.classList.add('fvn-ui');
+
+if (matchMedia('(prefers-color-scheme: dark)').matches) {
+  document.documentElement.classList.add('dark');
+}

package/src/fvn-ui/style.css

@@ -0,0 +1,432 @@
+/* ---- Font ---- */
+@import url('https://rsms.me/inter/inter.css');
+
+/* Inter font feature settings for crispness */
+:root {
+  font-feature-settings: 'liga' 1, 'calt' 1; /* Enable ligatures and contextual alternates */
+}
+@supports (font-variation-settings: normal) {
+  :root { font-family: 'Inter var', sans-serif; }
+}
+
+/* ---- Tokens ---- */
+:root {
+  --core: 15px;
+  --icon-size-default: calc(1.2 * var(--core));
+  --radius: calc(var(--core) * .375);
+
+  /* Spacing scale */
+  --space-1: calc(var(--core) * .25);
+  --space-2: calc(var(--core) * .5);
+  --space-3: calc(var(--core) * .75);
+  --space-4: calc(var(--core) * 1);
+  --space-5: calc(var(--core) * 1.5);
+  --space-6: calc(var(--core) * 1.75);
+  --space-7: calc(var(--core) * 2);
+  --space-8: calc(var(--core) * 3);
+  --space-9: calc(var(--core) * 4);
+  --space-10: calc(var(--core) * 5);
+  --space: calc(var(--core) * .85);
+  --padding: var(--space-8);
+
+  /* Presets */
+  --input-padding: calc(var(--space) * .75) var(--space);
+  --shadow-sm: 0 1px 2px rgba(0,0,0,.1);
+  --shadow-md: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
+
+  --core-transition: all .15s ease;
+
+  /* HSL Colors */
+  --hsl-white: 0 0% 100%;
+  --hsl-black: 256 15% 20%;
+  --hsl-back: 0 0% 100%;
+  --hsl-text: var(--hsl-black);
+  --hsl-muted: 256 15% 15%;
+  --hsl-hover: 240 3.45% 94.31%;
+  --hsl-border: var(--hsl-text);
+
+  /* Computed colors */
+  --back: hsl(var(--hsl-back));
+  --text: hsl(var(--hsl-text));
+  --muted: hsl(var(--hsl-muted) / .5);
+  
+  --border-opacity: .15;
+  --border-opacity-sub: .5;
+  --border: hsl(var(--hsl-border) / var(--border-opacity, 1));
+  --hover: hsl(var(--hsl-hover) / var(--hover-opacity, 1));
+  --hover-bright: hsl(var(--hsl-text) / .02);
+
+  --hsl-shade: 240 5.88% 96.67%;
+  --shade: hsl(var(--hsl-shade));
+
+  /* Semantic colors */
+  --hsl-green: 166 100% 37%;
+  --green: hsl(var(--hsl-green));
+  --green-text: hsl(var(--hsl-white));
+
+  --hsl-blue: 208 100% 50%;
+  --blue: hsl(var(--hsl-blue));
+  --blue-text: hsl(var(--hsl-white));
+
+  --hsl-primary: 256 91% 54%;
+  --primary: hsl(var(--hsl-primary));
+  --primary-text: hsl(var(--hsl-white));
+
+  --hsl-pink: 314 100% 47%;
+  --pink: hsl(var(--hsl-pink));
+  --pink-text: hsl(var(--hsl-white));
+
+  --hsl-red: 332 100% 50%;
+  --red: hsl(var(--hsl-red));
+  --red-text: hsl(var(--hsl-white));
+
+  --hsl-orange: 40 100% 62%;
+  --orange: hsl(var(--hsl-orange));
+  --orange-text: hsl(var(--hsl-black));
+
+  --hsl-yellow: 60 92% 71%;
+  --yellow: hsl(var(--hsl-yellow));
+  --yellow-text: hsl(var(--hsl-black));
+
+  --dark-hsl-black: 222 20% 20%;
+  --dark-hsl-white: 0 0% 90%;
+  --dark-hsl-back: 222 20% 20%;
+  --dark-hsl-text: 0 0% 90%;
+  --dark-hsl-muted: 0 0% 95%;
+  --dark-hsl-primary: 256 91% 70%;
+  --dark-hsl-red: 332 100% 60%;
+  --dark-hsl-shade: 222 20% 24%;
+  --dark-hover: hsl(221.05 14.29% 26.08%);
+  --dark-hover-bright: hsl(var(--hsl-white) / .02);
+  --dark-shade: hsl(var(--dark-hsl-shade));
+  --dark-border-opacity: .15;
+  --dark-shadow-sm: 0 1px 2px rgba(0,0,0,.3);
+  --dark-shadow-md: 0 10px 25px rgba(0,0,0,.4);  
+
+  --shade-mix: black;
+}
+
+/* ---- Dark Mode ---- */
+.dark {
+  --hsl-black: var(--dark-hsl-black);
+  --hsl-white: var(--dark-hsl-white);
+  --hsl-back: var(--dark-hsl-back);
+  --hsl-text: var(--dark-hsl-text);
+  --hsl-muted: var(--dark-hsl-muted);
+  --hsl-primary: var(--dark-hsl-primary);
+  --hsl-red: var(--dark-hsl-red);
+  --hover: var(--dark-hover);
+  --hover-bright: var(--dark-hover-bright);
+  --hsl-shade: var(--dark-hsl-shade);
+  --shade: var(--dark-shade);
+  --border-opacity: var(--dark-border-opacity);
+  --shadow-sm: var(--dark-shadow-sm);
+  --shadow-md: var(--dark-shadow-md);
+
+  --shade-mix: white;
+}
+
+/* ---- Reset ---- */
+* { 
+  box-sizing: border-box;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+svg {
+  shape-rendering: geometricPrecision;
+}
+button, input, select, textarea { 
+  font: inherit; 
+  font-weight: 400;
+  font-size: calc(.9 * var(--core));
+}
+
+body.fvn-ui {
+  margin: 0;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  background: var(--back);
+  color: var(--text);
+  padding: var(--padding);
+  text-rendering: optimizeLegibility;
+  font-optical-sizing: auto;
+  font-weight: 400;
+  font-size: var(--core);
+
+  &.shaded {
+    --shade: color-mix(in hsl, hsl(var(--hsl-shade)), var(--shade-mix) 3%);
+    --shade-back: hsl(var(--hsl-shade));
+    background: var(--shade-back);
+
+    & .ui-border:not(.ui-card *) {
+      border-color: transparent;
+    }
+    & .ui-card {
+      border-color: transparent;
+      box-shadow: none;
+
+      & .ui-card {
+        border-color: var(--border);
+        box-shadow: var(--shadow-sm);
+      }
+    }
+  }
+
+  /* ---- stray ---- */
+
+  & b {
+    font-weight: 500;
+  }
+
+  & a {
+    color: var(--primary);
+    text-decoration: underline;
+  }  
+
+  & .ui-hidden {
+    display: none;
+  }
+}
+
+/* ---- Utilities ---- */
+/* :root wrapper for specificity boost */
+:root {
+  & .flex { display: flex; flex-wrap: wrap; }
+  & .nowrap { flex-wrap: nowrap; }
+  & .flex-1 { flex: 1; }
+  & .flex-0 { flex: 0; }
+  & .flex-col { flex-direction: column; }
+
+  & .align-start { align-items: flex-start; }
+  & .align-center { align-items: center; }
+  & .align-end { align-items: flex-end; }
+  & .align-stretch { align-items: stretch; }
+
+  & .justify-start { justify-content: flex-start; }
+  & .justify-center { justify-content: center; }
+  & .justify-end { justify-content: flex-end; }
+  & .justify-between { justify-content: space-between; }
+  & .justify-around { justify-content: space-around; }
+  & .justify-evenly { justify-content: space-evenly; }
+
+  & .w-full { width: 100%; }
+  & .h-full { height: 100%; }
+  & .min-h-screen { min-height: calc(100vh - (2 * var(--space))); }
+
+  & .round { border-radius: var(--radius); }
+  
+  & .shade { background: var(--shade); padding: var(--padding); }
+  & .border { border: 1px solid var(--border); padding: var(--padding); }
+
+  & .border-bottom { border-bottom: 1px solid var(--border); padding-bottom: var(--space); }
+  & .border-top { border-top: 1px solid var(--border); padding-top: var(--space); }
+
+  /* Gap utilities */
+  & .gap { gap: var(--space); }
+  & .gap-0 { gap: 0; }
+  & .gap-1 { gap: var(--space-1); }
+  & .gap-2 { gap: var(--space-2); }
+  & .gap-3 { gap: var(--space-3); }
+  & .gap-4 { gap: var(--space-4); }
+  & .gap-5 { gap: var(--space-5); }
+  & .gap-6 { gap: var(--space-6); }
+  & .gap-7 { gap: var(--space-7); }
+  & .gap-8 { gap: var(--space-8); }
+  & .gap-9 { gap: var(--space-9); }
+  & .gap-10 { gap: var(--space-10); }
+
+  /* Padding utilities */
+  & .pad { padding: var(--padding); }
+  & .pad-1 { padding: var(--space-1); }
+  & .pad-2 { padding: var(--space-2); }
+  & .pad-3 { padding: var(--space-3); }
+  & .pad-4 { padding: var(--space-4); }
+  & .pad-5 { padding: var(--space-5); }
+  & .pad-6 { padding: var(--space-6); }
+  & .pad-7 { padding: var(--space-7); }
+  & .pad-8 { padding: var(--space-8); }
+  & .pad-9 { padding: var(--space-9); }
+  & .pad-10 { padding: var(--space-10); }
+
+  & .inline { padding-inline: var(--space); }
+  & .inline-1 { padding-inline: var(--space-1); }
+  & .inline-2 { padding-inline: var(--space-2); }
+  & .inline-3 { padding-inline: var(--space-3); }
+  & .inline-4 { padding-inline: var(--space-4); }
+  & .inline-5 { padding-inline: var(--space-5); }
+  & .inline-6 { padding-inline: var(--space-6); }
+  & .inline-7 { padding-inline: var(--space-7); }
+  & .inline-8 { padding-inline: var(--space-8); }
+  & .inline-9 { padding-inline: var(--space-9); }
+  & .inline-10 { padding-inline: var(--space-10); }
+
+  & .block { padding-block: var(--space); }
+  & .block-1 { padding-block: var(--space-1); }
+  & .block-2 { padding-block: var(--space-2); }
+  & .block-3 { padding-block: var(--space-3); }
+  & .block-4 { padding-block: var(--space-4); }
+  & .block-5 { padding-block: var(--space-5); }
+  & .block-6 { padding-block: var(--space-6); }
+  & .block-7 { padding-block: var(--space-7); }
+  & .block-8 { padding-block: var(--space-8); }
+  & .block-9 { padding-block: var(--space-9); }
+  & .block-10 { padding-block: var(--space-10); }
+
+  /* Text utilities */
+  & .small, & small { font-size: .9em; line-height: 1.25em; }
+  & .muted { color: var(--muted); }
+
+  /* Margin utilities */
+  & .ma { margin: auto; }
+  & .mt-2 { margin-top: var(--space-2); }
+  & .mt-4 { margin-top: var(--space-4); }
+
+  /* Border utilities */
+  & .bt { border-top: 1px solid var(--border); }
+  & .bb { border-bottom: 1px solid var(--border); }
+  & .bl { border-left: 1px solid var(--border); }
+  & .br { border-right: 1px solid var(--border); }
+}
+
+/* ---- Focus Ring ---- */
+.ui-btn:focus-visible,
+.ui-input:focus-visible,
+.ui-select:focus-visible,
+.ui-select__trigger:focus-visible,
+.ui-select__item:focus-visible,
+.ui-switch__button:focus-visible,
+.ui-tabs__tab:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-sm);
+}
+
+/* :root wrapper for specificity boost over component defaults */
+:root {
+  & .ui-inverted {
+    --back: hsl(var(--hsl-text));
+    --text: hsl(var(--hsl-back));
+    --muted: hsl(var(--hsl-back) / .5);
+    --border: hsl(var(--hsl-text) / var(--border-opacity, .2));
+    --hover: hsl(var(--hsl-text) / var(--hover-opacity, .08));
+  }
+    
+  & [data-ui-col="none"] {
+    --bg: var(--text);
+    --fg: var(--back);
+  }  
+  & [data-ui-col="default"] {
+    --bg: var(--text);
+    --fg: var(--back);
+  }
+  & [data-ui-col="primary"] {
+    --bg: var(--primary);
+    --fg: var(--primary-text, var(--back));
+  }
+  & [data-ui-col="secondary"] {
+    --bg: var(--hover);
+  }
+  & [data-ui-col="red"] {
+    --bg: var(--red);
+    --fg: var(--red-text, var(--back));
+  }
+  & [data-ui-col="green"] {
+    --bg: var(--green);
+    --fg: var(--green-text, var(--back));
+  }
+  & [data-ui-col="yellow"] {
+    --bg: var(--yellow);
+    --fg: var(--yellow-text, var(--front));
+  }
+  & [data-ui-col="orange"] {
+    --bg: var(--orange);
+    --fg: var(--orange-text, var(--front));
+  }
+  & [data-ui-col="blue"] {
+    --bg: var(--blue);
+    --fg: var(--blue-text, var(--back));
+  }
+  & [data-ui-col="pink"] {
+    --bg: var(--pink);
+    --fg: var(--pink-text, var(--back));
+  }
+
+  & [data-ui-col="sub-none"] {
+    --fg: var(--text);
+  }
+  & [data-ui-col="sub-default"] {
+    --hover: var(--text);
+    --fg: var(--text);
+  }
+  & [data-ui-col="sub-primary"] {
+    --hover: var(--primary);
+    --fg: var(--primary);
+    --border: hsl(var(--hsl-primary) / var(--border-opacity-sub, 1));
+  }
+  & [data-ui-col="sub-red"] {
+    --hover: var(--red);
+    --fg: var(--red);
+    --border: hsl(var(--hsl-red) / var(--border-opacity-sub, 1));
+  }
+  & [data-ui-col="sub-green"] {
+    --hover: var(--green);
+    --fg: var(--green);
+    --border: hsl(var(--hsl-green) / var(--border-opacity-sub, 1));
+  }
+  & [data-ui-col="sub-yellow"] {
+    --hover: var(--yellow);
+    --fg: var(--text);
+    --inverted: var(--yellow-text);
+    --border: hsl(var(--hsl-yellow) / var(--border-opacity-sub, 1));
+  }
+  & [data-ui-col="sub-orange"] {
+    --hover: var(--orange);
+    --fg: var(--text);
+    --inverted: var(--orange-text);
+    --border: hsl(var(--hsl-orange) / var(--border-opacity-sub, 1));
+  }
+  & [data-ui-col="sub-blue"] {
+    --hover: var(--blue);
+    --fg: var(--blue);
+    --border: hsl(var(--hsl-blue) / var(--border-opacity-sub, 1));
+  }
+  & [data-ui-col="sub-pink"] {
+    --hover: var(--pink);
+    --fg: var(--pink);
+    --border: hsl(var(--hsl-pink) / var(--border-opacity-sub, 1));
+  }
+
+  /* ---- Size Mods ---- */
+  & .ui-size--small {
+    --input-padding: calc(var(--space-3) * .75) var(--space-3);
+  }
+  & .ui-size--medium {
+    --input-padding: calc(var(--space-4) * .75) var(--space-4);
+  }
+  & .ui-size--large {
+    --input-padding: calc(var(--space-6) * .75) var(--space-6);
+  }
+
+  & .ui-ratio--square {
+    --input-padding: calc(var(--space) * .75);
+    aspect-ratio: 1;
+  }
+
+  & .ui-ratio--square.ui-size--medium {
+    --input-padding: calc(var(--space-4) * .75);
+    --icon-size: calc(1.25 * var(--input-padding));
+    --stroke-width: 1.25;
+  }  
+
+  & .ui-ratio--square.ui-size--large {
+    --input-padding: calc(var(--space-6) * .75);
+    --icon-size: calc(1.5 * var(--input-padding));
+    --stroke-width: 1;
+  }    
+}
+
+/* ---- Fade-in for template processing ---- */
+.ui-fadein {
+  transition: opacity .2s ease;
+}
+.ui-pending {
+  opacity: 0;
+}

package/src/fvn-ui/template.js

@@ -0,0 +1,135 @@
+import { layout } from './dom.js'
+import { 
+  avatar, button, card, checkbox, collapsible, confirm, 
+  dialog, image, input, label, radio, selectComponent, 
+  switchComponent, tabs 
+} from './components/index.js'
+
+// Component registry
+const COMPONENTS = {
+  'ui-row': (props, children) => layout.row(children, props),
+  'ui-col': (props, children) => layout.col(children, props),
+  'ui-avatar': (props) => avatar(props),
+  'ui-button': (props) => button(props),
+  'ui-card': (props, children) => card({ ...props, content: children }),
+  'ui-checkbox': (props) => checkbox(props),
+  'ui-collapsible': (props, children) => collapsible({ ...props, content: children }),
+  'ui-confirm': (props) => confirm(props),
+  'ui-dialog': (props, children) => dialog({ ...props, content: children }),
+  'ui-image': (props) => image(props),
+  'ui-input': (props) => input(props),
+  'ui-label': (props) => label(props),
+  'ui-radio': (props) => radio(props),
+  'ui-select': (props) => selectComponent(props),
+  'ui-switch': (props) => switchComponent(props),
+  'ui-tabs': (props) => tabs(props),
+};
+
+const TAGS = Object.keys(COMPONENTS).join(', ');
+
+// Parse attribute value (handles booleans, numbers, JSON)
+const parseValue = (val) => {
+  if (val === '' || val === 'true') return true;
+  if (val === 'false') return false;
+  if (!isNaN(val) && val !== '') return Number(val);
+  if (val.startsWith('{') || val.startsWith('[')) {
+    try { return JSON.parse(val); } catch { return val; }
+  }
+  return val;
+};
+
+// Extract props from element attributes
+const getProps = (el) => {
+  const props = {};
+  for (const attr of el.attributes) {
+    const name = attr.name.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+    props[name] = parseValue(attr.value);
+  }
+  return props;
+};
+
+// Process a single element recursively
+const processElement = (el) => {
+  const tag = el.tagName.toLowerCase();
+  const factory = COMPONENTS[tag];
+  
+  if (!factory) {
+    for (const child of [...el.children]) {
+      const result = processElement(child);
+      if (result && result !== child) child.replaceWith(result);
+    }
+    return el;
+  }
+
+  // Process children first (depth-first)
+  const children = [];
+  for (const child of [...el.childNodes]) {
+    if (child.nodeType === Node.ELEMENT_NODE) {
+      const processed = processElement(child);
+      if (processed) children.push(processed);
+    } else if (child.nodeType === Node.TEXT_NODE && child.textContent.trim()) {
+      children.push(document.createTextNode(child.textContent));
+    }
+  }
+
+  return factory(getProps(el), children);
+};
+
+/**
+ * Process all ui-* elements within a container
+ */
+export const processTemplates = (container = document.body) => {
+  const topLevel = [...container.querySelectorAll(TAGS)]
+    .filter(el => !el.parentElement.closest(TAGS));
+
+  const processed = [];
+  for (const el of topLevel) {
+    const result = processElement(el);
+    if (result && result !== el) {
+      result.classList.add('ui-pending', 'ui-fadein');
+      el.replaceWith(result);
+      processed.push(result);
+    }
+  }
+
+  // Trigger fade-in after paint
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      for (const el of processed) el.classList.remove('ui-pending');
+    });
+  });
+};
+
+/**
+ * Tagged template literal for inline template creation
+ * @example
+ * const ui = template`<ui-row gap="2"><ui-button text="Hello"></ui-button></ui-row>`;
+ * document.body.appendChild(ui);
+ */
+export const template = (strings, ...values) => {
+  const html = strings.reduce((acc, str, i) => acc + str + (values[i] ?? ''), '');
+  const temp = document.createElement('div');
+  temp.innerHTML = html.trim();
+  
+  for (const child of [...temp.children]) {
+    const result = processElement(child);
+    if (result && result !== child) child.replaceWith(result);
+  }
+  
+  if (temp.children.length === 1) return temp.firstElementChild;
+  
+  const frag = document.createDocumentFragment();
+  while (temp.firstChild) frag.appendChild(temp.firstChild);
+  return frag;
+};
+
+/**
+ * Auto-process on DOMContentLoaded
+ */
+export const autoProcess = () => {
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', () => processTemplates());
+  } else {
+    processTemplates();
+  }
+};

package/src/fvn-ui/template.md

@@ -0,0 +1,26 @@
+```html
+<body>
+  <ui-row gap="2" align="center">
+    <ui-button text="Click me" variant="primary"></ui-button>
+    <ui-switch label="Dark mode"></ui-switch>
+  </ui-row>
+</body>
+```
+```js
+import { autoProcess } from './fvn-ui'
+autoProcess()
+```
+
+---
+
+```js
+import { template } from './fvn-ui'
+
+const ui = template`
+  <ui-row gap="2">
+    <ui-button text="Save" variant="primary"></ui-button>
+    <ui-button text="Cancel" variant="ghost"></ui-button>
+  </ui-row>
+`
+document.body.appendChild(ui)
+```