@vamos-ui/react 0.3.0 → 0.4.1

package/dist/sortable/sortable.js

@@ -51,7 +51,7 @@ export const sortableLabels = {
     moveToHeading: "Move to list",
     dropHere: "Drop items here",
 };
-const SortableRootContext = React.createContext(null);
+const SortableRootContext = /*#__PURE__*/ React.createContext(null);
 function useSortableRoot(component) {
     const ctx = React.useContext(SortableRootContext);
     if (!ctx)
@@ -397,7 +397,7 @@ export function useSortableItem(id, options = {}) {
         label,
     };
 }
-const SortableItemContext = React.createContext(null);
+const SortableItemContext = /*#__PURE__*/ React.createContext(null);
 /** The current item (inside `SortableItem`). */
 export function useSortableItemContext() {
     return React.useContext(SortableItemContext);
@@ -406,7 +406,7 @@ export function useSortableItemContext() {
  * A sortable element. With `handle` (default) put a `SortableHandle` inside; with
  * `handle={false}` the whole item is the activator.
  */
-export const SortableItem = React.forwardRef(function SortableItem({ id, as: Comp = "div", disabled, className, style, children, ...props }, ref) {
+export const SortableItem = /*#__PURE__*/ React.forwardRef(function SortableItem({ id, as: Comp = "div", disabled, className, style, children, ...props }, ref) {
     const ctx = useSortableRoot("SortableItem");
     const item = useSortableItem(id, { disabled });
     const setRef = React.useCallback((node) => {
@@ -427,7 +427,7 @@ export const SortableItem = React.forwardRef(function SortableItem({ id, as: Com
             }, "data-slot": "sortable-item", "data-dragging": item.isDragging ? "" : undefined, "data-placeholder": item.isPlaceholder ? "" : undefined, "data-disabled": item.disabled ? "" : undefined, className: cn("vui-sortable-item", !ctx.handle && !item.disabled && "focus-ring cursor-grab", className), style: { ...item.style, ...style }, ...activatorProps, ...props, children: children }) }));
 });
 /** The drag handle: a button named "Reorder {item}". Hidden for disabled items. */
-export const SortableHandle = React.forwardRef(function SortableHandle({ id: _id, size = "md", className, children, ...props }, ref) {
+export const SortableHandle = /*#__PURE__*/ React.forwardRef(function SortableHandle({ id: _id, size = "md", className, children, ...props }, ref) {
     const item = useSortableItemContext();
     if (!item)
         throw new Error("<SortableHandle> must be used inside <SortableItem> (or pass the handle props from useSortableItem).");

package/dist/styles/blocks.css

@@ -11,6 +11,11 @@
   --scrim: linear-gradient(to top, rgb(6 8 4 / 0.8), rgb(6 8 4 / 0.58) 55%, rgb(6 8 4 / 0.5));
   --vb-rhythm: 1;
 }
+/* Rhythm overrides sit next to the default, outside @layer: an unlayered declaration always beats a
+   layered one, so inside `@layer components` these never applied. */
+.vb-section[data-rhythm="tight"] { --vb-rhythm: 0.55; }
+.vb-section[data-rhythm="loose"] { --vb-rhythm: 1.35; }
+.vb-section[data-rhythm="none"] { --vb-rhythm: 0; }
 /* Emphasis in sans presets reads as accent ink (italic stays the serif's job). */
 [data-font="grotesk"],
 [data-font="corporate"],
@@ -27,9 +32,6 @@
     color: var(--fg);
     scroll-margin-top: calc(var(--topbar-h) + 1rem);
   }
-  .vb-section[data-rhythm="tight"] { --vb-rhythm: 0.55; }
-  .vb-section[data-rhythm="loose"] { --vb-rhythm: 1.35; }
-  .vb-section[data-rhythm="none"] { --vb-rhythm: 0; }
 
   .vb-section[data-surface="scene"] { background-color: var(--scene); }
   /* Surface tokens are translucent under glass: lay them over the section's own scene colour so a
@@ -99,15 +101,18 @@
   }
 
   /* Container widths */
+  /* Full width up to the measure. An explicit width (not `auto`) matters: inside a flex column the
+     auto inline margins switch off stretching, and the container shrank to its content (a grid of
+     lazy images collapsed to almost nothing). */
   .vb-container {
-    box-sizing: content-box;
-    width: auto;
-    max-width: var(--container);
+    box-sizing: border-box;
+    width: 100%;
+    max-width: calc(var(--container) + 2 * var(--gutter));
     margin-inline: auto;
     padding-inline: var(--gutter);
   }
-  .vb-container[data-size="wide"] { max-width: var(--container-wide); }
-  .vb-container[data-size="prose"] { max-width: var(--prose); }
+  .vb-container[data-size="wide"] { max-width: calc(var(--container-wide) + 2 * var(--gutter)); }
+  .vb-container[data-size="prose"] { max-width: calc(var(--prose) + 2 * var(--gutter)); }
   .vb-container[data-size="full"] { max-width: none; }
 
   /* Headings */
@@ -126,6 +131,9 @@
     background-size: cover;
     background-position: var(--vb-focal, 50% 50%);
   }
+  /* No ratio: the frame follows the image. Was a Tailwind h-auto class, which (utilities layer)
+     silently beat component sizes such as .vb-nav-logo's 1.75rem height. */
+  .vb-image:where(:not([data-ratio])) { height: auto; }
   .vb-image > img,
   .vb-image > picture > img {
     display: block;
@@ -163,11 +171,12 @@
   /* Edit-mode placeholders for unknown / invalid blocks. */
   .vb-notice {
     --tone: var(--danger);
+    --tone-ink: var(--danger-ink);
     border: 1px dashed color-mix(in srgb, var(--tone) 55%, transparent);
     background: color-mix(in srgb, var(--tone) 7%, var(--scene));
     color: var(--fg);
   }
-  .vb-notice[data-tone="warning"] { --tone: var(--warning); }
+  .vb-notice[data-tone="warning"] { --tone: var(--warning); --tone-ink: var(--warning-ink); }
 }
 
 /* The primary action can't be accent-on-accent: it inverts. Unlayered on purpose, so it wins

package/dist/styles/editors.css

@@ -589,7 +589,8 @@
 .vui-cblock-unknown p { margin: 0; }
 
 /* Images */
-.vui-image { margin-block: 1.5rem; }
+/* Editor image node only: the kit <Image> shares the class name. */
+.ProseMirror .vui-image { margin-block: 1.5rem; }
 .vui-image-frame { position: relative; border-radius: var(--radius-ui-sm); }
 .vui-image-frame img { display: block; max-width: 100%; height: auto; border-radius: inherit; }
 .vui-image[data-selected] .vui-image-frame { outline: 1.5px solid var(--ring); outline-offset: 4px; }

package/dist/styles/media.css

@@ -169,7 +169,8 @@
 /* ------------------------------------------------------------------ */
 @keyframes vui-marquee { to { transform: translateX(calc(-100% * var(--dir))); } }
 @layer components {
-  .vui-marquee { gap: var(--marquee-gap); }
+  .vui-marquee-viewport { gap: var(--marquee-gap); }
+  .vui-marquee[data-controls] .vui-marquee-viewport { margin-inline-end: 2.25rem; }
   .vui-marquee-track {
     gap: var(--marquee-gap);
     min-width: 100%;
@@ -178,15 +179,40 @@
   }
   .vui-marquee[data-reverse] .vui-marquee-track { animation-direction: reverse; }
   .vui-marquee[data-pause-on-hover]:hover .vui-marquee-track,
-  .vui-marquee[data-pause-on-hover]:focus-within .vui-marquee-track { animation-play-state: paused; }
-  .vui-marquee[data-fade] {
+  .vui-marquee[data-pause-on-hover]:focus-within .vui-marquee-track,
+  .vui-marquee:has(.vui-marquee-pause:checked) .vui-marquee-track { animation-play-state: paused; }
+  .vui-marquee-toggle {
+    position: absolute;
+    inset-inline-end: 0;
+    inset-block-start: 50%;
+    translate: 0 -50%;
+    display: grid;
+    place-items: center;
+    width: 1.75rem;
+    height: 1.75rem;
+    border-radius: 999px;
+    border: 1px solid var(--surface-border);
+    background: var(--surface);
+    color: var(--fg-muted);
+    cursor: pointer;
+  }
+  .vui-marquee-toggle:hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 5%, var(--surface)); }
+  .vui-marquee-toggle:has(:focus-visible) { color: var(--fg); outline: 2px solid var(--ring); outline-offset: 2px; }
+  .vui-marquee-toggle svg { width: 0.75rem; height: 0.75rem; }
+  .vui-marquee-icon-play,
+  .vui-marquee:has(.vui-marquee-pause:checked) .vui-marquee-icon-pause { display: none; }
+  .vui-marquee:has(.vui-marquee-pause:checked) .vui-marquee-icon-play { display: block; }
+  [data-motion="off"] .vui-marquee-toggle { display: none; }
+  [data-motion="off"] .vui-marquee[data-controls] .vui-marquee-viewport { margin-inline-end: 0; }
+  .vui-marquee[data-fade] .vui-marquee-viewport {
     -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
     mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
   }
   @media (prefers-reduced-motion: reduce) {
-    .vui-marquee { overflow-x: auto; }
+    .vui-marquee-viewport { overflow-x: auto; margin-inline-end: 0; }
     .vui-marquee-track { animation: none; }
-    .vui-marquee-track[aria-hidden] { display: none; }
+    .vui-marquee-track[aria-hidden],
+    .vui-marquee-toggle { display: none; }
   }
 }
 

package/dist/styles.css

@@ -46,7 +46,7 @@
   --accent-ink-dark: oklch(0.9 0.19 122);
 }
 [data-accent="ocean"] {
-  --accent-base: oklch(0.64 0.17 245);
+  --accent-base: oklch(0.55 0.17 245);
   --accent-fg: #fff;
   --accent-ink-light: oklch(0.5 0.17 250);
   --accent-ink-dark: oklch(0.78 0.12 240);
@@ -58,7 +58,7 @@
   --accent-ink-dark: oklch(0.8 0.14 50);
 }
 [data-accent="rose"] {
-  --accent-base: oklch(0.66 0.21 10);
+  --accent-base: oklch(0.58 0.21 10);
   --accent-fg: #fff;
   --accent-ink-light: oklch(0.52 0.2 12);
   --accent-ink-dark: oklch(0.8 0.13 10);
@@ -125,6 +125,13 @@
   /* solid danger fill behind white text (destructive buttons); stays >= 4.5:1 in both themes */
   --danger-solid: #d0303c;
   --info: #2563eb;
+  /* Text-safe status inks (text-success/-warning/-danger/-info, tone text). The base hues stay for
+     fills, dots and badges; the inks keep small text >= 4.5:1 on scene, surface, hover and
+     selected rows (measured: success 5.47, warning 5.71, danger 5.51, info 5.44 on --scene). */
+  --success-ink: #0a6e4b;
+  --warning-ink: #8f4c00;
+  --danger-ink: #b8232f;
+  --info-ink: #1f56d6;
 
   --chart-1: var(--accent-ink);
   --chart-2: #2f6fd6;
@@ -188,6 +195,11 @@
   --danger: #f2717a;
   --danger-solid: #c93a45;
   --info: #7cb0ff;
+  /* the dark hues already clear 4.5:1 as text (>= 5.97 on surface-2) */
+  --success-ink: var(--success);
+  --warning-ink: var(--warning);
+  --danger-ink: var(--danger);
+  --info-ink: var(--info);
 
   --chart-2: #6ea4ff;
   --chart-3: #f0a256;
@@ -522,6 +534,15 @@
   --color-danger: var(--danger);
   --color-danger-solid: var(--danger-solid);
   --color-info: var(--info);
+  --color-success-ink: var(--success-ink);
+  --color-warning-ink: var(--warning-ink);
+  --color-danger-ink: var(--danger-ink);
+  --color-info-ink: var(--info-ink);
+  /* text-<status> reads the ink; bg-/border-/fill-<status> keep the base hue */
+  --text-color-success: var(--success-ink);
+  --text-color-warning: var(--warning-ink);
+  --text-color-danger: var(--danger-ink);
+  --text-color-info: var(--info-ink);
   --color-chart-1: var(--chart-1);
   --color-chart-2: var(--chart-2);
   --color-chart-3: var(--chart-3);
@@ -647,15 +668,24 @@ html {
 }
 /* Semantic tints shared by Badge, Alert, Toast and Status picker:
    pick a hue with tone-<name> (or set --tone), paint with tone-soft. */
-@utility tone-neutral { --tone: var(--fg-muted); }
-@utility tone-accent { --tone: var(--accent-ink); }
-@utility tone-success { --tone: var(--success); }
-@utility tone-warning { --tone: var(--warning); }
-@utility tone-danger { --tone: var(--danger); }
-@utility tone-info { --tone: var(--info); }
+@utility tone-neutral { --tone: var(--fg-muted); --tone-ink: var(--fg-muted); }
+@utility tone-accent { --tone: var(--accent-ink); --tone-ink: var(--accent-ink); }
+@utility tone-success { --tone: var(--success); --tone-ink: var(--success-ink); }
+@utility tone-warning { --tone: var(--warning); --tone-ink: var(--warning-ink); }
+@utility tone-danger { --tone: var(--danger); --tone-ink: var(--danger-ink); }
+@utility tone-info { --tone: var(--info); --tone-ink: var(--info-ink); }
 @utility tone-soft {
   background-color: color-mix(in srgb, var(--tone, var(--fg-muted)) var(--tone-mix, 13%), transparent);
-  color: color-mix(in srgb, var(--tone, var(--fg-muted)) var(--tone-ink-mix, 100%), var(--fg));
+  color: color-mix(in srgb, var(--tone, var(--fg-muted)) var(--tone-ink-mix, 100%), var(--tone-ink-base, var(--fg)));
+}
+/* The nav stays dark in the light theme: tone-soft text mixes toward white there instead of --fg
+   (light: >= 4.9:1 on the solid and glass rail for every tone). */
+:where(.surface-nav, .bg-nav) {
+  --tone-ink-base: var(--nav-fg-strong);
+  --tone-ink-mix: 50%;
+}
+:where(.dark .surface-nav, .dark .bg-nav) {
+  --tone-ink-mix: 80%;
 }
 @utility focus-ring {
   &:focus-visible {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vamos-ui/react",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "description": "Themeable component kit for admin panels and websites — theme × material × accent × density × font.",
   "license": "MIT",
   "type": "module",