@veluai/velu 0.1.13 → 0.1.14

package/runtime/velu-ui/primitives/Stack.jsx

@@ -1,63 +1,63 @@
-import React from 'react';
-
-/**
- * Stack — vertical rhythm primitive (Every Layout), React-native.
- *
- * Spacing is delegated to flex `gap`, set inline per instance. This is
- * leak-free and nesting-independent BY CONSTRUCTION: `gap` is resolved on the
- * container element itself, never inherited by or computed on children — so a
- * nested Stack's spacing cannot bleed into the gap its parent puts around it.
- *
- * `space` is any CSS length (defaulting to the --s1 modular-scale token).
- *
- * NOTE: `recursive` (rhythm at *every* nesting depth) is intentionally not
- * supported here — `gap` only spaces direct children. That job belongs to a
- * future Prose/Flow primitive (Markdown iteration), not to Stack.
- *
- * @param {object} props
- * @param {React.ElementType} [props.as='div'] element/component to render as
- * @param {string} [props.space='var(--s1)'] gap between items (CSS length/token)
- * @param {number|null} [props.splitAfter=null] 1-based child index; everything
- *        after it is pushed to the bottom (margin-block-end:auto on that child)
- */
-const Stack = React.forwardRef(function Stack(
-  {
-    as: Tag = 'div',
-    space = 'var(--s1)',
-    splitAfter = null,
-    style,
-    children,
-    ...rest
-  },
-  ref
-) {
-  let kids = children;
-  if (splitAfter) {
-    kids = React.Children.map(children, (child, i) =>
-      i === splitAfter - 1 && React.isValidElement(child)
-        ? React.cloneElement(child, {
-            style: { ...child.props.style, marginBlockEnd: 'auto' },
-          })
-        : child
-    );
-  }
-
-  return (
-    <Tag
-      ref={ref}
-      style={{
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'flex-start',
-        gap: space,
-        ...(splitAfter ? { blockSize: '100%' } : null),
-        ...style,
-      }}
-      {...rest}
-    >
-      {kids}
-    </Tag>
-  );
-});
-
-export default Stack;
+import React from 'react';
+
+/**
+ * Stack — vertical rhythm primitive (Every Layout), React-native.
+ *
+ * Spacing is delegated to flex `gap`, set inline per instance. This is
+ * leak-free and nesting-independent BY CONSTRUCTION: `gap` is resolved on the
+ * container element itself, never inherited by or computed on children — so a
+ * nested Stack's spacing cannot bleed into the gap its parent puts around it.
+ *
+ * `space` is any CSS length (defaulting to the --s1 modular-scale token).
+ *
+ * NOTE: `recursive` (rhythm at *every* nesting depth) is intentionally not
+ * supported here — `gap` only spaces direct children. That job belongs to a
+ * future Prose/Flow primitive (Markdown iteration), not to Stack.
+ *
+ * @param {object} props
+ * @param {React.ElementType} [props.as='div'] element/component to render as
+ * @param {string} [props.space='var(--s1)'] gap between items (CSS length/token)
+ * @param {number|null} [props.splitAfter=null] 1-based child index; everything
+ *        after it is pushed to the bottom (margin-block-end:auto on that child)
+ */
+const Stack = React.forwardRef(function Stack(
+  {
+    as: Tag = 'div',
+    space = 'var(--s1)',
+    splitAfter = null,
+    style,
+    children,
+    ...rest
+  },
+  ref
+) {
+  let kids = children;
+  if (splitAfter) {
+    kids = React.Children.map(children, (child, i) =>
+      i === splitAfter - 1 && React.isValidElement(child)
+        ? React.cloneElement(child, {
+            style: { ...child.props.style, marginBlockEnd: 'auto' },
+          })
+        : child
+    );
+  }
+
+  return (
+    <Tag
+      ref={ref}
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'flex-start',
+        gap: space,
+        ...(splitAfter ? { blockSize: '100%' } : null),
+        ...style,
+      }}
+      {...rest}
+    >
+      {kids}
+    </Tag>
+  );
+});
+
+export default Stack;

package/runtime/velu-ui/primitives/Switcher.jsx

@@ -1,57 +1,57 @@
-import React from 'react';
-
-/**
- * Switcher — Every Layout primitive. Row ↔ column at a container-width point,
- * with NO media queries: flex-wrap + flex-basis: calc((threshold - 100%)*999).
- * All-or-nothing (never multi-row wrap).
- *
- * Two ways to set the flip point:
- *  - `threshold`: the container width at which it flips — the raw Every
- *    Layout knob (default --measure token).
- *  - `min`: a per-ITEM minimum width (more intuitive). The Switcher knows its
- *    child count, so it derives the container threshold as
- *        N * min + (N - 1) * space
- *    → the row collapses to a full vertical stack the instant any one item
- *    would fall below `min`. `min` takes precedence over `threshold`.
- *
- * Other props:
- *  - `space` gap between items (default --s1 token)
- *  - `limit` hard cap of items in a row; beyond it ALL items stack
- *  - `as`    element to render (semantics; default 'div')
- *
- * React-native + SSR-safe + tokenized (vs. the browser-only web component
- * which injects a runtime <style>). Needs its own CSS (styles `> *`).
- */
-export default function Switcher({
-  as: Tag = 'div',
-  space = 'var(--s1)',
-  threshold = 'var(--measure)',
-  min,
-  limit,
-  className = '',
-  style,
-  children,
-  ...rest
-}) {
-  const count = React.Children.count(children);
-  const flip =
-    min != null
-      ? `calc((${min} * ${count}) + (${space} * ${Math.max(0, count - 1)}))`
-      : threshold;
-  const exceeded = typeof limit === 'number' && count > limit;
-
-  return (
-    <Tag
-      className={`velu-switcher ${className}`.trim()}
-      data-limit-exceeded={exceeded ? '' : undefined}
-      style={{
-        '--switcher-space': space,
-        '--switcher-threshold': flip,
-        ...style,
-      }}
-      {...rest}
-    >
-      {children}
-    </Tag>
-  );
-}
+import React from 'react';
+
+/**
+ * Switcher — Every Layout primitive. Row ↔ column at a container-width point,
+ * with NO media queries: flex-wrap + flex-basis: calc((threshold - 100%)*999).
+ * All-or-nothing (never multi-row wrap).
+ *
+ * Two ways to set the flip point:
+ *  - `threshold`: the container width at which it flips — the raw Every
+ *    Layout knob (default --measure token).
+ *  - `min`: a per-ITEM minimum width (more intuitive). The Switcher knows its
+ *    child count, so it derives the container threshold as
+ *        N * min + (N - 1) * space
+ *    → the row collapses to a full vertical stack the instant any one item
+ *    would fall below `min`. `min` takes precedence over `threshold`.
+ *
+ * Other props:
+ *  - `space` gap between items (default --s1 token)
+ *  - `limit` hard cap of items in a row; beyond it ALL items stack
+ *  - `as`    element to render (semantics; default 'div')
+ *
+ * React-native + SSR-safe + tokenized (vs. the browser-only web component
+ * which injects a runtime <style>). Needs its own CSS (styles `> *`).
+ */
+export default function Switcher({
+  as: Tag = 'div',
+  space = 'var(--s1)',
+  threshold = 'var(--measure)',
+  min,
+  limit,
+  className = '',
+  style,
+  children,
+  ...rest
+}) {
+  const count = React.Children.count(children);
+  const flip =
+    min != null
+      ? `calc((${min} * ${count}) + (${space} * ${Math.max(0, count - 1)}))`
+      : threshold;
+  const exceeded = typeof limit === 'number' && count > limit;
+
+  return (
+    <Tag
+      className={`velu-switcher ${className}`.trim()}
+      data-limit-exceeded={exceeded ? '' : undefined}
+      style={{
+        '--switcher-space': space,
+        '--switcher-threshold': flip,
+        ...style,
+      }}
+      {...rest}
+    >
+      {children}
+    </Tag>
+  );
+}

package/runtime/velu-ui/primitives/stack.css

@@ -1,3 +1,3 @@
-/* DEPRECATED — unused. Stack is now self-contained (inline flex `gap`);
-   it needs no CSS. Safe to delete this file. Kept only because shell
-   deletes are disabled in this session. Not imported anywhere. */
+/* DEPRECATED — unused. Stack is now self-contained (inline flex `gap`);
+   it needs no CSS. Safe to delete this file. Kept only because shell
+   deletes are disabled in this session. Not imported anywhere. */

package/runtime/velu-ui/primitives/switcher.css

@@ -1,25 +1,25 @@
-/* Switcher — Every Layout. All values are tokens (passed via the
-   --switcher-* custom properties set inline by Switcher.jsx). Needs the
-   `> *` selector, so it has CSS unlike Stack. */
-
-.velu-switcher {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--switcher-space, var(--s1));
-}
-
-/* The trick: when the row's width drops below `threshold`, the negative
-   product flips flex-basis huge→huge-negative, forcing items onto their
-   own lines (vertical). No media query. */
-.velu-switcher > * {
-  flex-grow: 1;
-  flex-basis: calc(
-    (var(--switcher-threshold, var(--measure)) - 100%) * 999
-  );
-}
-
-/* `limit` exceeded: force every item full-width (always vertical). Set as a
-   static attribute from React's child count — no runtime :nth-last-child. */
-.velu-switcher[data-limit-exceeded] > * {
-  flex-basis: 100%;
-}
+/* Switcher — Every Layout. All values are tokens (passed via the
+   --switcher-* custom properties set inline by Switcher.jsx). Needs the
+   `> *` selector, so it has CSS unlike Stack. */
+
+.velu-switcher {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--switcher-space, var(--s1));
+}
+
+/* The trick: when the row's width drops below `threshold`, the negative
+   product flips flex-basis huge→huge-negative, forcing items onto their
+   own lines (vertical). No media query. */
+.velu-switcher > * {
+  flex-grow: 1;
+  flex-basis: calc(
+    (var(--switcher-threshold, var(--measure)) - 100%) * 999
+  );
+}
+
+/* `limit` exceeded: force every item full-width (always vertical). Set as a
+   static attribute from React's child count — no runtime :nth-last-child. */
+.velu-switcher[data-limit-exceeded] > * {
+  flex-basis: 100%;
+}

package/runtime/velu-ui/styles.css

@@ -1,43 +1,43 @@
-/* Aggregate stylesheet for velu-ui. Consumers import this once.
-
-   Tailwind v4 first (theme/preflight/utilities — all in @layer).
-   base.css is intentionally UNLAYERED, so it wins over Tailwind's
-   preflight `base` layer — our fluid type/measure beat Tailwind's reset
-   by cascade-layer precedence (unlayered > layered). */
-@import 'tailwindcss';
-
-/* Map Tailwind's `dark:` variant onto our [data-theme="dark"] attribute
-   (instead of Tailwind's default prefers-color-scheme). */
-@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
-
-/* Tailwind's auto source-detection is rooted at the Vite root (velu-cli)
-   and ignores node_modules — velu-ui is reached via a workspace symlink
-   there, so its component classes would NOT be scanned. This @source is
-   relative to THIS file (packages/velu-ui/src/styles.css); "." == the
-   velu-ui src tree, so Tailwind also scans velu-ui components. */
-@source ".";
-
-@import './base.css';
-@import './primitives/switcher.css';
-@import './components/sidebar.css';
-@import './components/nav-select.css';
-@import './components/accordion.css';
-@import './components/card.css';
-@import './components/image.css';
-@import './components/code-block.css';
-@import './components/field.css';
-@import './components/prompt.css';
-@import './components/steps.css';
-@import './components/tree.css';
-@import './components/api.css';
-@import './components/ask-bar.css';
-@import './components/chatbot.css';
-@import './components/page-feedback.css';
-@import './components/page-nav.css';
-@import './components/page-footer.css';
-@import './components/powered-by.css';
-@import './components/page-header.css';
-@import './components/theme-toggle.css';
-@import './components/docs-layout.css';
-@import './components/toc-bar.css';
-@import './components/search.css';
+/* Aggregate stylesheet for velu-ui. Consumers import this once.
+
+   Tailwind v4 first (theme/preflight/utilities — all in @layer).
+   base.css is intentionally UNLAYERED, so it wins over Tailwind's
+   preflight `base` layer — our fluid type/measure beat Tailwind's reset
+   by cascade-layer precedence (unlayered > layered). */
+@import 'tailwindcss';
+
+/* Map Tailwind's `dark:` variant onto our [data-theme="dark"] attribute
+   (instead of Tailwind's default prefers-color-scheme). */
+@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
+
+/* Tailwind's auto source-detection is rooted at the Vite root (velu-cli)
+   and ignores node_modules — velu-ui is reached via a workspace symlink
+   there, so its component classes would NOT be scanned. This @source is
+   relative to THIS file (packages/velu-ui/src/styles.css); "." == the
+   velu-ui src tree, so Tailwind also scans velu-ui components. */
+@source ".";
+
+@import './base.css';
+@import './primitives/switcher.css';
+@import './components/sidebar.css';
+@import './components/nav-select.css';
+@import './components/accordion.css';
+@import './components/card.css';
+@import './components/image.css';
+@import './components/code-block.css';
+@import './components/field.css';
+@import './components/prompt.css';
+@import './components/steps.css';
+@import './components/tree.css';
+@import './components/api.css';
+@import './components/ask-bar.css';
+@import './components/chatbot.css';
+@import './components/page-feedback.css';
+@import './components/page-nav.css';
+@import './components/page-footer.css';
+@import './components/powered-by.css';
+@import './components/page-header.css';
+@import './components/theme-toggle.css';
+@import './components/docs-layout.css';
+@import './components/toc-bar.css';
+@import './components/search.css';

package/runtime/velu-ui/tokens.css

@@ -1,4 +1,4 @@
-/* DEPRECATED — superseded by base.css (modular scale moved there, ratio
-   changed 1.5 → 1.25, --s-6 added, plus fonts/type/measure). Not imported
-   anywhere. Safe to delete; kept only because shell deletes are disabled
-   in this session. Do NOT re-import — two scale definitions = not DRY. */
+/* DEPRECATED — superseded by base.css (modular scale moved there, ratio
+   changed 1.5 → 1.25, --s-6 added, plus fonts/type/measure). Not imported
+   anywhere. Safe to delete; kept only because shell deletes are disabled
+   in this session. Do NOT re-import — two scale definitions = not DRY. */