@vamos-ui/react 0.3.0 → 0.4.0

package/dist/locales/tr.d.ts

@@ -717,6 +717,7 @@ export declare const tr: {
         thumbs: string;
         empty: string;
         loading: string;
+        marqueePause: string;
     };
     savedViews: {
         label: string;

package/dist/locales/tr.js

@@ -717,6 +717,7 @@ export const tr = {
         thumbs: "Slayt küçük resimleri",
         empty: "Henüz gösterilecek bir şey yok",
         loading: "Slaytlar yükleniyor",
+        marqueePause: "Kaydırmayı duraklat",
     },
     savedViews: {
         label: "Görünümler",

package/dist/media/media-library.js

@@ -717,7 +717,7 @@ export const MediaLibrary = React.forwardRef(function MediaLibrary({ adapter: ad
         const isSel = selected.includes(a.id);
         const disabled = isDisabled(a);
         const missing = isAltMissing(a);
-        return (_jsxs("div", { role: "gridcell", "data-tile": index, "data-slot": "media-tile", "data-selected": isSel ? "" : undefined, "data-active": activeId === a.id ? "" : undefined, "aria-selected": selection === "none" ? undefined : isSel, "aria-disabled": disabled || undefined, "aria-label": [a.filename, missing ? t("missingAlt") : null, a.status === "processing" ? t("processing") : a.status === "failed" ? t("failed") : null].filter(Boolean).join(", "), tabIndex: index === focusIndex ? 0 : -1, onClick: (e) => onTileClick(e, index), onDoubleClick: () => detailsPanel && openDetails(a), onFocus: () => setFocusIndex(index), className: cn("vui-media-tile group/tile focus-ring relative grid min-w-0 cursor-pointer gap-1.5 rounded-ui outline-none", disabled && "cursor-not-allowed opacity-45"), children: [_jsxs("div", { className: "vui-media-tile-frame relative overflow-hidden rounded-ui bg-surface-2", children: [_jsx(MediaThumb, { asset: a, rounded: "none" }), a.kind === "video" && a.duration ? _jsx("span", { className: "tabular absolute end-1.5 bottom-1.5 rounded-sm bg-[color-mix(in_srgb,var(--scene)_82%,transparent)] px-1.5 py-0.5 text-[10.5px] font-medium text-fg", children: f.duration(a.duration) }) : null, a.status === "failed" ? _jsx(Badge, { tone: "danger", className: "absolute start-1.5 top-1.5", children: t("failed") }) : null, missing ? _jsx("span", { "aria-hidden": true, title: t("missingAlt"), className: "vui-media-alt-dot absolute end-2 top-2 size-2 rounded-full bg-warning" }) : null, selection !== "none" ? (_jsx("span", { "aria-hidden": true, "data-slot": "media-tile-check", className: cn("vui-media-check absolute start-1.5 top-1.5 flex size-5 items-center justify-center rounded-full", isSel ? "bg-accent text-accent-fg" : "border border-[color-mix(in_srgb,var(--fg)_30%,transparent)] bg-[color-mix(in_srgb,var(--scene)_70%,transparent)] text-transparent"), children: _jsx(Check, { className: "size-3", strokeWidth: 3 }) })) : null] }), _jsx("span", { className: cn("truncate px-0.5 text-[12px] leading-tight", isSel ? "text-fg" : "text-fg-muted"), children: a.filename })] }, a.id));
+        return (_jsxs("div", { role: "gridcell", "data-tile": index, "data-slot": "media-tile", "data-selected": isSel ? "" : undefined, "data-active": activeId === a.id ? "" : undefined, "aria-selected": selection === "none" ? undefined : isSel, "aria-disabled": disabled || undefined, "aria-label": [a.filename, a.kind === "video" && a.duration ? f.duration(a.duration) : null, missing ? t("missingAlt") : null, a.status === "processing" ? t("processing") : a.status === "failed" ? t("failed") : null].filter(Boolean).join(", "), tabIndex: index === focusIndex ? 0 : -1, onClick: (e) => onTileClick(e, index), onDoubleClick: () => detailsPanel && openDetails(a), onFocus: () => setFocusIndex(index), className: cn("vui-media-tile group/tile focus-ring relative grid min-w-0 cursor-pointer gap-1.5 rounded-ui outline-none", disabled && "cursor-not-allowed opacity-45"), children: [_jsxs("div", { className: "vui-media-tile-frame relative overflow-hidden rounded-ui bg-surface-2", children: [_jsx(MediaThumb, { asset: a, rounded: "none" }), a.kind === "video" && a.duration ? _jsx("span", { "aria-hidden": true, className: "tabular absolute end-1.5 bottom-1.5 rounded-sm bg-[color-mix(in_srgb,var(--scene)_82%,transparent)] px-1.5 py-0.5 text-[10.5px] font-medium text-fg", children: f.duration(a.duration) }) : null, a.status === "failed" ? _jsx(Badge, { "aria-hidden": true, tone: "danger", className: "absolute start-1.5 top-1.5", children: t("failed") }) : null, missing ? _jsx("span", { "aria-hidden": true, title: t("missingAlt"), className: "vui-media-alt-dot absolute end-2 top-2 size-2 rounded-full bg-warning" }) : null, selection !== "none" ? (_jsx("span", { "aria-hidden": true, "data-slot": "media-tile-check", className: cn("vui-media-check absolute start-1.5 top-1.5 flex size-5 items-center justify-center rounded-full", isSel ? "bg-accent text-accent-fg" : "border border-[color-mix(in_srgb,var(--fg)_30%,transparent)] bg-[color-mix(in_srgb,var(--scene)_70%,transparent)] text-transparent"), children: _jsx(Check, { className: "size-3", strokeWidth: 3 }) })) : null] }), _jsx("span", { className: cn("truncate px-0.5 text-[12px] leading-tight", isSel ? "text-fg" : "text-fg-muted"), children: a.filename })] }, a.id));
     };
     const gridStyle = { gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`, gap: GRID_GAP };
     const gridEl = (_jsx("div", { ref: gridRef, role: "grid", "aria-label": t("files"), "aria-multiselectable": selection === "multiple" || undefined, "aria-rowcount": virtual ? rows.length : undefined, "aria-describedby": liveId, "data-slot": "media-grid", onKeyDown: onGridKeyDown, className: "relative", style: virtual ? { height: virtualizer.getTotalSize() } : undefined, children: virtual

package/dist/motion/text-reveal.d.ts

@@ -20,7 +20,9 @@ export interface TextRevealProps extends Omit<React.HTMLAttributes<HTMLElement>,
 /**
  * A heading that reveals word by word (or line by line) as it scrolls into view. Assistive
  * tech gets one plain string: the split copy is `aria-hidden`, the real text is a visually
- * hidden twin. Transform and opacity only; reduced motion shows it at once.
+ * hidden twin. Every unit — word or line — is separated by a real space, so `textContent`
+ * (search engines, copy-paste, reader mode) reads "közde, muhabbet", never "közde,muhabbet".
+ * Transform and opacity only; reduced motion shows it at once.
  *
  * ```tsx
  * <TextReveal as="h2">Small rooms, slow mornings, nothing to scroll.</TextReveal>

package/dist/motion/text-reveal.js

@@ -6,7 +6,9 @@ import { useReveal } from "./reveal.js";
 /**
  * A heading that reveals word by word (or line by line) as it scrolls into view. Assistive
  * tech gets one plain string: the split copy is `aria-hidden`, the real text is a visually
- * hidden twin. Transform and opacity only; reduced motion shows it at once.
+ * hidden twin. Every unit — word or line — is separated by a real space, so `textContent`
+ * (search engines, copy-paste, reader mode) reads "közde, muhabbet", never "közde,muhabbet".
+ * Transform and opacity only; reduced motion shows it at once.
  *
  * ```tsx
  * <TextReveal as="h2">Small rooms, slow mornings, nothing to scroll.</TextReveal>
@@ -16,7 +18,7 @@ export const TextReveal = React.forwardRef(function TextReveal({ children, as: T
     const inner = React.useRef(null);
     const initial = useReveal(inner, { once, rootMargin, threshold, disabled, onReveal });
     const text = String(children);
-    const units = by === "line" ? text.split("\n") : text.split(/\s+/).filter(Boolean);
+    const units = by === "line" ? text.split("\n").map((l) => l.trim()).filter(Boolean) : text.split(/\s+/).filter(Boolean);
     const gap = step ?? (by === "line" ? 110 : 45);
     const Comp = Tag;
     return (_jsxs(Comp, { ref: (node) => {
@@ -25,5 +27,5 @@ export const TextReveal = React.forwardRef(function TextReveal({ children, as: T
                 ref(node);
             else if (ref)
                 ref.current = node;
-        }, "data-reveal": effect === "mask" ? "text" : effect, "data-text-reveal": by, ...initial, className: cn("vm-text-reveal", className), style: { "--vm-step": `${gap}ms`, ...(delay ? { "--vm-delay": `${delay}ms` } : null), ...style }, ...props, children: [_jsx("span", { className: "sr-only", children: by === "line" ? units.join(" ") : text }), _jsx("span", { "aria-hidden": "true", className: "vm-text-reveal-visual", children: units.map((u, i) => (_jsxs(React.Fragment, { children: [_jsx("span", { className: "vm-tr-mask", children: _jsx("span", { className: "vm-tr-unit", style: { "--vm-i": i }, children: u }) }), by === "word" && i < units.length - 1 ? " " : null] }, i))) })] }));
+        }, "data-reveal": effect === "mask" ? "text" : effect, "data-text-reveal": by, ...initial, className: cn("vm-text-reveal", className), style: { "--vm-step": `${gap}ms`, ...(delay ? { "--vm-delay": `${delay}ms` } : null), ...style }, ...props, children: [_jsx("span", { className: "sr-only", children: units.join(" ") }), " ", _jsx("span", { "aria-hidden": "true", className: "vm-text-reveal-visual", children: units.map((u, i) => (_jsxs(React.Fragment, { children: [_jsx("span", { className: "vm-tr-mask", children: _jsx("span", { className: "vm-tr-unit", style: { "--vm-i": i }, children: u }) }), i < units.length - 1 ? " " : null] }, i))) })] }));
 });

package/dist/render/block-renderer.js

@@ -10,7 +10,7 @@ import { prepareDoc, resolveDoc } from "./prepare.js";
 const isProd = () => typeof process !== "undefined" && process.env?.NODE_ENV === "production";
 /** Edit/dev placeholder for a block that can't render normally. Server component. */
 export function BlockNotice({ tone = "danger", title, hint, type, blockId, }) {
-    return (_jsx("div", { className: "vb-container py-4", "data-block-id": blockId, "data-block-type": type, "data-block-notice": tone, children: _jsxs("div", { role: "note", "data-tone": tone, className: "vb-notice flex flex-col gap-1 rounded-ui px-4 py-3.5 @2xl:flex-row @2xl:items-baseline @2xl:gap-4", children: [_jsx("span", { className: "shrink-0 font-mono text-eyebrow uppercase tracking-[0.08em] text-(--tone)", children: type }), _jsxs("span", { className: "text-small", children: [_jsx("strong", { className: "font-semibold text-fg", children: title }), hint ? _jsxs("span", { className: "text-fg-muted", children: [" \u2014 ", hint] }) : null] })] }) }));
+    return (_jsx("div", { className: "vb-container py-4", "data-block-id": blockId, "data-block-type": type, "data-block-notice": tone, children: _jsxs("div", { role: "note", "data-tone": tone, className: "vb-notice flex flex-col gap-1 rounded-ui px-4 py-3.5 @2xl:flex-row @2xl:items-baseline @2xl:gap-4", children: [_jsx("span", { className: "shrink-0 font-mono text-eyebrow uppercase tracking-[0.08em] text-(--tone-ink)", children: type }), _jsxs("span", { className: "text-small", children: [_jsx("strong", { className: "font-semibold text-fg", children: title }), hint ? _jsxs("span", { className: "text-fg-muted", children: [" \u2014 ", hint] }) : null] })] }) }));
 }
 function editAttrs(ctx, n) {
     return ctx.opts.editMode ? { "data-block-id": n.node.id, "data-block-type": n.node.type, "data-hidden": n.node.hidden ? "" : undefined } : {};

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.0",
   "description": "Themeable component kit for admin panels and websites — theme × material × accent × density × font.",
   "license": "MIT",
   "type": "module",