From deb1ce5371be4740204592a4ff040bffaa7156a8 Mon Sep 17 00:00:00 2001 From: jansaldo Date: Tue, 21 Jul 2026 11:00:57 -0300 Subject: [PATCH 01/83] feat(app-header): support slotted brand marks --- .../app-header/AppHeader.stories.tsx | 5 ++++ src/components/app-header/AppHeader.tsx | 21 +++++++++------- src/components/logo/Logo.tsx | 24 +++++++++++-------- 3 files changed, 32 insertions(+), 18 deletions(-) diff --git a/src/components/app-header/AppHeader.stories.tsx b/src/components/app-header/AppHeader.stories.tsx index 02253a6..268bc51 100644 --- a/src/components/app-header/AppHeader.stories.tsx +++ b/src/components/app-header/AppHeader.stories.tsx @@ -45,6 +45,11 @@ export const WithoutProgress: Story = { args: { featureName: "Anonimizador" }, }; +/** Home screens can show the full AymurAI wordmark without a feature name. */ +export const HomeWordmark: Story = { + args: { logoVariant: "logo" }, +}; + /** * Slots wrap the defaults without rebuilding their styles: an anchor for the * logo, a Radix PopoverTrigger for help, and a DialogTrigger for apps. diff --git a/src/components/app-header/AppHeader.tsx b/src/components/app-header/AppHeader.tsx index 504c413..8a40192 100644 --- a/src/components/app-header/AppHeader.tsx +++ b/src/components/app-header/AppHeader.tsx @@ -37,6 +37,8 @@ const root = css({ borderBottomWidth: "[1px]", borderBottomStyle: "solid", borderBottomColor: "[#BCBAB8]", // border.primary colour, no bare token + flexShrink: "0", + w: "full", }); const logoWrap = css({ @@ -66,7 +68,7 @@ const actionsWrap = css({ const helpIcon = css({ color: "text.lighter" }); export interface AppHeaderSlots { - /** Wrap or replace the default Logo while preserving the header layout. */ + /** Wrap only the iso mark; wordmark/divider/feature name remain non-interactive. */ logo?: (defaultElement: ReactElement) => ReactNode; /** Wrap or replace the default help Button (for example with PopoverTrigger). */ help?: (defaultElement: ReactElement) => ReactNode; @@ -77,6 +79,8 @@ export interface AppHeaderSlots { interface AppHeaderBaseProps { /** Feature name shown next to the logo (e.g. "Voz a Texto"). Omit for the bare iso mark. */ featureName?: string; + /** Brand shown when featureName is omitted. Defaults to the bare iso mark. */ + logoVariant?: "logo" | "iso"; onHelp?: () => void; onOpenApps?: () => void; helpLabel?: string; @@ -103,6 +107,7 @@ export type AppHeaderProps = AppHeaderBaseProps & AppHeaderProgressProps; export function AppHeader({ featureName, + logoVariant = "iso", steps, current, onHelp, @@ -117,10 +122,12 @@ export function AppHeader({ ? steps.map((label, i) => ({ label: i === current ? label : "" })) : []; - const defaultLogo = featureName ? ( - - ) : ( - + const defaultLogo = ( + ); const defaultHelp = ( - )} ); } From 7bd9603962ea79ec5536b1ebbed5e95d260e732a Mon Sep 17 00:00:00 2001 From: jansaldo Date: Tue, 21 Jul 2026 13:26:24 -0300 Subject: [PATCH 07/83] feat(callout): add compact notification size MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Formalizes the hand-rolled "Transcribiendo audio…" notice from desktop-app's Voz a Texto flow as size="compact": padding/gap/icon already matched the default size, only the radius (xs, 2px) and text style (subtitle.sm.strong, 14px/600) differ. No dedicated Figma frame exists for this size — spec verified pixel-for-pixel against the existing desktop-app implementation instead. --- src/components/callout/Callout.stories.tsx | 12 ++++++++++++ src/components/callout/Callout.tsx | 17 ++++++++++++++++- 2 files changed, 28 insertions(+), 1 deletion(-) diff --git a/src/components/callout/Callout.stories.tsx b/src/components/callout/Callout.stories.tsx index 25ffb37..91b8e0d 100644 --- a/src/components/callout/Callout.stories.tsx +++ b/src/components/callout/Callout.stories.tsx @@ -1,6 +1,7 @@ import type { Meta, StoryObj } from "@storybook/react"; import { CheckCircle, + Info as InfoIcon, WarningCircle, Warning as WarningIcon, } from "phosphor-react"; @@ -44,6 +45,17 @@ export const NoBorder: Story = { args: { variant: "success", noBorder: true }, }; +/** Voz a Texto processing notice — formalizes the local hand-rolled version. */ +export const Compact: Story = { + args: { + size: "compact", + variant: "info", + icon: InfoIcon, + noBorder: true, + message: "Transcribiendo audio…", + }, +}; + /** Full variant matrix */ export const Matrix: Story = { render: () => ( diff --git a/src/components/callout/Callout.tsx b/src/components/callout/Callout.tsx index cf1ed39..31bd017 100644 --- a/src/components/callout/Callout.tsx +++ b/src/components/callout/Callout.tsx @@ -10,6 +10,10 @@ import { hstack } from "@/styled/patterns"; * Ported from desktop-app/src/renderer/src/components/ui/callout.tsx * * Figma: Toast family node 1994:30384 — Error / Warning / Success / Info. + * `size="compact"` has no dedicated Figma frame; it formalizes the + * hand-rolled "Transcribiendo audio…" notice from desktop-app's Voz a Texto + * flow (16px padding, 8px gap and 24px icon already match `size="normal"` — + * only the radius and text style shrink). */ /** @@ -61,10 +65,18 @@ const calloutRecipe = cva({ borderWidth: "0", }, }, + size: { + normal: {}, + compact: { + rounded: "xs", // Figma-scale radius token: 2px + textStyle: "subtitle.sm.strong", // 14px/600 + }, + }, }, defaultVariants: { variant: "info", noBorder: false, + size: "normal", }, }); @@ -87,10 +99,12 @@ const accentRecipe = cva({ }); export type CalloutVariant = "error" | "warning" | "success" | "info"; +export type CalloutSize = "normal" | "compact"; export interface CalloutProps extends HTMLAttributes { message: string; variant?: CalloutVariant; + size?: CalloutSize; noBorder?: boolean; onDismiss?: () => void; icon?: Icon; @@ -99,6 +113,7 @@ export interface CalloutProps extends HTMLAttributes { export function Callout({ message, variant = "info", + size = "normal", noBorder = false, onDismiss, icon: IconComponent = Bell, @@ -108,7 +123,7 @@ export function Callout({ const accent = accentRecipe({ variant }); return (
From fb21d8119d1f59df7e3bafb5f8b30ddc059fac1e Mon Sep 17 00:00:00 2001 From: jansaldo Date: Tue, 21 Jul 2026 13:32:29 -0300 Subject: [PATCH 08/83] feat(dialog): add responsive content sizes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Adds size="sm|md|lg|full" to DialogContent (default "md"). No Dialog/Modal family exists in the Figma UI Library file, so breakpoints are lifted from desktop-app's real per-usage overrides instead: confirmations (~420px), forms (~520px), and the "¿Cómo funciona?" tutorial (~900-1024px via a minWidth:900px + maxW:5xl! hack). Every size stays viewport-bound (min(px, vw)) rather than a hard minWidth, which is what let the tutorial dialog overflow narrow windows. max-height (90vh) + internal scroll now apply to every size, not just the one that previously set it inline. --- src/components/dialog/Dialog.stories.tsx | 181 +++++++++++++++++++++++ src/components/dialog/Dialog.tsx | 89 ++++++++--- 2 files changed, 248 insertions(+), 22 deletions(-) diff --git a/src/components/dialog/Dialog.stories.tsx b/src/components/dialog/Dialog.stories.tsx index 79bd0da..0eed634 100644 --- a/src/components/dialog/Dialog.stories.tsx +++ b/src/components/dialog/Dialog.stories.tsx @@ -91,6 +91,187 @@ export const Default: Story = { ), }; +function sizeTrigger(label: string) { + return ( + + + + ); +} + +/** Confirmations — e.g. "¿Eliminar esta etiqueta?" */ +export const SizeSm: Story = { + render: () => ( + + {sizeTrigger("Open sm")} + + + + ¿Eliminar esta etiqueta? + + + + + + + + + + + ), +}; + +/** Forms — e.g. entity/label resolution */ +export const SizeMd: Story = { + render: () => ( + + {sizeTrigger("Open md")} + + + + Resolver entidad + + + + Elegí la entidad correcta para el término seleccionado. + + + + + + + + + + ), +}; + +/** Tutorials — the 2×2 "¿Cómo funciona?" step grid */ +export const SizeLg: Story = { + render: () => ( + + {sizeTrigger("Open lg")} + + + + ¿Cómo funciona? + + + + + +
+ {[1, 2, 3, 4].map((step) => ( +
+
+ + Paso {step} + +
+ ))} +
+ +
+ ), +}; + +/** Complex screens that need real vertical room */ +export const SizeFull: Story = { + render: () => ( + + {sizeTrigger("Open full")} + + + + Pantalla completa + + + + + +

+ Ocupa el alto disponible (90vh) en vez de ajustarse al contenido — + para flujos complejos con su propio scroll interno. +

+ + + ), +}; + export const WithLongContent: Story = { render: () => ( diff --git a/src/components/dialog/Dialog.tsx b/src/components/dialog/Dialog.tsx index de8eb8e..ad5aa93 100644 --- a/src/components/dialog/Dialog.tsx +++ b/src/components/dialog/Dialog.tsx @@ -1,10 +1,18 @@ import * as DialogPrimitive from "@radix-ui/react-dialog"; import type { ComponentPropsWithoutRef, HTMLAttributes } from "react"; -import { css, cx } from "@/styled/css"; +import { css, cva, cx } from "@/styled/css"; /** * Dialog — Radix UI dialog with AymurAI styling. * Ported from desktop-app/src/renderer/src/components/ui/dialog.tsx + * + * No Figma component backs `DialogContent`'s `size` variants — this design + * system file has no Dialog/Modal family at all. Breakpoints are lifted + * from desktop-app's real per-usage overrides instead (confirmations ~420px, + * forms ~520px, the "¿Cómo funciona?" tutorial ~900–1024px via a + * `minWidth:900px` + `maxW:5xl!` hack). Every size stays viewport-bound + * (`min(px, vw)`) instead of the old hard `minWidth`, which is what let the + * tutorial dialog overflow narrow windows. */ export const Dialog = DialogPrimitive.Root; export const DialogTrigger = DialogPrimitive.Trigger; @@ -26,27 +34,61 @@ const overlayStyles = css({ }, }); -const contentStyles = css({ - position: "fixed", - inset: "[0]", - margin: "auto", - zIndex: 50, - - bg: "bg.secondary", - rounded: "sm", - p: "6", - boxShadow: "dialog", - - width: "[90vw]", - minW: "[300px]", - maxW: "[700px]", - h: "[fit-content]", - - "&[data-state='open']": { - animation: "fadeIn", +export type DialogContentSize = "sm" | "md" | "lg" | "full"; + +const contentStyles = cva({ + base: { + position: "fixed", + inset: "[0]", + margin: "auto", + zIndex: 50, + + bg: "bg.secondary", + rounded: "sm", + p: "6", + boxShadow: "dialog", + + minW: "[300px]", + maxH: "[90vh]", + overflowY: "auto", + + "&[data-state='open']": { + animation: "fadeIn", + }, + "&[data-state='closed']": { + animation: "fadeOut", + }, }, - "&[data-state='closed']": { - animation: "fadeOut", + variants: { + size: { + // Confirmations — e.g. "¿Eliminar esta etiqueta?" + sm: { + width: "[min(420px,90vw)]", + maxW: "[420px]", + h: "[fit-content]", + }, + // Forms — e.g. entity/label resolution + md: { + width: "[min(520px,92vw)]", + maxW: "[520px]", + h: "[fit-content]", + }, + // Tutorials — e.g. the 2×2 "¿Cómo funciona?" step grid + lg: { + width: "[min(1024px,92vw)]", + maxW: "[1024px]", + h: "[fit-content]", + }, + // Complex screens that need real vertical room, not just fit-content + full: { + width: "[min(1440px,96vw)]", + maxW: "[1440px]", + h: "[90vh]", + }, + }, + }, + defaultVariants: { + size: "md", }, }); @@ -80,19 +122,22 @@ export function DialogOverlay({ className, ...props }: DialogOverlayProps) { export interface DialogContentProps extends ComponentPropsWithoutRef { container?: HTMLElement; + /** Confirmations (sm) · forms (md, default) · tutorials (lg) · complex screens (full) */ + size?: DialogContentSize; } export function DialogContent({ className, container, children, + size = "md", ...props }: DialogContentProps) { return ( {children} From 9a619ade0aca27ce5f70ed86d206ec107f604c24 Mon Sep 17 00:00:00 2001 From: jansaldo Date: Tue, 21 Jul 2026 14:18:08 -0300 Subject: [PATCH 09/83] feat(side-panel): add responsive size variants MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit SidePanel had no intrinsic width (root was w:"full"), so every consumer had to impose one itself. Adds size="sm|md|lg" (default "lg"): "lg" (479px) matches the only width Figma documents for this component (node 40002322:53113, no size variants exist there); "sm" (360px) and "md" (400px) formalize desktop-app's own real widths instead — the fixed wrapper around this component in the Voz a Texto turn editor, and the fully-custom (not yet using this component) entities panel in Anonimizador, respectively. maxW:"full" lets it still shrink under a narrower ancestor instead of forcing overflow. --- .../side-panel/SidePanel.stories.tsx | 136 ++++++++++++------ src/components/side-panel/SidePanel.tsx | 46 ++++-- 2 files changed, 124 insertions(+), 58 deletions(-) diff --git a/src/components/side-panel/SidePanel.stories.tsx b/src/components/side-panel/SidePanel.stories.tsx index 81f0a67..8f5bf45 100644 --- a/src/components/side-panel/SidePanel.stories.tsx +++ b/src/components/side-panel/SidePanel.stories.tsx @@ -63,25 +63,73 @@ export const Default: Story = { const [selected, setSelected] = useState(0); const [time, setTime] = useState("01:15"); return ( -
- + + ); + }, +}; + +/** Intrinsic widths — Voz a Texto wrapper (sm) · entities panel (md) · Figma reference (lg, default) */ +export const Sizes: Story = { + render: () => { + const [selected, setSelected] = useState(0); + return ( +
+ {(["sm", "md", "lg"] as const).map((size) => ( + + ))}
); }, }; +/** + * `maxW:"full"` only shrinks the panel below its intrinsic size when a + * bounding ancestor actually constrains the available width — here a fixed + * 280px column, narrower than even `size="sm"` (360px). + */ +export const NarrowContainer: Story = { + render: () => ( +
+ +
+ ), +}; + /** * Merging into a turn from a different speaker shows a confirm popover — * click "Unir con el anterior/siguiente" to see it (Figma "Conflicto Nombre @@ -91,24 +139,22 @@ export const MergeConfirmation: Story = { render: () => { const [selected, setSelected] = useState(0); return ( -
- window.alert("Unido con Fiscal")} - onMergeNext={() => window.alert("Unido con Defensor")} - /> -
+ window.alert("Unido con Fiscal")} + onMergeNext={() => window.alert("Unido con Defensor")} + /> ); }, }; @@ -118,19 +164,17 @@ export const InvalidTimestamp: Story = { render: () => { const [time, setTime] = useState("1:5"); return ( -
- -
+ ); }, }; @@ -146,7 +190,7 @@ export const RenameAndCollision: Story = { const [lastAction, setLastAction] = useState("Sin cambios"); return ( -
+
void; onDelete?: () => void; + /** Intrinsic width: Voz a Texto wrapper (360px) · entities panel (400px) · Figma reference (479px, default) */ + size?: SidePanelSize; className?: string; }; -const root = css({ - display: "flex", - flexDirection: "column", - gap: "6", // 24px - pt: "[42px]", - px: "8", // 32px - pb: "8", - bg: "bg.primary", - w: "full", +export type SidePanelSize = "sm" | "md" | "lg"; + +const root = cva({ + base: { + display: "flex", + flexDirection: "column", + gap: "6", // 24px + pt: "[42px]", + px: "8", // 32px + pb: "8", + bg: "bg.primary", + maxW: "full", + }, + variants: { + size: { + sm: { w: "[360px]" }, + md: { w: "[400px]" }, + lg: { w: "[479px]" }, + }, + }, + defaultVariants: { size: "lg" }, }); const card = css({ @@ -263,6 +284,7 @@ export function SidePanel({ nextTurnName, onAddBelow, onDelete, + size = "lg", className, }: SidePanelProps) { const [confirm, setConfirm] = useState(null); @@ -358,7 +380,7 @@ export function SidePanel({ } return ( -
+
{/* Selected turn */}

Turno seleccionado

From 94cc61d2830b7c33c5583d048ab6269b8f8cd6a0 Mon Sep 17 00:00:00 2001 From: jansaldo Date: Tue, 21 Jul 2026 15:16:32 -0300 Subject: [PATCH 10/83] feat(file-drop-zone): add responsive file selection surface MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit New purely-presentational component for Dataset, Anonimizador and Voz a Texto onboarding. No Figma frame documents it; it formalizes desktop-app's own DropArea instead, which is already byte-identical across all three flows (verified: only copy/icon/extensions differ per call site — visuals, dragging and layout were already 100% shared). Fills two real gaps DropArea never had: a disabled state (opacity: 0.5, following Search's prev/next button convention) and :focus-visible styling (outline + shadow, matching Button). dragging is self-managed via the same dragenter/dragleave counter DropArea used, but accepts a controlled override for Storybook. onDrop only ever hands back raw File[] — extension filtering, single/multiple selection and the hidden file input all stay in desktop-app. --- .../file-drop-zone/FileDropZone.stories.tsx | 43 +++++ .../file-drop-zone/FileDropZone.tsx | 180 ++++++++++++++++++ src/components/file-drop-zone/index.ts | 1 + src/index.ts | 1 + 4 files changed, 225 insertions(+) create mode 100644 src/components/file-drop-zone/FileDropZone.stories.tsx create mode 100644 src/components/file-drop-zone/FileDropZone.tsx create mode 100644 src/components/file-drop-zone/index.ts diff --git a/src/components/file-drop-zone/FileDropZone.stories.tsx b/src/components/file-drop-zone/FileDropZone.stories.tsx new file mode 100644 index 0000000..e48c8fe --- /dev/null +++ b/src/components/file-drop-zone/FileDropZone.stories.tsx @@ -0,0 +1,43 @@ +import type { Meta, StoryObj } from "@storybook/react"; +import { FileAudio } from "phosphor-react"; +import { FileDropZone } from "./FileDropZone"; + +const meta = { + title: "Components/FileDropZone", + component: FileDropZone, + args: { + icon: , + title: "Selecciona o arrastra el archivo para\ntranscribir", + description: "Formatos válidos: .mp3, .wav, .m4a, .webm, .ogg o .flac", + }, + parameters: { layout: "padded" }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const Default: Story = {}; + +export const Dragging: Story = { args: { dragging: true } }; + +export const Disabled: Story = { args: { disabled: true } }; + +/** Single-line copy — e.g. Dataset/Anonimizador, which don't need a line break. */ +export const OneLineCopy: Story = { + args: { + title: "Selecciona o arrastra el archivo para agregar al set de datos", + description: "Formatos válidos: .docx, .pdf", + }, +}; + +/** Narrow viewport — padding/gap shrink, the surface stays full-width. */ +export const NarrowViewport: Story = { + parameters: { viewport: { defaultViewport: "mobile1" } }, + decorators: [ + (Story) => ( +
+ +
+ ), + ], +}; diff --git a/src/components/file-drop-zone/FileDropZone.tsx b/src/components/file-drop-zone/FileDropZone.tsx new file mode 100644 index 0000000..4b4114c --- /dev/null +++ b/src/components/file-drop-zone/FileDropZone.tsx @@ -0,0 +1,180 @@ +import type { DragEvent, ReactNode } from "react"; +import { useRef, useState } from "react"; +import { css, cva, cx } from "@/styled/css"; +import { stack } from "@/styled/patterns"; + +/** + * FileDropZone — file-selection surface shared by Dataset, Anonimizador and + * Voz a Texto onboarding. No Figma frame documents this component; it + * formalizes desktop-app's own `DropArea` (already byte-identical across + * the three flows) instead — including its two real gaps: no `disabled` + * state existed before (styled from scratch, following the codebase's + * `opacity: 0.5` disabled convention, e.g. `Search`'s prev/next buttons), + * and no `:focus-visible` styling existed before (added here, matching + * `Button`'s outline + shadow treatment). + * + * Purely presentational: it never inspects file names or extensions. + * `onDrop` hands the consumer the raw dropped `File[]`; filtering by + * extension, single/multiple selection, and the hidden `` + * all stay in desktop-app. + * + * `dragging` is self-managed by default (native dragenter/dragleave with a + * counter, ported from `DropArea`, so nested children don't cause flicker) + * but accepts a controlled override — mainly so Storybook can force the + * state without simulating a real OS drag gesture. + */ + +const zone = cva({ + base: { + display: "flex", + flexDir: "column", + alignItems: "center", + justifyContent: "center", + gap: { base: "6", sm: "8" }, + w: "full", + minH: "[335px]", + p: { base: "4", sm: "8" }, + rounded: "sm", + border: "primary", + bg: "[#F3F4FF]", // token gap: idle drop-zone tint, distinct from bg.primary-alternative (#E5E8FF) + boxShadow: "[0px_4px_20px_rgba(0,0,0,0.05)]", + cursor: "pointer", + transitionProperty: "[border-color, background-color, box-shadow]", + transitionDuration: "normal", + transitionTimingFunction: "default", + + "&:focus-visible:enabled": { + outline: "primary-alt", + outlineWidth: "[2px]", + boxShadow: "focus", + }, + "&:disabled": { + cursor: "not-allowed", + opacity: "0.5", + }, + }, + variants: { + dragging: { + true: { + borderColor: "brand.primary", + bg: "bg.primary-alternative", + boxShadow: "[0px_0px_15px_0px_#3F479D66]", + }, + false: {}, + }, + }, + defaultVariants: { dragging: false }, +}); + +const iconContainer = cva({ + base: { + display: "flex", + alignItems: "center", + justifyContent: "center", + w: "[70px]", + h: "[70px]", + p: "[14px]", + rounded: "[14px]", + flexShrink: "0", + bg: "bg.primary-alternative", + color: "text.lighter", + "& svg": { w: "full", h: "full" }, + }, +}); + +const titleStyle = css({ + textStyle: "subtitle.md.default", + color: "text.default", + textAlign: "center", + whiteSpace: "pre-line", // titles carry real line breaks, e.g. "...para\ntranscribir" + maxW: "[361px]", +}); + +const descriptionStyle = css({ + textStyle: "subtitle.sm.default", + color: "text.lighter", + textAlign: "center", +}); + +export interface FileDropZoneProps { + icon: ReactNode; + title: string; + description: string; + /** Forces the dragging visual; omit to let the component track real drag events. */ + dragging?: boolean; + disabled?: boolean; + onClick?: () => void; + /** Receives the raw dropped files — extension/type filtering stays in the consumer. */ + onDrop?: (files: File[]) => void; + className?: string; +} + +export function FileDropZone({ + icon, + title, + description, + dragging, + disabled = false, + onClick, + onDrop, + className, +}: FileDropZoneProps) { + const [internalDragging, setInternalDragging] = useState(false); + const dragCounter = useRef(0); + const isDragging = dragging ?? internalDragging; + + function handleDragEnter(event: DragEvent) { + event.preventDefault(); + event.stopPropagation(); + if (disabled) return; + dragCounter.current += 1; + setInternalDragging(true); + } + + function handleDragLeave(event: DragEvent) { + event.preventDefault(); + event.stopPropagation(); + if (disabled) return; + dragCounter.current = Math.max(0, dragCounter.current - 1); + if (dragCounter.current === 0) setInternalDragging(false); + } + + function handleDragOver(event: DragEvent) { + event.preventDefault(); + event.stopPropagation(); + } + + function handleDrop(event: DragEvent) { + event.preventDefault(); + event.stopPropagation(); + dragCounter.current = 0; + setInternalDragging(false); + if (disabled) return; + if (event.dataTransfer.files.length > 0) { + onDrop?.(Array.from(event.dataTransfer.files)); + } + } + + return ( + + ); +} + +export default FileDropZone; diff --git a/src/components/file-drop-zone/index.ts b/src/components/file-drop-zone/index.ts new file mode 100644 index 0000000..89829e5 --- /dev/null +++ b/src/components/file-drop-zone/index.ts @@ -0,0 +1 @@ +export { default, FileDropZone, type FileDropZoneProps } from "./FileDropZone"; diff --git a/src/index.ts b/src/index.ts index 3f613b7..f146ed7 100644 --- a/src/index.ts +++ b/src/index.ts @@ -29,6 +29,7 @@ export * from "./components/category-item"; export * from "./components/check-circle"; export * from "./components/checkbox"; export * from "./components/dialog"; +export * from "./components/file-drop-zone"; export * from "./components/logo"; // Voz a texto (speech-to-text) export * from "./components/option"; From d696f4b66be9298dcbc5b5efc4f5766a246484c1 Mon Sep 17 00:00:00 2001 From: jansaldo Date: Tue, 21 Jul 2026 15:59:57 -0300 Subject: [PATCH 11/83] feat(archive-view): add loading, configurable selection and a large size MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - type="preview-loading": formalizes desktop-app's ad-hoc loadingPreview spinner box shown while a dropped file is still being parsed. - selectable prop: replaces desktop-app's withoutSelection CSS hack (hiding the checkbox via `button[role='checkbox'] { display: none }`) with an actual prop. - size="lg" (367x426px): the single-document preview from the redesigned "Anonimizador - Preview" screen (Figma node 40002579:88220) — product moved Dataset/Anonimizador to one document at a time, always requiring manual validation, instead of a batch grid. size="lg" never renders its own filename/error caption (no Figma type covers this combination); the screen pairs it with a separate ArchiveRow for that instead. Also fixes a layout bug surfaced while verifying the new size against Figma: the filename/error

elements had no margin reset, so with no preflight they carried the browser's default UA margin on top of the intended gap. --- .../archives/ArchiveView.stories.tsx | 23 ++- src/components/archives/ArchiveView.tsx | 165 ++++++++++-------- src/components/archives/index.ts | 2 + 3 files changed, 116 insertions(+), 74 deletions(-) diff --git a/src/components/archives/ArchiveView.stories.tsx b/src/components/archives/ArchiveView.stories.tsx index 9a041dd..0d48b19 100644 --- a/src/components/archives/ArchiveView.stories.tsx +++ b/src/components/archives/ArchiveView.stories.tsx @@ -28,14 +28,31 @@ export const PreviewSelected: Story = { args: { type: "preview", selected: true }, }; +/** Formalizes desktop-app's ad-hoc `loadingPreview` spinner box. */ +export const PreviewLoading: Story = { args: { type: "preview-loading" } }; + +/** Replaces desktop-app's `withoutSelection` CSS hack (hides the checkbox via a prop). */ +export const PreviewNotSelectable: Story = { + args: { type: "preview", selectable: false }, +}; + +/** + * `size="lg"` — the single-document preview (Figma node 40002579:88220), + * shared by Dataset/Anonimizador. No caption: pair it with `ArchiveRow`. + */ +export const LargePreview: Story = { + args: { type: "preview", size: "lg", selectable: false }, +}; + /** Matrix */ export const Matrix: Story = { render: () => (

- - - + + + +
), }; diff --git a/src/components/archives/ArchiveView.tsx b/src/components/archives/ArchiveView.tsx index 7a9b7cc..8662ebd 100644 --- a/src/components/archives/ArchiveView.tsx +++ b/src/components/archives/ArchiveView.tsx @@ -1,11 +1,12 @@ import { CheckCircle, XCircle } from "phosphor-react"; -import { css, cx } from "@/styled/css"; +import { css, cva, cx } from "@/styled/css"; +import { Spinner } from "../spinner"; /** * ArchiveView — AymurAI UI Library "archive-view" family node 222:21065. * * Figma types: - * Previsualitation — thumbnail image preview (157×192px), filename below, + * Previsualitation — thumbnail image preview, filename below, * checkbox overlay (top-right corner) * Previsualitation Error — same thumbnail but error border (#DC582E) + pink tint, * "Error de carga." italic message below filename @@ -14,6 +15,18 @@ import { css, cx } from "@/styled/css"; * Document Error — error coloured placeholder + XCircle icon (48px), * "Error de guardado." italic message below filename * + * `size="lg"` (367×426px) has no dedicated Figma type — it formalizes the + * single-document preview from the "Anonimizador - Preview" screen (node + * 40002579:88220), shared by every flow that reads one docx/pdf at a time + * (Dataset, Anonimizador). That screen pairs the thumbnail with a separate + * {@link ArchiveRow} for the filename/size/delete action, so `size="lg"` + * never renders its own caption — only `size="sm"` (default, 157×192px, + * the original grid thumbnail) does. + * + * `type="preview-loading"` also has no Figma type — it formalizes + * desktop-app's own ad-hoc `loadingPreview` spinner box, shown while a + * dropped file is still being parsed. + * * Tokens: * border/primary = #BCBAB8 (preview border) * bg/primary = #F6F5F7 (document placeholder bg) @@ -28,91 +41,96 @@ import { css, cx } from "@/styled/css"; export type ArchiveViewType = | "preview" + | "preview-loading" | "preview-error" | "document-ok" | "document-error"; +export type ArchiveViewSize = "sm" | "lg"; + export interface ArchiveViewProps { fileName?: string; type?: ArchiveViewType; + size?: ArchiveViewSize; /** Optional thumbnail image URL (used for preview variants) */ src?: string; + /** Whether the selection checkbox renders at all (preview variants only). */ + selectable?: boolean; /** Whether file is selected (shows checked checkbox overlay) */ selected?: boolean; onSelect?: (selected: boolean) => void; className?: string; } -// Thumbnail frame styles per type -const frameStyles: Record = { - preview: css({ - position: "relative", - w: "[157px]", - h: "[192px]", - rounded: "md", - borderWidth: "[4px]", - borderStyle: "solid", - borderColor: "[#BCBAB8]", - boxShadow: "[0px_0px_4px_rgba(0,0,0,0.1)]", - overflow: "hidden", - bg: "bg.secondary", - flexShrink: "0", - }), - "preview-error": css({ - position: "relative", - w: "[157px]", - h: "[192px]", - rounded: "md", - borderWidth: "[4px]", - borderStyle: "solid", - borderColor: "system.error", - boxShadow: "[0px_0px_4px_rgba(0,0,0,0.1)]", - overflow: "hidden", - bg: "bg.secondary", - flexShrink: "0", - }), - "document-ok": css({ +const frame = cva({ + base: { position: "relative", - display: "flex", - alignItems: "center", - justifyContent: "center", - w: "[157px]", - h: "[192px]", rounded: "md", borderWidth: "[4px]", borderStyle: "solid", - borderColor: "[#BCBAB8]", - filter: "[drop-shadow(0px_0px_2px_rgba(0,0,0,0.1))]", - bg: "bg.primary", flexShrink: "0", - }), - "document-error": css({ - position: "relative", - display: "flex", - alignItems: "center", - justifyContent: "center", - w: "[157px]", - h: "[192px]", - rounded: "md", - borderWidth: "[4px]", - borderStyle: "solid", - borderColor: "system.error", - filter: "[drop-shadow(0px_0px_2px_rgba(0,0,0,0.1))]", - bg: "system.error-secondary", - flexShrink: "0", - }), -}; + }, + variants: { + size: { + sm: { w: "[157px]", h: "[192px]" }, + lg: { w: "[367px]", h: "[426px]" }, + }, + type: { + preview: { + overflow: "hidden", + borderColor: "[#BCBAB8]", + boxShadow: "[0px_0px_4px_rgba(0,0,0,0.1)]", + bg: "bg.secondary", + }, + "preview-loading": { + display: "flex", + alignItems: "center", + justifyContent: "center", + borderColor: "[#BCBAB8]", + boxShadow: "[0px_0px_4px_rgba(0,0,0,0.1)]", + bg: "bg.secondary", + }, + "preview-error": { + overflow: "hidden", + borderColor: "system.error", + boxShadow: "[0px_0px_4px_rgba(0,0,0,0.1)]", + bg: "bg.secondary", + }, + "document-ok": { + display: "flex", + alignItems: "center", + justifyContent: "center", + borderColor: "[#BCBAB8]", + filter: "[drop-shadow(0px_0px_2px_rgba(0,0,0,0.1))]", + bg: "bg.primary", + }, + "document-error": { + display: "flex", + alignItems: "center", + justifyContent: "center", + borderColor: "system.error", + filter: "[drop-shadow(0px_0px_2px_rgba(0,0,0,0.1))]", + bg: "system.error-secondary", + }, + }, + }, + defaultVariants: { size: "sm", type: "preview" }, +}); export function ArchiveView({ fileName = "Archivo 1.doc", type = "preview", + size = "sm", src, + selectable = true, selected = false, onSelect, className, }: ArchiveViewProps) { const isPreview = type === "preview" || type === "preview-error"; const isError = type === "preview-error" || type === "document-error"; + const isLoading = type === "preview-loading"; + const showCaption = size !== "lg"; return (
{/* Thumbnail / placeholder frame */} -
+
{isPreview && src && ( )} - {!isPreview && ( + {isLoading && } + {!isPreview && !isLoading && (
- {/* Filename */} -

- {fileName} -

+ {/* Filename — size="lg" pairs with a separate ArchiveRow instead. */} + {showCaption && ( +

keeps the UA default margin otherwise + textStyle: "label.md.default", + color: "text.default", + textAlign: "center", + w: "[109px]", + })} + > + {fileName} +

+ )} {/* Error message — Figma: 14px italic, two lines, constrained to card width. */} - {isError && ( + {showCaption && isError && (

Date: Tue, 21 Jul 2026 15:59:57 -0300 Subject: [PATCH 12/83] feat(archive-row): add horizontal file presentation MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Icon + title + description + optional leading/trailing action slots. Formalizes the file-info row from the single-document preview screen (Figma node 40002579:88220 — icon, filename, "N pag. - X mb", trailing Trash) and doubles as the row shape Voz a Texto's file list already uses (icon/play button, name, duration, delete), so both consumers can share one implementation. Actions are passed as fully-built elements — this component only places them. Also fixes the same missing margin reset bug (see previous commit) in FileDropZone's title/description

elements, caught while verifying ArchiveRow's title/description spacing against Figma. --- .../archives/ArchiveRow.stories.tsx | 110 ++++++++++++++++++ src/components/archives/ArchiveRow.tsx | 99 ++++++++++++++++ .../file-drop-zone/FileDropZone.tsx | 2 + 3 files changed, 211 insertions(+) create mode 100644 src/components/archives/ArchiveRow.stories.tsx create mode 100644 src/components/archives/ArchiveRow.tsx diff --git a/src/components/archives/ArchiveRow.stories.tsx b/src/components/archives/ArchiveRow.stories.tsx new file mode 100644 index 0000000..db1314a --- /dev/null +++ b/src/components/archives/ArchiveRow.stories.tsx @@ -0,0 +1,110 @@ +import type { Meta, StoryObj } from "@storybook/react"; +import { File, Play, Trash } from "phosphor-react"; +import { css } from "@/styled/css"; +import { Button } from "../button"; +import { ArchiveRow } from "./ArchiveRow"; +import { ArchiveView } from "./ArchiveView"; + +const meta = { + title: "Components/Archives/ArchiveRow", + component: ArchiveRow, + tags: ["autodocs"], + parameters: { layout: "padded" }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +function TrashButton() { + return ( + + ); +} + +/** Single-document preview file row (Figma node 40002579:88220) — no leading action. */ +export const Default: Story = { + args: { + icon: , + title: "Archivonombrelargolarguisimo.doc", + description: "11 pag. - 21.5 mb", + trailingAction: , + }, + render: (args) => ( +

+ +
+ ), +}; + +/** Voz a Texto file list — leading play button + trailing delete. */ +export const WithLeadingAction: Story = { + args: { + icon: , + title: "audiencia.wav", + description: "11 seg. · 344 kb", + leadingAction: ( + + ), + trailingAction: , + }, + render: (args) => ( +
+ +
+ ), +}; + +/** Long filenames ellipsize instead of pushing the trailing action out. */ +export const LongTitle: Story = { + args: { + icon: , + title: "Un-nombre-de-archivo-extremadamente-largo-que-no-entra.docx", + description: "34 pag. - 8.1 mb", + trailingAction: , + }, + render: (args) => ( +
+ +
+ ), +}; + +/** + * Full single-document preview composition: `ArchiveView size="lg"` stacked + * above `ArchiveRow` — the outer card/title chrome stays in desktop-app. + */ +export const DocumentPreviewComposition: Story = { + render: () => ( +
+ + } + title="Archivonombrelargolarguisimo.doc" + description="11 pag. - 21.5 mb" + trailingAction={} + /> +
+ ), +}; diff --git a/src/components/archives/ArchiveRow.tsx b/src/components/archives/ArchiveRow.tsx new file mode 100644 index 0000000..49f1d5d --- /dev/null +++ b/src/components/archives/ArchiveRow.tsx @@ -0,0 +1,99 @@ +import type { ReactNode } from "react"; +import { css, cx } from "@/styled/css"; + +/** + * ArchiveRow — horizontal file presentation: icon, title, description, and + * optional leading/trailing actions (e.g. a play button, a delete button). + * + * Formalizes the file-info row from the single-document preview screen + * (Figma node 40002579:88220, frame "Frame 1244833316" — icon container + + * title/description + trailing Trash) and doubles as the row shape Voz a + * Texto already uses for its file list (icon/play button + name + duration + * + delete), so both consumers share one implementation. + * + * Actions are passed as fully-built elements (e.g. ``) — this component only places them, + * it doesn't know what they do. + */ + +const iconContainer = css({ + display: "flex", + alignItems: "center", + justifyContent: "center", + w: "[40px]", + h: "[40px]", + p: "2", // 8px + rounded: "md", + bg: "bg.primary-alternative", + color: "text.default", + flexShrink: "0", + "& svg": { w: "full", h: "full" }, +}); + +const content = css({ + display: "flex", + flexDir: "column", + gap: "[2px]", + flex: "1", + minW: "[0px]", +}); + +const titleStyle = css({ + margin: "0", // no preflight —

keeps the UA default margin otherwise + textStyle: "label.md.default", + color: "text.default", + whiteSpace: "nowrap", + overflow: "hidden", + textOverflow: "ellipsis", +}); + +const descriptionStyle = css({ + margin: "0", + textStyle: "subtitle.sm.default", + color: "text.lighter", + whiteSpace: "nowrap", + overflow: "hidden", + textOverflow: "ellipsis", +}); + +export interface ArchiveRowProps { + icon: ReactNode; + title: string; + description: string; + leadingAction?: ReactNode; + trailingAction?: ReactNode; + className?: string; +} + +export function ArchiveRow({ + icon, + title, + description, + leadingAction, + trailingAction, + className, +}: ArchiveRowProps) { + return ( +

+ {leadingAction} + {icon} +
+

{title}

+

{description}

+
+ {trailingAction} +
+ ); +} + +export default ArchiveRow; diff --git a/src/components/file-drop-zone/FileDropZone.tsx b/src/components/file-drop-zone/FileDropZone.tsx index 4b4114c..c167ec3 100644 --- a/src/components/file-drop-zone/FileDropZone.tsx +++ b/src/components/file-drop-zone/FileDropZone.tsx @@ -83,6 +83,7 @@ const iconContainer = cva({ }); const titleStyle = css({ + margin: "0", // no preflight —

keeps the UA default margin otherwise textStyle: "subtitle.md.default", color: "text.default", textAlign: "center", @@ -91,6 +92,7 @@ const titleStyle = css({ }); const descriptionStyle = css({ + margin: "0", textStyle: "subtitle.sm.default", color: "text.lighter", textAlign: "center", From 9198efbbcc8a89316458e2369d19572c7437f1a6 Mon Sep 17 00:00:00 2001 From: jansaldo Date: Tue, 21 Jul 2026 16:14:35 -0300 Subject: [PATCH 13/83] fix: reset margin on remaining unreset

/

elements MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Sweeps the rest of the library for the same bug found and fixed in ArchiveRow/ArchiveView/FileDropZone: no preflight means any

/ without an explicit margin:"0" keeps the browser's UA default margin on top of the component's intended gap. - CardTool: title (

) + description (

), 4px gap. - SidePanel: card title, section headings, and the merge-conflict confirm dialog's title + description. - TranscriptBlock: transcript body — visible as accumulating extra whitespace between every turn in a scrolling transcript. - TextField: helper and error message text. Verified each visually in Storybook against its previous (broken) spacing. --- src/components/card-tool/CardTool.tsx | 6 +++++- src/components/side-panel/SidePanel.tsx | 4 ++++ src/components/text-field/TextField.tsx | 2 ++ src/components/transcript-block/TranscriptBlock.tsx | 1 + 4 files changed, 12 insertions(+), 1 deletion(-) diff --git a/src/components/card-tool/CardTool.tsx b/src/components/card-tool/CardTool.tsx index 01875ba..c0e777c 100644 --- a/src/components/card-tool/CardTool.tsx +++ b/src/components/card-tool/CardTool.tsx @@ -37,8 +37,12 @@ const copy = css({ minW: "0", }); -const titleStyle = css({ textStyle: "subtitle.md.strong" }); +const titleStyle = css({ + margin: "0", // no preflight —

/

keep the UA default margin otherwise + textStyle: "subtitle.md.strong", +}); const descriptionStyle = css({ + margin: "0", textStyle: "subtitle.sm.default", color: "text.lighter", }); diff --git a/src/components/side-panel/SidePanel.tsx b/src/components/side-panel/SidePanel.tsx index f36f13a..86fdba6 100644 --- a/src/components/side-panel/SidePanel.tsx +++ b/src/components/side-panel/SidePanel.tsx @@ -134,6 +134,7 @@ const card = css({ }); const cardTitle = css({ + margin: "0", // no preflight —

keeps the UA default margin otherwise textStyle: "subtitle.sm.default", color: "text.default", }); @@ -150,6 +151,7 @@ const turnTime = css({ }); const sectionHeading = css({ + margin: "0", textStyle: "subtitle.md.strong", // Archivo SemiBold 20px color: "text.default", }); @@ -171,10 +173,12 @@ const divider = css({ // Confirm modal (Figma "Conflicto Nombre etiqueta", node 40002384:38487): // title + description + Combinar/Cancelar, centered over a full-screen overlay. const confirmTitle = css({ + margin: "0", textStyle: "subtitle.md.strong", color: "text.default", }); const confirmDescription = css({ + margin: "0", textStyle: "subtitle.sm.default", color: "text.default", }); diff --git a/src/components/text-field/TextField.tsx b/src/components/text-field/TextField.tsx index db943fc..4903b09 100644 --- a/src/components/text-field/TextField.tsx +++ b/src/components/text-field/TextField.tsx @@ -61,11 +61,13 @@ const input = sva({ }, label: { textStyle: "label.sm.default", color: "text.lighter" }, errorMessage: { + margin: "0", // no preflight —

keeps the UA default margin otherwise ...hstack.raw({ gap: "1" }), textStyle: "label.sm.default", color: "system.error", }, helper: { + margin: "0", textStyle: "label.sm.default", color: "text.lighter", }, diff --git a/src/components/transcript-block/TranscriptBlock.tsx b/src/components/transcript-block/TranscriptBlock.tsx index db10d14..8c8bb83 100644 --- a/src/components/transcript-block/TranscriptBlock.tsx +++ b/src/components/transcript-block/TranscriptBlock.tsx @@ -76,6 +76,7 @@ const timestamp = css({ const transcriptBody = cva({ base: { + margin: "0", // no preflight —

keeps the UA default margin otherwise fontFamily: "primary", // Archivo fontWeight: "[300]", // Light fontSize: "[16px]", From eac5d0b721edf02083d925f1d8e544b2a979010e Mon Sep 17 00:00:00 2001 From: jansaldo Date: Tue, 21 Jul 2026 16:22:10 -0300 Subject: [PATCH 14/83] feat(tutorial): add responsive tutorial grid MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit No Figma frame documents this; it formalizes desktop-app's own HowItWorks/Card (used in every pipeline's "¿Cómo funciona?" modal) — same 200x130 image, numbered badge, and card chrome. Adds the responsiveness the plan calls for that the original never had: two columns by default, one column on narrow windows. No i18next — image, alt text, title and description all come from the consumer; the step number is derived from each step's position. --- .../tutorial/TutorialGrid.stories.tsx | 57 +++++++++ src/components/tutorial/TutorialGrid.tsx | 114 ++++++++++++++++++ src/components/tutorial/index.ts | 10 ++ src/index.ts | 1 + 4 files changed, 182 insertions(+) create mode 100644 src/components/tutorial/TutorialGrid.stories.tsx create mode 100644 src/components/tutorial/TutorialGrid.tsx create mode 100644 src/components/tutorial/index.ts diff --git a/src/components/tutorial/TutorialGrid.stories.tsx b/src/components/tutorial/TutorialGrid.stories.tsx new file mode 100644 index 0000000..db8c050 --- /dev/null +++ b/src/components/tutorial/TutorialGrid.stories.tsx @@ -0,0 +1,57 @@ +import type { Meta, StoryObj } from "@storybook/react"; +import { TutorialGrid } from "./TutorialGrid"; + +function placeholder(label: string) { + const svg = ` + + ${label} + `; + return `data:image/svg+xml,${encodeURIComponent(svg)}`; +} + +const STEPS = [ + { + image: placeholder("Paso 1"), + imageAlt: "Selecciona un archivo", + title: "Selecciona un archivo", + description: "Elegí el documento que querés procesar desde tu equipo.", + }, + { + image: placeholder("Paso 2"), + imageAlt: "Revisá la vista previa", + title: "Revisá la vista previa", + description: "Confirmá que el contenido se haya cargado correctamente.", + }, + { + image: placeholder("Paso 3"), + imageAlt: "Procesá el documento", + title: "Procesá el documento", + description: "AymurAI analiza el archivo y prepara los resultados.", + }, + { + image: placeholder("Paso 4"), + imageAlt: "Descargá el resultado", + title: "Descargá el resultado", + description: "Guardá el archivo final en tu equipo.", + }, +]; + +const meta = { + title: "Components/Tutorial/TutorialGrid", + component: TutorialGrid, + tags: ["autodocs"], + args: { steps: STEPS }, + parameters: { layout: "padded" }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const Default: Story = {}; + +export const TwoSteps: Story = { args: { steps: STEPS.slice(0, 2) } }; + +/** Narrow viewport — collapses to a single column (media-query driven, resize to see it). */ +export const NarrowViewport: Story = { + parameters: { viewport: { defaultViewport: "mobile1" } }, +}; diff --git a/src/components/tutorial/TutorialGrid.tsx b/src/components/tutorial/TutorialGrid.tsx new file mode 100644 index 0000000..c6a9575 --- /dev/null +++ b/src/components/tutorial/TutorialGrid.tsx @@ -0,0 +1,114 @@ +import { css, cx } from "@/styled/css"; + +/** + * TutorialGrid — responsive grid of "how it works" step cards. + * + * No Figma frame documents this; it formalizes desktop-app's own + * `HowItWorks`/`Card` (a fixed 2-column, non-responsive grid used inside + * the "¿Cómo funciona?" modal in every pipeline) — same image size (200×130, + * object-fit contain), numbered badge, and card chrome. What's new here is + * the responsive column count the plan calls for: desktop-app's original + * never collapsed to one column on narrow windows. + * + * No i18next — image, alt text, title and description all come from the + * consumer; the step number is derived from each step's position. + */ + +export interface TutorialStep { + image: string; + imageAlt: string; + title: string; + description: string; +} + +export interface TutorialGridProps { + steps: TutorialStep[]; + className?: string; +} + +const grid = css({ + display: "grid", + gridTemplateColumns: { base: "1fr", md: "repeat(2, 1fr)" }, + gap: "6", // 24px + w: "full", +}); + +const card = css({ + display: "flex", + alignItems: "center", + gap: "4", // 16px + bg: "bg.secondary", + border: "primary", + rounded: "sm", + px: "4", // 16px + py: "6", // 24px + h: "full", // equal height within a row +}); + +const image = css({ + w: "[200px]", + h: "[130px]", + objectFit: "contain", + flexShrink: "0", +}); + +const stepAndCopy = css({ + display: "flex", + flexDir: "column", + gap: "4", // 16px + minW: "[0px]", +}); + +const stepBadge = css({ + margin: "0", // no preflight —

keeps the UA default margin otherwise + display: "flex", + alignItems: "center", + justifyContent: "center", + w: "9", // 36px + h: "9", + flexShrink: "0", + bg: "action.alt-default", + color: "text.onbutton-alternative", + rounded: "full", + textStyle: "cta.md.strong", +}); + +const copy = css({ + display: "flex", + flexDir: "column", + gap: "1", // 4px + minW: "[0px]", +}); + +const titleStyle = css({ + margin: "0", + textStyle: "paragraph.sm.strong", + color: "text.default", +}); + +const descriptionStyle = css({ + margin: "0", + textStyle: "subtitle.sm.default", + color: "text.lighter", +}); + +export function TutorialGrid({ steps, className }: TutorialGridProps) { + return ( +

+ {steps.map((step, index) => ( +
+ {step.imageAlt} +
+

{index + 1}

+
+

{step.title}

+

{step.description}

+
+
+
+ ))} +
+ ); +} + +export default TutorialGrid; diff --git a/src/components/tutorial/index.ts b/src/components/tutorial/index.ts new file mode 100644 index 0000000..3430849 --- /dev/null +++ b/src/components/tutorial/index.ts @@ -0,0 +1,10 @@ +export { + default, + TutorialDialog, + type TutorialDialogProps, +} from "./TutorialDialog"; +export { + TutorialGrid, + type TutorialGridProps, + type TutorialStep, +} from "./TutorialGrid"; diff --git a/src/index.ts b/src/index.ts index f146ed7..c941dbc 100644 --- a/src/index.ts +++ b/src/index.ts @@ -53,5 +53,6 @@ export * from "./components/tool-button"; export * from "./components/toolbar"; export * from "./components/tooltip"; export * from "./components/transcript-block"; +export * from "./components/tutorial"; // Utils export * from "./utils/timestamp"; From a30a9c0bb0d2465a30758e37b8e68d6bb5d1dadb Mon Sep 17 00:00:00 2001 From: jansaldo Date: Tue, 21 Jul 2026 16:22:10 -0300 Subject: [PATCH 15/83] feat(tutorial): add tutorial dialog MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Composes TutorialGrid over DialogContent size="lg", so it inherits the viewport-bound width that replaced desktop-app's minWidth:900px + maxW:5xl! hack for this exact screen. Every pipeline (Dataset, Anonimizador, Voz a Texto) can share this one dialog — only title, steps and trigger differ per consumer. --- .../tutorial/TutorialDialog.stories.tsx | 80 +++++++++++++++++++ src/components/tutorial/TutorialDialog.tsx | 71 ++++++++++++++++ 2 files changed, 151 insertions(+) create mode 100644 src/components/tutorial/TutorialDialog.stories.tsx create mode 100644 src/components/tutorial/TutorialDialog.tsx diff --git a/src/components/tutorial/TutorialDialog.stories.tsx b/src/components/tutorial/TutorialDialog.stories.tsx new file mode 100644 index 0000000..063a00c --- /dev/null +++ b/src/components/tutorial/TutorialDialog.stories.tsx @@ -0,0 +1,80 @@ +import type { Meta, StoryObj } from "@storybook/react"; +import { css } from "@/styled/css"; +import { Button } from "../button"; +import { TutorialDialog } from "./TutorialDialog"; + +function placeholder(label: string) { + const svg = ` + + ${label} + `; + return `data:image/svg+xml,${encodeURIComponent(svg)}`; +} + +const STEPS = [ + { + image: placeholder("Paso 1"), + imageAlt: "Selecciona un archivo", + title: "Selecciona un archivo", + description: "Elegí el documento que querés procesar desde tu equipo.", + }, + { + image: placeholder("Paso 2"), + imageAlt: "Revisá la vista previa", + title: "Revisá la vista previa", + description: "Confirmá que el contenido se haya cargado correctamente.", + }, + { + image: placeholder("Paso 3"), + imageAlt: "Procesá el documento", + title: "Procesá el documento", + description: "AymurAI analiza el archivo y prepara los resultados.", + }, + { + image: placeholder("Paso 4"), + imageAlt: "Descargá el resultado", + title: "Descargá el resultado", + description: "Guardá el archivo final en tu equipo.", + }, +]; + +const meta = { + title: "Components/Tutorial/TutorialDialog", + component: TutorialDialog, + args: { + title: "¿Cómo funciona?", + steps: STEPS, + trigger: ( + + ), + }, + parameters: { layout: "centered" }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const Default: Story = {}; + +/** Same dialog, opened from an icon-only trigger — matches the "?" button in AppHeader. */ +export const IconTrigger: Story = { + args: { + trigger: ( + + ), + }, +}; diff --git a/src/components/tutorial/TutorialDialog.tsx b/src/components/tutorial/TutorialDialog.tsx new file mode 100644 index 0000000..751585e --- /dev/null +++ b/src/components/tutorial/TutorialDialog.tsx @@ -0,0 +1,71 @@ +import { X } from "phosphor-react"; +import type { ReactNode } from "react"; +import { css } from "@/styled/css"; +import { + Dialog, + DialogClose, + DialogContent, + DialogHeader, + DialogTitle, + DialogTrigger, +} from "../dialog"; +import { TutorialGrid, type TutorialStep } from "./TutorialGrid"; + +/** + * TutorialDialog — "¿Cómo funciona?" modal, composed over + * `DialogContent size="lg"` (see Dialog.tsx) so it inherits the + * viewport-bound width that replaced desktop-app's `minWidth:900px` + + * `maxW:5xl!` hack for this exact screen. + * + * Every pipeline (Dataset, Anonimizador, Voz a Texto) shares this same + * dialog; only `title`, `steps` and `trigger` differ per consumer. + */ + +const closeButton = css({ + display: "flex", + alignItems: "center", + justifyContent: "center", + color: "text.lighter", + borderWidth: "0", + bg: "[transparent]", + cursor: "pointer", + "&:hover": { color: "text.default" }, +}); + +const titleStyle = css({ + margin: "0", + textStyle: "subtitle.md.strong", +}); + +export interface TutorialDialogProps { + /** Element that opens the dialog when clicked (e.g. a Button or icon button). */ + trigger: ReactNode; + title: string; + steps: TutorialStep[]; + /** Accessible label for the close (X) button. */ + closeLabel?: string; +} + +export function TutorialDialog({ + trigger, + title, + steps, + closeLabel = "Cerrar", +}: TutorialDialogProps) { + return ( + + {trigger} + + + {title} + + + + + + + + ); +} + +export default TutorialDialog; From 1f2d8a434652cf3df3a1b9a0708e2ea1b8900fd0 Mon Sep 17 00:00:00 2001 From: jansaldo Date: Tue, 21 Jul 2026 16:56:07 -0300 Subject: [PATCH 16/83] feat(app-footer): add application footer shell MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit AymurAI UI Library "bar" node 40002579:88245 (bottom bar of the "Anonimizador - Preview" screen) — border-top, bg.secondary, 48px/24px padding, leading/actions slots via justify-content:space-between. leading and actions are pre-built content (desktop-app keeps BuiltBy, since DataGénero branding belongs to the product, not the library). Adds flexWrap + ml:"auto" on the actions slot so it stays right-aligned even when it wraps onto its own line on narrow windows — same pattern already used in Toolbar. mt:"auto" pushes the footer to the bottom when it's the last child of a flex-column page wrapper (the standard sticky-footer pattern); the library can't force this without owning the whole page's layout. --- .../app-footer/AppFooter.stories.tsx | 95 +++++++++++++++++++ src/components/app-footer/AppFooter.tsx | 74 +++++++++++++++ src/components/app-footer/index.ts | 1 + src/index.ts | 1 + 4 files changed, 171 insertions(+) create mode 100644 src/components/app-footer/AppFooter.stories.tsx create mode 100644 src/components/app-footer/AppFooter.tsx create mode 100644 src/components/app-footer/index.ts diff --git a/src/components/app-footer/AppFooter.stories.tsx b/src/components/app-footer/AppFooter.stories.tsx new file mode 100644 index 0000000..f833abf --- /dev/null +++ b/src/components/app-footer/AppFooter.stories.tsx @@ -0,0 +1,95 @@ +import type { Meta, StoryObj } from "@storybook/react"; +import { css } from "@/styled/css"; +import { Button } from "../button"; +import { AppFooter } from "./AppFooter"; + +const meta = { + title: "Components/AppFooter", + component: AppFooter, + parameters: { layout: "fullscreen" }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +/** Stand-in for desktop-app's own `BuiltBy` — DataGénero branding stays there. */ +function BuiltByPlaceholder() { + return ( +
+ + Plataforma hecha por + + + datagénero + +
+ ); +} + +export const Default: Story = { + args: { + leading: , + actions: , + }, +}; + +export const TwoActions: Story = { + args: { + leading: , + actions: ( + <> + + + + ), + }, +}; + +export const NoLeading: Story = { + args: { actions: }, +}; + +/** Narrow viewport — actions wrap onto their own line, still right-aligned. */ +export const NarrowViewport: Story = { + args: { + leading: , + actions: ( + <> + + + + ), + }, + parameters: { viewport: { defaultViewport: "mobile1" } }, +}; + +/** Sticky-footer pattern: last child of a flex column page wrapper. */ +export const StickyToBottom: Story = { + render: (args) => ( +
+
Contenido de la página (corto).
+ +
+ ), + args: { + leading: , + actions: , + }, +}; diff --git a/src/components/app-footer/AppFooter.tsx b/src/components/app-footer/AppFooter.tsx new file mode 100644 index 0000000..5d4e140 --- /dev/null +++ b/src/components/app-footer/AppFooter.tsx @@ -0,0 +1,74 @@ +import type { HTMLAttributes, ReactNode } from "react"; +import { css, cx } from "@/styled/css"; + +/** + * AppFooter — bottom bar shared across every pipeline (Dataset, Anonimizador, + * Voz a Texto). AymurAI UI Library "bar" node 40002579:88245 (bottom bar of + * the "Anonimizador - Preview" screen). + * + * `leading` and `actions` are pre-built content — the library only owns the + * shell (height, border, background, padding, slot placement, wrapping). + * `leading` is desktop-app's `BuiltBy` (DataGénero branding belongs to the + * product, not the library); `actions` is usually one or two `Button`s. + * + * `mt: "auto"` pushes the footer to the bottom when it's the last child of + * a `display:flex; flexDirection:column; minH:100vh` page wrapper (the + * standard sticky-footer pattern) — the library can't force this on its + * own without controlling the whole page. + */ + +const root = css({ + display: "flex", + alignItems: "center", + justifyContent: "space-between", + flexWrap: "wrap", + gap: "4", // 16px — matches the Figma gap between leading/actions when they fit on one line + minH: "[99px]", + px: "12", // 48px + py: "6", // 24px + bg: "bg.secondary", + borderTopWidth: "[1px]", + borderTopStyle: "solid", + borderTopColor: "[#BCBAB8]", // border.primary colour, no bare token + w: "full", + flexShrink: "0", + mt: "auto", +}); + +const leadingWrap = css({ + display: "flex", + alignItems: "center", + minW: "[0px]", +}); + +const actionsWrap = css({ + display: "flex", + alignItems: "center", + gap: "4", // 16px + flexWrap: "wrap", + justifyContent: "flex-end", + // Keeps actions right-aligned even when they wrap onto their own line; + // a no-op when `root` still has room to lay both slots out side by side. + ml: "auto", +}); + +export interface AppFooterProps extends HTMLAttributes { + leading?: ReactNode; + actions?: ReactNode; +} + +export function AppFooter({ + leading, + actions, + className, + ...props +}: AppFooterProps) { + return ( +
+ {leading &&
{leading}
} + {actions &&
{actions}
} +
+ ); +} + +export default AppFooter; diff --git a/src/components/app-footer/index.ts b/src/components/app-footer/index.ts new file mode 100644 index 0000000..fee4808 --- /dev/null +++ b/src/components/app-footer/index.ts @@ -0,0 +1 @@ +export { AppFooter, type AppFooterProps, default } from "./AppFooter"; diff --git a/src/index.ts b/src/index.ts index c941dbc..371daed 100644 --- a/src/index.ts +++ b/src/index.ts @@ -10,6 +10,7 @@ * so there are no default-export collisions.) */ +export * from "./components/app-footer"; export * from "./components/app-header"; // Archives export * from "./components/archives"; From d4044ac895f891c9ff8e0b3687631c34d8615ebf Mon Sep 17 00:00:00 2001 From: jansaldo Date: Tue, 21 Jul 2026 18:00:22 -0300 Subject: [PATCH 17/83] feat(features-menu): add FeaturesMenu and FeaturesMenuItem MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit AymurAI UI Library "Menu" node 40000732:79289 (the header's apps dropdown) — until now fully desktop-side and inconsistent: the home grid used CardTool (4px card / 14px icon-box radius) while the header dropdown used a bespoke Card+local-FeatureIcon composition (16px/16px). Neither matched Figma, which specs 8px uniformly for both. FeaturesMenuItem: icon + label only (no description — a distinct, smaller card than CardTool), disabled styling follows Card's convention for the outer card and CardTool's for the icon box. `fullWidth` spans both columns for a trailing item, e.g. desktop-app's "Configuración" row — no Figma reference for that one, kept anyway since desktop needs it; the item is generic enough to not care. FeaturesMenu: just the grid chrome (bg, padding, radius, a new "menu" shadow token pixel-matched to Figma) — children are individual FeaturesMenuItems, wired up by the consumer (onClick/router navigation), matching the CardTool convention of leaving navigation to desktop. Verified it drops into a real Popover without doubling up the Popover's own chrome (override via className/style, same technique as elsewhere in this library). Left out of scope per product: the mocked-up "PDF a Word" item — not a real feature yet. --- .../features-menu/FeaturesMenu.stories.tsx | 84 +++++++++++++ src/components/features-menu/FeaturesMenu.tsx | 34 +++++ .../features-menu/FeaturesMenuItem.tsx | 118 ++++++++++++++++++ src/components/features-menu/index.ts | 5 + src/index.ts | 1 + src/preset.ts | 1 + 6 files changed, 243 insertions(+) create mode 100644 src/components/features-menu/FeaturesMenu.stories.tsx create mode 100644 src/components/features-menu/FeaturesMenu.tsx create mode 100644 src/components/features-menu/FeaturesMenuItem.tsx create mode 100644 src/components/features-menu/index.ts diff --git a/src/components/features-menu/FeaturesMenu.stories.tsx b/src/components/features-menu/FeaturesMenu.stories.tsx new file mode 100644 index 0000000..3aec30c --- /dev/null +++ b/src/components/features-menu/FeaturesMenu.stories.tsx @@ -0,0 +1,84 @@ +import type { Meta, StoryObj } from "@storybook/react"; +import { Article, Database, Detective, FileAudio, Gear } from "phosphor-react"; +import { Popover, PopoverContent, PopoverTrigger } from "../popover"; +import { FeaturesMenu } from "./FeaturesMenu"; +import { FeaturesMenuItem } from "./FeaturesMenuItem"; + +const meta = { + title: "Components/FeaturesMenu", + component: FeaturesMenu, + tags: ["autodocs"], + parameters: { layout: "padded" }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +/** The three real pipelines, plus the "Resumen" placeholder — not yet released. */ +export const Default: Story = { + render: () => ( + + } label="Set de Datos" /> + } label="Anonimizador" /> + } label="Voz a Texto" /> + } label="Resumen" disabled /> + + ), +}; + +/** + * The real header dropdown: three pipelines + "Configuración" (no Figma + * reference for this row — desktop-app-only, kept because it's needed). + */ +export const WithSettings: Story = { + render: () => ( + + } label="Set de Datos" /> + } label="Anonimizador" /> + } label="Voz a Texto" /> + } + label="Configuración" + fullWidth + /> + + ), +}; + +/** Anchored inside a real Popover — overrides Popover's own bg/radius/shadow/padding so the two don't double up. */ +export const InsidePopover: Story = { + render: () => ( + + + + + + + } + label="Set de Datos" + /> + } + label="Anonimizador" + /> + } + label="Voz a Texto" + /> + } + label="Configuración" + fullWidth + /> + + + + ), +}; diff --git a/src/components/features-menu/FeaturesMenu.tsx b/src/components/features-menu/FeaturesMenu.tsx new file mode 100644 index 0000000..733bb3a --- /dev/null +++ b/src/components/features-menu/FeaturesMenu.tsx @@ -0,0 +1,34 @@ +import type { HTMLAttributes } from "react"; +import { css, cx } from "@/styled/css"; + +/** + * FeaturesMenu — the grid chrome for a set of {@link FeaturesMenuItem}s. + * AymurAI UI Library "Menu" node 40000732:79289. + * + * Two columns, matching Figma exactly — this is sized for a small anchored + * popover, not a full-page layout, so it doesn't need to reflow at + * viewport breakpoints the way a page-level grid would. + * + * Purely a container: place ``s (optionally wrapped in + * the consumer's own router link/onClick) as children. A trailing item + * that doesn't share its row (e.g. "Configuración") uses + * `` to span both columns. + */ + +const grid = css({ + display: "grid", + gridTemplateColumns: "[repeat(2,140px)]", + gap: "2", // 8px + bg: "bg.primary", + rounded: "md", // 8px + p: "4", // 16px + boxShadow: "menu", +}); + +export interface FeaturesMenuProps extends HTMLAttributes {} + +export function FeaturesMenu({ className, ...props }: FeaturesMenuProps) { + return
; +} + +export default FeaturesMenu; diff --git a/src/components/features-menu/FeaturesMenuItem.tsx b/src/components/features-menu/FeaturesMenuItem.tsx new file mode 100644 index 0000000..e3a4c97 --- /dev/null +++ b/src/components/features-menu/FeaturesMenuItem.tsx @@ -0,0 +1,118 @@ +import type { ReactNode } from "react"; +import { css, cva, cx } from "@/styled/css"; + +/** + * FeaturesMenuItem — a single entry in {@link FeaturesMenu}: icon + label, + * no description. AymurAI UI Library "Menu" node 40000732:79289 ("item + * menu" sub-frame). + * + * Figma specs this label in Inter SemiBold — every other text style in this + * library is Archivo. Kept on the shared `label.md.strong` token (Archivo) + * instead, for visual consistency with the rest of the app; treated as a + * likely Figma inconsistency rather than a deliberate exception. + * + * Disabled styling mirrors {@link Card}'s convention (bg.primary/text.lighter + * on the card) plus {@link CardTool}'s icon-box convention (bg.secondary/ + * text.lighter) — this is a distinct, smaller card shape from both, but + * reuses their established disabled treatment for consistency. + */ + +const item = cva({ + base: { + display: "flex", + flexDir: "column", + alignItems: "center", + justifyContent: "center", + gap: "3", // 12px + w: "full", + bg: "bg.secondary", + border: "primary", + rounded: "md", // 8px + p: "4", // 16px + cursor: "pointer", + transitionProperty: "[border, box-shadow]", + transitionDuration: "normal", + transitionTimingFunction: "default", + "&:hover:enabled": { + border: "primary-alt", + boxShadow: "card-hover", + }, + "&:focus-visible:enabled": { + outline: "primary-alt", + outlineWidth: "[2px]", + boxShadow: "focus", + }, + "&:disabled": { + cursor: "not-allowed", + bg: "bg.primary", + color: "text.lighter", + }, + }, + variants: { + fullWidth: { + true: { gridColumn: "1 / -1" }, + false: {}, + }, + }, + defaultVariants: { fullWidth: false }, +}); + +const iconContainer = cva({ + base: { + display: "flex", + alignItems: "center", + justifyContent: "center", + w: "[40px]", + h: "[40px]", + p: "2", // 8px + rounded: "md", // 8px + flexShrink: "0", + "& svg": { w: "full", h: "full" }, + }, + variants: { + disabled: { + true: { bg: "bg.secondary", color: "text.lighter" }, + false: { bg: "bg.primary-alternative", color: "text.default" }, + }, + }, + defaultVariants: { disabled: false }, +}); + +const label = css({ + margin: "0", // no preflight —

keeps the UA default margin otherwise + textStyle: "label.md.strong", + whiteSpace: "nowrap", +}); + +export interface FeaturesMenuItemProps { + icon: ReactNode; + label: string; + disabled?: boolean; + /** Spans both grid columns — e.g. a trailing "Configuración" row. */ + fullWidth?: boolean; + onClick?: () => void; + className?: string; +} + +export function FeaturesMenuItem({ + icon, + label: labelText, + disabled = false, + fullWidth = false, + onClick, + className, +}: FeaturesMenuItemProps) { + return ( + + ); +} + +export default FeaturesMenuItem; diff --git a/src/components/features-menu/index.ts b/src/components/features-menu/index.ts new file mode 100644 index 0000000..8375913 --- /dev/null +++ b/src/components/features-menu/index.ts @@ -0,0 +1,5 @@ +export { default, FeaturesMenu, type FeaturesMenuProps } from "./FeaturesMenu"; +export { + FeaturesMenuItem, + type FeaturesMenuItemProps, +} from "./FeaturesMenuItem"; diff --git a/src/index.ts b/src/index.ts index 371daed..06ffec1 100644 --- a/src/index.ts +++ b/src/index.ts @@ -30,6 +30,7 @@ export * from "./components/category-item"; export * from "./components/check-circle"; export * from "./components/checkbox"; export * from "./components/dialog"; +export * from "./components/features-menu"; export * from "./components/file-drop-zone"; export * from "./components/logo"; // Voz a texto (speech-to-text) diff --git a/src/preset.ts b/src/preset.ts index 2409e97..e1c5f2f 100644 --- a/src/preset.ts +++ b/src/preset.ts @@ -64,6 +64,7 @@ export const aymuraiPreset = definePreset({ dropdown: { value: "0px 16px 16px rgba(0, 0, 0, 0.08)" }, "card-hover": { value: "0px 0px 7.5px rgba(63, 71, 157, 0.4)" }, tooltip: { value: "0px 4px 8px rgba(0, 0, 0, 0.1)" }, + menu: { value: "0px 0px 7.5px rgba(0, 0, 0, 0.15)" }, // Dialog/Popover have no Figma node yet — tokenised at current values. dialog: { value: "0px 4px 8px rgba(0, 0, 0, 0.1)" }, popover: { value: "0px 0px 15px 0px #00000026" }, From 403af30a5c208775d223cec27e83cfb84c7201b8 Mon Sep 17 00:00:00 2001 From: jansaldo Date: Tue, 21 Jul 2026 20:00:50 -0300 Subject: [PATCH 18/83] fix(archives): allow ArchiveRow without an icon --- .../archives/ArchiveRow.stories.tsx | 2 +- src/components/archives/ArchiveRow.tsx | 43 +++++++++++++------ 2 files changed, 30 insertions(+), 15 deletions(-) diff --git a/src/components/archives/ArchiveRow.stories.tsx b/src/components/archives/ArchiveRow.stories.tsx index db1314a..2a5625d 100644 --- a/src/components/archives/ArchiveRow.stories.tsx +++ b/src/components/archives/ArchiveRow.stories.tsx @@ -46,7 +46,7 @@ export const Default: Story = { /** Voz a Texto file list — leading play button + trailing delete. */ export const WithLeadingAction: Story = { args: { - icon: , + variant: "outlined", title: "audiencia.wav", description: "11 seg. · 344 kb", leadingAction: ( diff --git a/src/components/archives/ArchiveRow.tsx b/src/components/archives/ArchiveRow.tsx index 49f1d5d..07575de 100644 --- a/src/components/archives/ArchiveRow.tsx +++ b/src/components/archives/ArchiveRow.tsx @@ -1,5 +1,5 @@ import type { ReactNode } from "react"; -import { css, cx } from "@/styled/css"; +import { css, cva, cx } from "@/styled/css"; /** * ArchiveRow — horizontal file presentation: icon, title, description, and @@ -56,10 +56,34 @@ const descriptionStyle = css({ textOverflow: "ellipsis", }); +const root = cva({ + base: { + display: "flex", + alignItems: "center", + gap: "4", // 16px + w: "full", + }, + variants: { + variant: { + plain: {}, + outlined: { + p: "6", + rounded: "[8px]", + borderWidth: "[4px]", + borderStyle: "solid", + borderColor: "[#BCBAB8]", + bg: "bg.secondary", + }, + }, + }, + defaultVariants: { variant: "plain" }, +}); + export interface ArchiveRowProps { - icon: ReactNode; + icon?: ReactNode; title: string; description: string; + variant?: "plain" | "outlined"; leadingAction?: ReactNode; trailingAction?: ReactNode; className?: string; @@ -69,24 +93,15 @@ export function ArchiveRow({ icon, title, description, + variant = "plain", leadingAction, trailingAction, className, }: ArchiveRowProps) { return ( -

+
{leadingAction} - {icon} + {icon && {icon}}

{title}

{description}

From 331076bb026a532e55f86fa939a9df169ae0a4e0 Mon Sep 17 00:00:00 2001 From: jansaldo Date: Tue, 21 Jul 2026 22:13:26 -0300 Subject: [PATCH 19/83] fix(features-menu): keep the default cursor for disabled items --- src/components/features-menu/FeaturesMenuItem.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/features-menu/FeaturesMenuItem.tsx b/src/components/features-menu/FeaturesMenuItem.tsx index e3a4c97..bc17fe1 100644 --- a/src/components/features-menu/FeaturesMenuItem.tsx +++ b/src/components/features-menu/FeaturesMenuItem.tsx @@ -43,7 +43,7 @@ const item = cva({ boxShadow: "focus", }, "&:disabled": { - cursor: "not-allowed", + cursor: "default", bg: "bg.primary", color: "text.lighter", }, From 738f86347722e00174a68f05d9f1fd4583152ac7 Mon Sep 17 00:00:00 2001 From: jansaldo Date: Wed, 22 Jul 2026 11:35:02 -0300 Subject: [PATCH 20/83] feat(workflow): add shared workflow step layout --- README.md | 8 +- .../page-title/PageTitle.stories.tsx | 23 +++ src/components/page-title/PageTitle.tsx | 25 ++++ src/components/page-title/index.ts | 1 + .../WorkflowStepLayout.stories.tsx | 101 +++++++++++++ .../WorkflowStepLayout.tsx | 141 ++++++++++++++++++ src/components/workflow-step-layout/index.ts | 5 + src/index.ts | 2 + 8 files changed, 305 insertions(+), 1 deletion(-) create mode 100644 src/components/page-title/PageTitle.stories.tsx create mode 100644 src/components/page-title/PageTitle.tsx create mode 100644 src/components/page-title/index.ts create mode 100644 src/components/workflow-step-layout/WorkflowStepLayout.stories.tsx create mode 100644 src/components/workflow-step-layout/WorkflowStepLayout.tsx create mode 100644 src/components/workflow-step-layout/index.ts diff --git a/README.md b/README.md index 8732303..513803c 100644 --- a/README.md +++ b/README.md @@ -55,13 +55,19 @@ Inputs: `TextField`, `Search`, `Select`, `Checkbox`, `Radio`, `Switch`, `Suggestion` · Feedback: `Callout`, `Toast`, `Tooltip`, `Spinner`, `CheckCircle`, `Stepper` · Surfaces: `Card`, `CardTool`, `Dialog`, `Popover` · Chrome: `AppHeader`, `Toolbar`, `StatusBar`, `Tag`, `Logo` · Archives: `ArchiveProgress`, -`ArchiveTabs`, `ArchiveView`. +`ArchiveTabs`, `ArchiveView` · Workflow: `WorkflowStepLayout`, `PageTitle`, +`AppFooter`. `CardTool` owns the shared feature-card visuals, including its disabled state. Consumers keep navigation in their router: wrap enabled cards in a link and render disabled placeholders directly, so unavailable tools never become interactive elements. +`WorkflowStepLayout` owns the common viewport, content width and single-scroll +page structure. Consumers provide `AppHeader`, `AppFooter`, back controls and +page actions through its slots; routing, step state and domain logic remain in +the application. + Browse every component and variant in Storybook (`pnpm storybook`). ## Sharing tokens with a Panda app (optional) diff --git a/src/components/page-title/PageTitle.stories.tsx b/src/components/page-title/PageTitle.stories.tsx new file mode 100644 index 0000000..35348df --- /dev/null +++ b/src/components/page-title/PageTitle.stories.tsx @@ -0,0 +1,23 @@ +import type { Meta, StoryObj } from "@storybook/react"; +import { PageTitle } from "./PageTitle"; + +const meta = { + title: "Components/PageTitle", + component: PageTitle, + args: { + children: "1. Selección de archivo", + }, + parameters: { layout: "padded" }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const Default: Story = {}; + +export const LongTitle: Story = { + args: { + children: "Revisá y validá la información extraída del documento", + }, + parameters: { viewport: { defaultViewport: "mobile1" } }, +}; diff --git a/src/components/page-title/PageTitle.tsx b/src/components/page-title/PageTitle.tsx new file mode 100644 index 0000000..058685e --- /dev/null +++ b/src/components/page-title/PageTitle.tsx @@ -0,0 +1,25 @@ +import type { HTMLAttributes } from "react"; +import { css, cx } from "@/styled/css"; + +/** + * PageTitle — semantic heading shared by the main sections of AymurAI flows. + * + * The visual contract comes from the repeated `title.md.strong` heading used + * by onboarding, preview, processing, validation and finish screens. It stays + * deliberately small: hierarchy and copy belong to the consumer, while the + * library owns the common typography and reset. + */ +const titleStyle = css({ + m: "0", + color: "text.default", + textStyle: "title.md.strong", + minW: "[0px]", +}); + +export interface PageTitleProps extends HTMLAttributes {} + +export function PageTitle({ className, ...props }: PageTitleProps) { + return

; +} + +export default PageTitle; diff --git a/src/components/page-title/index.ts b/src/components/page-title/index.ts new file mode 100644 index 0000000..3678965 --- /dev/null +++ b/src/components/page-title/index.ts @@ -0,0 +1 @@ +export { default, PageTitle, type PageTitleProps } from "./PageTitle"; diff --git a/src/components/workflow-step-layout/WorkflowStepLayout.stories.tsx b/src/components/workflow-step-layout/WorkflowStepLayout.stories.tsx new file mode 100644 index 0000000..baa9a7b --- /dev/null +++ b/src/components/workflow-step-layout/WorkflowStepLayout.stories.tsx @@ -0,0 +1,101 @@ +import type { Meta, StoryObj } from "@storybook/react"; +import { ArrowLeft } from "phosphor-react"; +import { css } from "@/styled/css"; +import { AppFooter } from "../app-footer"; +import { AppHeader } from "../app-header"; +import { Button } from "../button"; +import { Card } from "../card"; +import { WorkflowStepLayout } from "./WorkflowStepLayout"; + +const meta = { + title: "Components/WorkflowStepLayout", + component: WorkflowStepLayout, + parameters: { layout: "fullscreen" }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +const header = ( + +); + +const footer = ( + Plataforma hecha por DataGénero} + actions={} + /> +); + +const backButton = ( + +); + +export const Default: Story = { + args: { + header, + title: "1. Selección de archivo", + leading: backButton, + footer, + children: ( + + Seleccioná el archivo que querés procesar o arrastralo y soltalo acá. + + ), + }, +}; + +export const LongContent: Story = { + args: { + ...Default.args, + children: ( +
+ {Array.from({ length: 12 }, (_, index) => ( + Bloque de contenido {index + 1} + ))} +
+ ), + }, +}; + +export const FullBleed: Story = { + args: { + header, + footer: Finalizar} />, + fullBleed: true, + children: ( +
+
Editor
+
+ Panel lateral +
+
+ ), + }, +}; + +export const NarrowViewport: Story = { + args: { + ...Default.args, + title: "Revisá la información extraída del documento", + }, + parameters: { viewport: { defaultViewport: "mobile1" } }, +}; diff --git a/src/components/workflow-step-layout/WorkflowStepLayout.tsx b/src/components/workflow-step-layout/WorkflowStepLayout.tsx new file mode 100644 index 0000000..e086eb3 --- /dev/null +++ b/src/components/workflow-step-layout/WorkflowStepLayout.tsx @@ -0,0 +1,141 @@ +import type { HTMLAttributes, ReactNode } from "react"; +import { css, cva, cx } from "@/styled/css"; +import { PageTitle } from "../page-title"; + +/** + * WorkflowStepLayout — application shell for one step of a multi-screen flow. + * + * The component owns only layout: a bounded viewport, fixed header/footer + * regions and one main overflow boundary. Routing, progress, translations and + * domain state stay in the consumer and arrive as pre-built slots. + */ +const rootStyle = css({ + boxSizing: "border-box", + display: "flex", + flexDir: "column", + w: "full", + h: "[100dvh]", + minH: "[0px]", + overflow: "hidden", + bg: "bg.primary", +}); + +const regionStyle = css({ + flexShrink: "0", + w: "full", +}); + +const mainStyle = cva({ + base: { + flex: "1", + minH: "[0px]", + w: "full", + overflowX: "hidden", + bg: "bg.primary", + }, + variants: { + fullBleed: { + false: { overflowY: "auto" }, + true: { overflow: "hidden" }, + }, + }, + defaultVariants: { + fullBleed: false, + }, +}); + +const contentStyle = cva({ + base: { + boxSizing: "border-box", + w: "full", + }, + variants: { + fullBleed: { + false: { + minH: "full", + maxW: "5xl", + mx: "auto", + px: { base: "4", sm: "6", md: "8" }, + pt: { base: "6", xl: "16" }, + pb: { base: "6", xl: "16" }, + }, + true: { + h: "full", + minH: "[0px]", + overflow: "hidden", + }, + }, + }, + defaultVariants: { + fullBleed: false, + }, +}); + +const headingRowStyle = css({ + display: "flex", + alignItems: "center", + gap: "6", + w: "full", + minW: "[0px]", + mb: "8", +}); + +export interface WorkflowStepLayoutProps + extends Omit, "title"> { + /** Pre-built application header. Navigation and progress stay in the consumer. */ + header?: ReactNode; + /** Page-title content. Rendered as a semantic {@link PageTitle}. */ + title?: ReactNode; + /** Optional element before the title, normally a back button or icon. */ + leading?: ReactNode; + /** Pre-built footer. Actions and product branding stay in the consumer. */ + footer?: ReactNode; + /** + * Removes standard insets and contains overflow so editors and split views + * can own their internal scrolling without creating a second page scroll. + */ + fullBleed?: boolean; + /** Class applied to the `
` region. */ + mainClassName?: string; + /** Class applied to the inner content container. */ + contentClassName?: string; +} + +export function WorkflowStepLayout({ + header, + title, + leading, + footer, + fullBleed = false, + mainClassName, + contentClassName, + className, + children, + ...props +}: WorkflowStepLayoutProps) { + const hasHeading = title !== undefined || leading !== undefined; + + return ( +
+ {header !== undefined && ( +
{header}
+ )} +
+
+ {hasHeading && ( +
+ {leading} + {title !== undefined && {title}} +
+ )} + {children} +
+
+ {footer !== undefined && ( +
{footer}
+ )} +
+ ); +} + +export default WorkflowStepLayout; diff --git a/src/components/workflow-step-layout/index.ts b/src/components/workflow-step-layout/index.ts new file mode 100644 index 0000000..2e2e531 --- /dev/null +++ b/src/components/workflow-step-layout/index.ts @@ -0,0 +1,5 @@ +export { + default, + WorkflowStepLayout, + type WorkflowStepLayoutProps, +} from "./WorkflowStepLayout"; diff --git a/src/index.ts b/src/index.ts index 06ffec1..b698730 100644 --- a/src/index.ts +++ b/src/index.ts @@ -35,6 +35,7 @@ export * from "./components/file-drop-zone"; export * from "./components/logo"; // Voz a texto (speech-to-text) export * from "./components/option"; +export * from "./components/page-title"; export * from "./components/player"; export * from "./components/popover"; export * from "./components/radio"; @@ -56,5 +57,6 @@ export * from "./components/toolbar"; export * from "./components/tooltip"; export * from "./components/transcript-block"; export * from "./components/tutorial"; +export * from "./components/workflow-step-layout"; // Utils export * from "./utils/timestamp"; From 535bd719132072f8640e3206d7f7b059e2b4d9c4 Mon Sep 17 00:00:00 2001 From: jansaldo Date: Wed, 22 Jul 2026 12:05:18 -0300 Subject: [PATCH 21/83] fix(tokens): align borders.secondary to Figma #9F99A5 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit border.secondary was #EDF2F7 (near-white), but Figma's border/secondary variable is #9F99A5. This is the border applied to TextField's typed state, Select's dropdown panel, and Search's field/suggestion states — so a field with a value rendered an almost-invisible border instead of the intended medium gray. Search had already worked around it with a hardcoded [1px_solid_#9F99A5] escape; fold that back onto the corrected token. Co-Authored-By: Claude Opus 4.8 (1M context) --- src/components/search/Search.tsx | 6 ++---- src/preset.ts | 2 +- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/src/components/search/Search.tsx b/src/components/search/Search.tsx index 614cb9d..16e7d96 100644 --- a/src/components/search/Search.tsx +++ b/src/components/search/Search.tsx @@ -11,9 +11,7 @@ import { css, cx, sva } from "@/styled/css"; * bg.secondary = #FFFFFF (input background) * border/primary = 1px solid #BCBAB8 (Default border) * border/primary-alt = 1px solid #110041 (Focus border) - * [1px_solid_#9F99A5] = Field + Suggestion border (border/secondary in Figma; - * promote to preset as `border.tertiary` or rename - * existing `border.secondary` which is currently #EDF2F7) + * border/secondary = 1px solid #9F99A5 (Field + Suggestion border) * text.lighter = #625C68 (placeholder, result counter) * text.default = #110041 (typed text / suggestion text) * [#2D3748] = Suggestion typed+caret colour (promote as text.secondary) @@ -147,7 +145,7 @@ export function Search({ // Field + Suggestion: border/secondary in Figma (#9F99A5) (isField || isSuggestion) && css({ - border: "[1px_solid_#9F99A5]", + border: "secondary", }), // Suggestion: also gets the drop-shadow (same as Focus) isSuggestion && diff --git a/src/preset.ts b/src/preset.ts index e1c5f2f..4b852cf 100644 --- a/src/preset.ts +++ b/src/preset.ts @@ -167,7 +167,7 @@ export const aymuraiPreset = definePreset({ }, borders: { primary: { value: "1px solid #BCBAB8" }, - secondary: { value: "1px solid #EDF2F7" }, + secondary: { value: "1px solid #9F99A5" }, "primary-alt": { value: "1px solid #110041" }, error: { value: "1px solid {colors.system.error}" }, }, From d5046dbbf9b5bc02ddd1e1382c6aa0bdad625be2 Mon Sep 17 00:00:00 2001 From: jansaldo Date: Wed, 22 Jul 2026 16:54:33 -0300 Subject: [PATCH 22/83] feat(text-field): enhance typed state and reposition suggestion display --- src/components/text-field/TextField.tsx | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/src/components/text-field/TextField.tsx b/src/components/text-field/TextField.tsx index 4903b09..9e7564b 100644 --- a/src/components/text-field/TextField.tsx +++ b/src/components/text-field/TextField.tsx @@ -103,10 +103,12 @@ const input = sva({ }, false: {}, }, - // Typed: Figma uses border/secondary (#9F99A5) when a value is present + // Typed: Figma uses border/secondary (#9F99A5) when a value is present, + // and darkens the label to text.default. typed: { true: { inputBox: { border: "secondary" }, + label: { color: "text.default" }, }, false: {}, }, @@ -238,8 +240,6 @@ export function TextField({

)} - {suggestion && {suggestion}} - + {/* Suggestion sits to the RIGHT of the value, behind the affix's + border separator (the "pipe"), matching the pre-v0.5 layout. */} + {suggestion && ( +
+ {suggestion} +
+ )} + {suffix && (
{suffix} From 0ebcc85303700e978c4de3c13b4bcf0cd9f15abf Mon Sep 17 00:00:00 2001 From: jansaldo Date: Wed, 22 Jul 2026 17:17:22 -0300 Subject: [PATCH 23/83] feat(select): self-managed value, clearable control, filled-label emphasis MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The Select was controlled purely on the `value` prop with no internal state, so consumers that drive it through a ref/register pattern (the dataset validation forms) could never change the selection — picking an option reverted immediately. Manage the selection internally (seeded from `value`, synced via effect, exposed through the ref) so it works both controlled and ref-driven. Also add an opt-out `clearable` control (XCircle, highlights on hover to match the entity manager) and darken the label to text.default once a value is present, per Figma. Co-Authored-By: Claude Opus 4.8 (1M context) --- src/components/select/Select.tsx | 70 ++++++++++++++++++++++++++++---- 1 file changed, 63 insertions(+), 7 deletions(-) diff --git a/src/components/select/Select.tsx b/src/components/select/Select.tsx index 3c306f5..0a8637b 100644 --- a/src/components/select/Select.tsx +++ b/src/components/select/Select.tsx @@ -1,9 +1,15 @@ import * as RadixSelect from "@radix-ui/react-select"; -import { CaretDown, CaretUp, Check } from "phosphor-react"; -import { type Ref, useId, useImperativeHandle } from "react"; +import { CaretDown, CaretUp, Check, XCircle } from "phosphor-react"; +import { + type Ref, + useEffect, + useId, + useImperativeHandle, + useState, +} from "react"; import { Suggestion } from "@/components/suggestion/Suggestion"; -import { sva } from "@/styled/css"; +import { css, sva } from "@/styled/css"; import { styled } from "@/styled/jsx"; import { stack } from "@/styled/patterns"; @@ -36,6 +42,8 @@ export interface SelectProps { placeholder?: string; disabled?: boolean; size?: "md" | "sm"; + /** Show a clear (×) control once an option is selected. Default: true. */ + clearable?: boolean; ref?: Ref<{ value: string | undefined }>; } @@ -202,6 +210,7 @@ export function Select({ placeholder = "", disabled = false, size = "md", + clearable = true, ref, }: SelectProps) { const triggerId = useId(); @@ -210,9 +219,28 @@ export function Select({ const orderedOptions = orderByPriority(options, priorityOrder); const securedSuggestion = secureSuggestion(suggestion, options); - useImperativeHandle(ref, () => ({ value }), [value]); + // Self-managed selection. Works both ways: + // - Controlled: parent passes `value` + `onChange` and re-renders (e.g. the + // Voz a Texto export format select). The effect keeps us in sync. + // - Uncontrolled/ref: consumers that only read the selection back through + // `ref` and never re-render on change (the dataset validation forms' + // register/useForm pattern). Here `value` is just the initial seed, so the + // component must own the selection or picking an option would revert. + // Seed with "" (never undefined) so Radix stays controlled throughout and + // doesn't emit an uncontrolled→controlled warning on first selection. + const [selectedValue, setSelectedValue] = useState(value ?? ""); + + useEffect(() => { + setSelectedValue(value ?? ""); + }, [value]); + + // Expose the live selection (not the initial `value`) so ref-based consumers + // capture user changes — useImperativeHandle re-runs when it changes, which is + // what re-fires the forms' registration callback ref. + useImperativeHandle(ref, () => ({ value: selectedValue }), [selectedValue]); const handleChange = (id: string) => { + setSelectedValue(id); const option = options.find((o) => o.id === id); if (option) onChange?.(option); }; @@ -234,7 +262,7 @@ export function Select({ {label && ( {label} @@ -242,7 +270,7 @@ export function Select({ )} @@ -252,7 +280,7 @@ export function Select({ {prefix && } - {!value && securedSuggestion ? ( + {!selectedValue && securedSuggestion ? ( + )} + {/* Caret sits at the trailing edge — matches Figma layout */} Date: Wed, 22 Jul 2026 17:32:04 -0300 Subject: [PATCH 24/83] chore(test): add vitest + jsdom + testing-library for rich-text-editor --- package.json | 8 +- pnpm-lock.yaml | 766 +++++++++++++++++++++++++++++- src/utils/rich-text/setupTests.ts | 1 + src/utils/rich-text/smoke.test.ts | 8 + vitest.config.ts | 15 + 5 files changed, 781 insertions(+), 17 deletions(-) create mode 100644 src/utils/rich-text/setupTests.ts create mode 100644 src/utils/rich-text/smoke.test.ts create mode 100644 vitest.config.ts diff --git a/package.json b/package.json index ee3b7f4..bfe9de2 100644 --- a/package.json +++ b/package.json @@ -38,6 +38,7 @@ "build-storybook": "storybook build", "lint": "biome check", "lint:fix": "biome check --write", + "test": "vitest run", "typecheck": "tsc -p tsconfig.build.json --noEmit", "validate": "pnpm lint && pnpm typecheck", "release": "pnpm build && pnpm pack --pack-destination ." @@ -60,17 +61,22 @@ "@pandacss/dev": "^1.8.1", "@storybook/react": "^8.6.18", "@storybook/react-vite": "^8.4.0", + "@testing-library/jest-dom": "^7.0.0", + "@testing-library/react": "^16.3.2", + "@testing-library/user-event": "^14.6.1", "@types/react": "^19", "@types/react-dom": "^19", "@vitejs/plugin-react": "^4.5.0", "husky": "^9.1.7", + "jsdom": "^29.1.1", "lint-staged": "^17.0.8", "react": "^19", "react-dom": "^19", "storybook": "^8.4.0", "typescript": "^5.9.2", "vite": "^6.3.5", - "vite-plugin-dts": "^4.3.0" + "vite-plugin-dts": "^4.3.0", + "vitest": "^4.1.10" }, "repository": { "type": "git", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index de32498..2a8acf2 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -35,13 +35,22 @@ importers: version: 2.5.3 '@pandacss/dev': specifier: ^1.8.1 - version: 1.11.3(typescript@5.9.3) + version: 1.11.3(jsdom@29.1.1)(typescript@5.9.3) '@storybook/react': specifier: ^8.6.18 version: 8.6.18(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(storybook@8.6.18(prettier@3.2.5))(typescript@5.9.3) '@storybook/react-vite': specifier: ^8.4.0 version: 8.6.18(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(rollup@4.61.1)(storybook@8.6.18(prettier@3.2.5))(typescript@5.9.3)(vite@6.4.3(lightningcss@1.31.1)(yaml@2.9.0)) + '@testing-library/jest-dom': + specifier: ^7.0.0 + version: 7.0.0(@testing-library/dom@10.4.1) + '@testing-library/react': + specifier: ^16.3.2 + version: 16.3.2(@testing-library/dom@10.4.1)(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7) + '@testing-library/user-event': + specifier: ^14.6.1 + version: 14.6.1(@testing-library/dom@10.4.1) '@types/react': specifier: ^19 version: 19.2.17 @@ -54,6 +63,9 @@ importers: husky: specifier: ^9.1.7 version: 9.1.7 + jsdom: + specifier: ^29.1.1 + version: 29.1.1 lint-staged: specifier: ^17.0.8 version: 17.0.8 @@ -75,9 +87,30 @@ importers: vite-plugin-dts: specifier: ^4.3.0 version: 4.5.4(rollup@4.61.1)(typescript@5.9.3)(vite@6.4.3(lightningcss@1.31.1)(yaml@2.9.0)) + vitest: + specifier: ^4.1.10 + version: 4.1.10(jsdom@29.1.1)(vite@6.4.3(lightningcss@1.31.1)(yaml@2.9.0)) packages: + '@adobe/css-tools@4.5.0': + resolution: {integrity: sha512-6OzddxPio9UiWTCemp4N8cYLV2ZN1ncRnV1cVGtve7dhPOtRkleRyx32GQCYSwDYgaHU3USMm84tNsvKzRCa1Q==} + + '@asamuzakjp/css-color@5.1.11': + resolution: {integrity: sha512-KVw6qIiCTUQhByfTd78h2yD1/00waTmm9uy/R7Ck/ctUyAPj+AEDLkQIdJW0T8+qGgj3j5bpNKK7Q3G+LedJWg==} + engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0} + + '@asamuzakjp/dom-selector@7.1.1': + resolution: {integrity: sha512-67RZDnYRc8H/8MLDgQCDE//zoqVFwajkepHZgmXrbwybzXOEwOWGPYGmALYl9J2DOLfFPPs6kKCqmbzV895hTQ==} + engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0} + + '@asamuzakjp/generational-cache@1.0.1': + resolution: {integrity: sha512-wajfB8KqzMCN2KGNFdLkReeHncd0AslUSrvHVvvYWuU8ghncRJoA50kT3zP9MVL0+9g4/67H+cdvBskj9THPzg==} + engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0} + + '@asamuzakjp/nwsapi@2.3.9': + resolution: {integrity: sha512-n8GuYSrI9bF7FFZ/SjhwevlHc8xaVlb/7HmHelnc/PZXBD2ZR49NnN9sMMuDdEGPeeRQ5d0hqlSlEpgCX3Wl0Q==} + '@babel/code-frame@7.29.7': resolution: {integrity: sha512-Aup7aUOfpbAUg2ROOJN6Iw5f9DMBlzu0mIkm/malLQFN/YQgO48wCj0Kxa3sEHJvPVFg7siR+qRInwXd2qhQKw==} engines: {node: '>=6.9.0'} @@ -149,6 +182,10 @@ packages: peerDependencies: '@babel/core': ^7.0.0-0 + '@babel/runtime@7.29.7': + resolution: {integrity: sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw==} + engines: {node: '>=6.9.0'} + '@babel/template@7.29.7': resolution: {integrity: sha512-puq+Gf35oI24FeN11LkoUQFqv9uwNeWpxXZi/Ji3rRIoKAzKnxRaZ+Gkj0vKS9ZCiTESfng1N9LyOyXvo+m+Gg==} engines: {node: '>=6.9.0'} @@ -218,12 +255,52 @@ packages: cpu: [x64] os: [win32] + '@bramus/specificity@2.4.2': + resolution: {integrity: sha512-ctxtJ/eA+t+6q2++vj5j7FYX3nRu311q1wfYH3xjlLOsczhlhxAg2FWNUXhpGvAw3BWo1xBcvOV6/YLc2r5FJw==} + hasBin: true + '@clack/core@0.5.0': resolution: {integrity: sha512-p3y0FIOwaYRUPRcMO7+dlmLh8PSRcrjuTndsiA0WAFbWES0mLZlrjVoBRZ9DzkPFJZG6KGkJmoEAY0ZcVWTkow==} '@clack/prompts@0.11.0': resolution: {integrity: sha512-pMN5FcrEw9hUkZA4f+zLlzivQSeQf5dRGJjSUbvVYDLvpKCdQx5OaknvKzgbtXOizhP+SJJJjqEbOe55uKKfAw==} + '@csstools/color-helpers@6.1.0': + resolution: {integrity: sha512-064IFJdjTfUqnjpCVpMOdbr8FLQBhinbZj6yRv2An2E41O/pLEXqfFRWqGq/SxlE5PEUYTlvWsG2r8MswAVvkg==} + engines: {node: '>=20.19.0'} + + '@csstools/css-calc@3.2.1': + resolution: {integrity: sha512-DtdHlgXh5ZkA43cwBcAm+huzgJiwx3ZTWVjBs94kwz2xKqSimDA3lBgCjphYgwgVUMWatSM0pDd8TILB1yrVVg==} + engines: {node: '>=20.19.0'} + peerDependencies: + '@csstools/css-parser-algorithms': ^4.0.0 + '@csstools/css-tokenizer': ^4.0.0 + + '@csstools/css-color-parser@4.1.9': + resolution: {integrity: sha512-paQcIaOO53Rk5+YrBaBjm/SgrV4INImjo2BT1DtQRYr+XeTRbeAYlS+jxXp9drqvKmtFnWRJKIalDLhZZDu42A==} + engines: {node: '>=20.19.0'} + peerDependencies: + '@csstools/css-parser-algorithms': ^4.0.0 + '@csstools/css-tokenizer': ^4.0.0 + + '@csstools/css-parser-algorithms@4.0.0': + resolution: {integrity: sha512-+B87qS7fIG3L5h3qwJ/IFbjoVoOe/bpOdh9hAjXbvx0o8ImEmUsGXN0inFOnk2ChCFgqkkGFQ+TpM5rbhkKe4w==} + engines: {node: '>=20.19.0'} + peerDependencies: + '@csstools/css-tokenizer': ^4.0.0 + + '@csstools/css-syntax-patches-for-csstree@1.1.6': + resolution: {integrity: sha512-TcJCWFbXLPpJYq6z7bfOyjWYJDiDg2/I4gyUC9pqPNqHFRIey0EB0q0L5cSnQDfWJg8Jd6VadakxdIez/3zkqQ==} + peerDependencies: + css-tree: ^3.2.1 + peerDependenciesMeta: + css-tree: + optional: true + + '@csstools/css-tokenizer@4.0.0': + resolution: {integrity: sha512-QxULHAm7cNu72w97JUNCBFODFaXpbDg+dP8b/oWFAZ2MTRppA3U00Y2L1HqaS4J6yBqxwa/Y3nMBaxVKbB/NsA==} + engines: {node: '>=20.19.0'} + '@csstools/postcss-cascade-layers@5.0.2': resolution: {integrity: sha512-nWBE08nhO8uWl6kSAeCx4im7QfVko3zLrtgWZY4/bP87zrSPpSyN/3W3TDqz1jJuH+kbKOHXg5rJnK+ZVYcFFg==} engines: {node: '>=18'} @@ -392,6 +469,15 @@ packages: cpu: [x64] os: [win32] + '@exodus/bytes@1.15.1': + resolution: {integrity: sha512-S6mL0yNB/Abt9Ei4tq8gDhcczc4S3+vQ4ra7vxnAf+YHC02srtqxKKZghx2Dq6p0e66THKwR6r8N6P95wEty7Q==} + engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0} + peerDependencies: + '@noble/hashes': ^1.8.0 || ^2.0.0 + peerDependenciesMeta: + '@noble/hashes': + optional: true + '@floating-ui/core@1.7.5': resolution: {integrity: sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ==} @@ -1059,6 +1145,9 @@ packages: '@rushstack/ts-command-line@5.3.9': resolution: {integrity: sha512-GIHqU+sRGQ3LGWAZu1O+9Yh++qwtyNIIGuNbcWHJjBTm2qRez0cwINUHZ+pQLR8UuzZDcMajrDaNbUYoaL/XtQ==} + '@standard-schema/spec@1.1.0': + resolution: {integrity: sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==} + '@storybook/builder-vite@8.6.18': resolution: {integrity: sha512-XLqnOv4C36jlTd4uC8xpWBxv+7GV4/05zWJ0wAcU4qflorropUTirt4UQPGkwIzi+BVAhs9pJj+m4k0IWJtpHg==} peerDependencies: @@ -1136,12 +1225,46 @@ packages: peerDependencies: storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0 + '@testing-library/dom@10.4.1': + resolution: {integrity: sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==} + engines: {node: '>=18'} + + '@testing-library/jest-dom@7.0.0': + resolution: {integrity: sha512-HKAH9C6mBo5yBG6yRO5i43L2iisencAo5z+o5P/saHUoY+miC5ivXRxHBJcFyB5ypPNxHJdK3BoF/3O4DIptMg==} + engines: {node: '>=22', npm: '>=6', yarn: '>=1'} + peerDependencies: + '@testing-library/dom': '>=10 <11' + + '@testing-library/react@16.3.2': + resolution: {integrity: sha512-XU5/SytQM+ykqMnAnvB2umaJNIOsLF3PVv//1Ew4CTcpz0/BRyy/af40qqrt7SjKpDdT1saBMc42CUok5gaw+g==} + engines: {node: '>=18'} + peerDependencies: + '@testing-library/dom': ^10.0.0 + '@types/react': ^18.0.0 || ^19.0.0 + '@types/react-dom': ^18.0.0 || ^19.0.0 + react: ^18.0.0 || ^19.0.0 + react-dom: ^18.0.0 || ^19.0.0 + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + + '@testing-library/user-event@14.6.1': + resolution: {integrity: sha512-vq7fv0rnt+QTXgPxr5Hjc210p6YKq2kmdziLgnsZGgLJ9e6VAShx1pACLuRjd/AS/sr7phAR58OIIpf0LlmQNw==} + engines: {node: '>=12', npm: '>=6'} + peerDependencies: + '@testing-library/dom': '>=7.21.4' + '@ts-morph/common@0.29.0': resolution: {integrity: sha512-35oUmphHbJvQ/+UTwFNme/t2p3FoKiGJ5auTjjpNTop2dyREspirjMy82PLSC1pnDJ8ah1GU98hwpVt64YXQsg==} '@types/argparse@1.0.38': resolution: {integrity: sha512-ebDJ9b0e702Yr7pWgB0jzm+CX4Srzz8RcXtLJDJB+BSccqMa36uyH/zUsSYao5+BD1ytv3k3rPYCq4mAE1hsXA==} + '@types/aria-query@5.0.4': + resolution: {integrity: sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==} + '@types/babel__core@7.20.5': resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==} @@ -1154,6 +1277,12 @@ packages: '@types/babel__traverse@7.28.0': resolution: {integrity: sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==} + '@types/chai@5.2.3': + resolution: {integrity: sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==} + + '@types/deep-eql@4.0.2': + resolution: {integrity: sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==} + '@types/doctrine@0.0.9': resolution: {integrity: sha512-eOIHzCUSH7SMfonMG1LsC2f8vxBFtho6NGBznK41R84YzPuvSBzrhEps33IsQiOW9+VL6NQ9DbjQJznk/S4uRA==} @@ -1180,6 +1309,35 @@ packages: peerDependencies: vite: ^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 + '@vitest/expect@4.1.10': + resolution: {integrity: sha512-YsCn+qAk1GWjQOWFEsEcL2gNQ0zmVmQu3T03qP6UyjhtmdtwtbuI+DASn/7iQB3HGTXkdBwGddzxPlmiql5vlA==} + + '@vitest/mocker@4.1.10': + resolution: {integrity: sha512-v0xaezt+DKEmKfaxg133ldzADrwLGd7Ze1MfQQTYfvs8OqZIwbxyxaYURivwV7sWy5fqn3rH5uOrSp07bp44Ow==} + peerDependencies: + msw: ^2.4.9 + vite: ^6.0.0 || ^7.0.0 || ^8.0.0 + peerDependenciesMeta: + msw: + optional: true + vite: + optional: true + + '@vitest/pretty-format@4.1.10': + resolution: {integrity: sha512-W1HsjSH4MXQ9YfmmhLAoIYf1HRfekQCGngeIgcei6MP5QQGWUe0gkopdZQaVCFO+JDJMrAJGwa5pRpNpvy4P8Q==} + + '@vitest/runner@4.1.10': + resolution: {integrity: sha512-IKI6kpIH+LmpROplyLwBBaCfMgOZOMsygVa6BARD6ahA04VRuJSa6OaVG7kRvSEMD870Vd91rSSw0eegtWyLGg==} + + '@vitest/snapshot@4.1.10': + resolution: {integrity: sha512-xRkfOT1qpTAi/Ti4Y1LtfRc3kEuqxGw59eN2jN9pRWMtS/XDevekhcFSqvQqjUNGksfjMJu3Y+oJ+4Ypn2OaJw==} + + '@vitest/spy@4.1.10': + resolution: {integrity: sha512-PLf/Ugvoq5wO/b4rwYCR1h2PSIdXz7wnkQFMiUpLdtM7l6pqVFcQIBEHyT1+l+cj7mNwAfZHzqXqDyjvOuwbDw==} + + '@vitest/utils@4.1.10': + resolution: {integrity: sha512-fy9am/HWxbaGt/Sawrp90vt6Y6jQwf1RX77cz3uwoJwJVMli/e1IEwRPnMNJ7vKfPTwo0diXifkpPvwH9v7nGA==} + '@volar/language-core@2.4.28': resolution: {integrity: sha512-w4qhIJ8ZSitgLAkVay6AbcnC7gP3glYM3fYwKV3srj8m494E3xtrCv6E+bWviiK/8hs6e6t1ij1s2Endql7vzQ==} @@ -1278,6 +1436,10 @@ packages: resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==} engines: {node: '>=8'} + ansi-styles@5.2.0: + resolution: {integrity: sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==} + engines: {node: '>=10'} + ansi-styles@6.2.3: resolution: {integrity: sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==} engines: {node: '>=12'} @@ -1289,6 +1451,17 @@ packages: resolution: {integrity: sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==} engines: {node: '>=10'} + aria-query@5.3.0: + resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==} + + aria-query@5.3.2: + resolution: {integrity: sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==} + engines: {node: '>= 0.4'} + + assertion-error@2.0.1: + resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==} + engines: {node: '>=12'} + ast-types@0.16.1: resolution: {integrity: sha512-6t10qk83GOG8p0vKmaCr8eiilZwO171AvbROMtvvNiwrTly62t+7XkA8RdIIVbpMhCASAsxgAzdRSwh6nw/5Dg==} engines: {node: '>=4'} @@ -1317,6 +1490,9 @@ packages: resolution: {integrity: sha512-aVNobHnJqLiUelTaHat9DZ1qM2w0C0Eym4LPI/3JxOnSokGVdsl1T1kN7TFvsEAD8G47A6VKQ0TVHqbBnYMJlQ==} engines: {node: '>=12.0.0'} + bidi-js@1.0.3: + resolution: {integrity: sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==} + body-parser@2.2.2: resolution: {integrity: sha512-oP5VkATKlNwcgvxi0vM0p/D3n2C3EReYVX+DNYs5TjZFn/oQt2j+4sVJtSMr18pdRr8wjTcBl6LoV+FUwzPmNA==} engines: {node: '>=18'} @@ -1368,6 +1544,10 @@ packages: caniuse-lite@1.0.30001797: resolution: {integrity: sha512-l8xKG+gwAIExZGl9FrF7KUwuOmk6wbEPC9Xoy/RtnWv1XG0Q4LFlagaLpUv3Kiza3W/wm27zy0yWJEieYKAP6w==} + chai@6.2.2: + resolution: {integrity: sha512-NUPRluOfOiTKBKvWPtSD4PhFvWCqOi0BGStNWs57X9js7XGTprSmFoz5F0tWhR4WPjNeR9jXqdC7/UpSJTnlRg==} + engines: {node: '>=18'} + chokidar@4.0.3: resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==} engines: {node: '>= 14.16.0'} @@ -1434,6 +1614,13 @@ packages: resolution: {integrity: sha512-ju88BYCQ2uvjO2bR+SsgLSTwTSctU+6Vp2ePbKPgSCZyy4MWZxYsT738DlKVRE5utUjobjPRm1MkTYKJxCmpTA==} engines: {node: '>=14.9.0'} + css-tree@3.2.1: + resolution: {integrity: sha512-X7sjQzceUhu1u7Y/ylrRZFU2FS6LRiFVp6rKLPg23y3x3c3DOKAwuXGDp+PAGjh6CSnCjYeAul8pcT8bAl+lSA==} + engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0} + + css.escape@1.5.1: + resolution: {integrity: sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==} + cssesc@3.0.0: resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==} engines: {node: '>=4'} @@ -1442,6 +1629,10 @@ packages: csstype@3.2.3: resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==} + data-urls@7.0.0: + resolution: {integrity: sha512-23XHcCF+coGYevirZceTVD7NdJOqVn+49IHyxgszm+JIiHLoB2TkmPtsYkNWT1pvRSGkc35L6NHs0yHkN2SumA==} + engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0} + de-indent@1.0.2: resolution: {integrity: sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==} @@ -1454,6 +1645,9 @@ packages: supports-color: optional: true + decimal.js@10.6.0: + resolution: {integrity: sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==} + define-data-property@1.1.4: resolution: {integrity: sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==} engines: {node: '>= 0.4'} @@ -1466,6 +1660,10 @@ packages: resolution: {integrity: sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==} engines: {node: '>= 0.8'} + dequal@2.0.3: + resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==} + engines: {node: '>=6'} + detect-libc@2.1.2: resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==} engines: {node: '>=8'} @@ -1481,6 +1679,12 @@ packages: resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==} engines: {node: '>=6.0.0'} + dom-accessibility-api@0.5.16: + resolution: {integrity: sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==} + + dom-accessibility-api@0.6.3: + resolution: {integrity: sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==} + dunder-proto@1.0.1: resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==} engines: {node: '>= 0.4'} @@ -1515,6 +1719,10 @@ packages: resolution: {integrity: sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==} engines: {node: '>=0.12'} + entities@8.0.0: + resolution: {integrity: sha512-zwfzJecQ/Uej6tusMqwAqU/6KL2XaB2VZ2Jg54Je6ahNBGNH6Ek6g3jjNCF0fG9EWQKGZNddNjU5F1ZQn/sBnA==} + engines: {node: '>=20.19.0'} + environment@1.1.0: resolution: {integrity: sha512-xUtoPkMggbz0MPyPiIWr1Kp4aeWJjDZ6SMvURhimjdZgsRuDplF5/s9hcgGhyXMhs+6vpnuoiZ2kFiu3FMnS8Q==} engines: {node: '>=18'} @@ -1527,6 +1735,9 @@ packages: resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==} engines: {node: '>= 0.4'} + es-module-lexer@2.3.1: + resolution: {integrity: sha512-shc1dbU90Yl/xq1QrC7QRtfcwURZuVRfPhZbDoldJ1cn1gzDvBaBWlv0eFolj5+0znnPJz5TXLxsN77X/12KTA==} + es-object-atoms@1.1.2: resolution: {integrity: sha512-HWcBoN6NileqtSydK2FqHbS/LoDd2pqrnQHLyJzBj4kOp/ky2MWMN694xOfkK8/SnUsW2DH7EfyVlydKCsm1Zw==} engines: {node: '>= 0.4'} @@ -1556,6 +1767,9 @@ packages: estree-walker@2.0.2: resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==} + estree-walker@3.0.3: + resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==} + esutils@2.0.3: resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==} engines: {node: '>=0.10.0'} @@ -1575,6 +1789,10 @@ packages: resolution: {integrity: sha512-CRT1WTyuQoD771GW56XEZFQ/ZoSfWid1alKGDYMmkt2yl8UXrVR4pspqWNEcqKvVIzg6PAltWjxcSSPrboA4iA==} engines: {node: '>=18.0.0'} + expect-type@1.4.0: + resolution: {integrity: sha512-KfYbmpRm0VbLjEvVa9yGwCi9GI34xvi7A/HXYWQO65CSD2u3MczUJSuwXKFIxlGsgBQizV9q5J9NHj4VG0n+pA==} + engines: {node: '>=12.0.0'} + express-rate-limit@8.5.2: resolution: {integrity: sha512-5Kb34ipNX694DH48vN9irak1Qx30nb0PLYHXfJgw4YEjiC3ZEmZJhwOp+VfiCYwFzvFTdB9QkArYS5kXa2cx2A==} engines: {node: '>= 16'} @@ -1733,6 +1951,10 @@ packages: resolution: {integrity: sha512-2NFaIyNVgJmBs/ecmtGzlmluTFs5cHEWGTdu0t1HBwYzoGXOL5nUQBRMXsXWla5i4KkG//QMzVP88m1+I3fdAQ==} engines: {node: '>=16.9.0'} + html-encoding-sniffer@6.0.0: + resolution: {integrity: sha512-CV9TW3Y3f8/wT0BRFc1/KAVQ3TUHiXmaAb6VW9vtiMFf7SLoMd1PdAc4W3KFOFETBJUb90KatHqlsZMWV+R9Gg==} + engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0} + http-errors@2.0.1: resolution: {integrity: sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==} engines: {node: '>= 0.8'} @@ -1750,6 +1972,10 @@ packages: resolution: {integrity: sha512-rKtvo6a868b5Hu3heneU+L4yEQ4jYKLtjpnPeUdK7h0yzXGmyBTypknlkCvHFBqfX9YlorEiMM6Dnq/5atfHkw==} engines: {node: '>=8'} + indent-string@4.0.0: + resolution: {integrity: sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==} + engines: {node: '>=8'} + inherits@2.0.4: resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==} @@ -1802,6 +2028,9 @@ packages: resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==} engines: {node: '>=0.12.0'} + is-potential-custom-element-name@1.0.1: + resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==} + is-promise@4.0.0: resolution: {integrity: sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ==} @@ -1839,6 +2068,15 @@ packages: resolution: {integrity: sha512-iZ8Bdb84lWRuGHamRXFyML07r21pcwBrLkHEuHgEY5UbCouBwv7ECknDRKzsQIXMiqpPymqtIf8TC/shYKB5rw==} engines: {node: '>=12.0.0'} + jsdom@29.1.1: + resolution: {integrity: sha512-ECi4Fi2f7BdJtUKTflYRTiaMxIB0O6zfR1fX0GXpUrf6flp8QIYn1UT20YQqdSOfk2dfkCwS8LAFoJDEppNK5Q==} + engines: {node: ^20.19.0 || ^22.13.0 || >=24.0.0} + peerDependencies: + canvas: ^3.0.0 + peerDependenciesMeta: + canvas: + optional: true + jsesc@3.1.0: resolution: {integrity: sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==} engines: {node: '>=6'} @@ -1972,9 +2210,17 @@ packages: lru-cache@10.4.3: resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==} + lru-cache@11.5.2: + resolution: {integrity: sha512-4pfM1Ff0x50o0tQwb5ucw/RzNyD0/YJME6IVcStalZuMWxdt3sR3huStTtxz4PUmvZfRguvDejasvQ2kifR11g==} + engines: {node: 20 || >=22} + lru-cache@5.1.1: resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==} + lz-string@1.5.0: + resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==} + hasBin: true + magic-string@0.27.0: resolution: {integrity: sha512-8UnnX2PeRAPZuN12svgR9j7M1uWMovg/CEnIwIG0LFkXSJJe4PdfUGiTGl8V9bsBHFUtfVINcSyYxd7q+kx9fA==} engines: {node: '>=12'} @@ -1986,6 +2232,9 @@ packages: resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==} engines: {node: '>= 0.4'} + mdn-data@2.27.1: + resolution: {integrity: sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ==} + media-typer@1.1.0: resolution: {integrity: sha512-aisnrDP4GNe06UcKFnV5bfMNPBUw4jsLGaWwWfnH3v02GnBuXX2MCVn5RbrWo0j3pczUilYblq7fQ7Nw2t5XKw==} engines: {node: '>= 0.8'} @@ -2017,6 +2266,10 @@ packages: resolution: {integrity: sha512-VP79XUPxV2CigYP3jWwAUFSku2aKqBH7uTAapFWCBqutsbmDo96KY5o8uh6U+/YSIn5OxJnXp73beVkpqMIGhA==} engines: {node: '>=18'} + min-indent@1.0.1: + resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==} + engines: {node: '>=4'} + minimatch@10.2.3: resolution: {integrity: sha512-Rwi3pnapEqirPSbWbrZaa6N3nmqq4Xer/2XooiOKyV3q12ML06f7MOuc5DVH8ONZIFhwIYQ3yzPH4nt7iWHaTg==} engines: {node: 18 || 20 || >=22} @@ -2070,6 +2323,10 @@ packages: resolution: {integrity: sha512-YJjNZrlXJFM42wTBn6zgOJVar9KFJvzx6sTWDte8sWZF//cnjl0BxHNpfZx+ZffXX63A9q0b1zsFiBX4g4X5KA==} engines: {node: '>= 10.12.0'} + obug@2.1.4: + resolution: {integrity: sha512-4a+OsYv9UktOJKE+l1A4OufDgdRF9PifWj+tJnHURo/P+WOxpG4GzUFL9qCalmWauao6ogiG+QvnCovwPoyAWA==} + engines: {node: '>=12.20.0'} + on-finished@2.4.1: resolution: {integrity: sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==} engines: {node: '>= 0.8'} @@ -2106,6 +2363,9 @@ packages: package-manager-detector@1.6.0: resolution: {integrity: sha512-61A5ThoTiDG/C8s8UMZwSorAGwMJ0ERVGj2OjoW5pAalsNOg15+iQiPzrLJ4jhZ1HJzmC2PIHT2oEiH3R5fzNA==} + parse5@8.0.1: + resolution: {integrity: sha512-z1e/HMG90obSGeidlli3hj7cbocou0/wa5HacvI3ASx34PecNjNQeaHNo5WIZpWofN9kgkqV1q5YvXe3F0FoPw==} + parseurl@1.3.3: resolution: {integrity: sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==} engines: {node: '>= 0.8'} @@ -2225,6 +2485,10 @@ packages: engines: {node: '>=14'} hasBin: true + pretty-format@27.5.1: + resolution: {integrity: sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==} + engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0} + process@0.11.10: resolution: {integrity: sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==} engines: {node: '>= 0.6.0'} @@ -2233,6 +2497,10 @@ packages: resolution: {integrity: sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==} engines: {node: '>= 0.10'} + punycode@2.3.1: + resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==} + engines: {node: '>=6'} + qs@6.15.2: resolution: {integrity: sha512-Rzq0KEyX/w/tEybncDgdkZrJgVUsUMk3xjh3t5bv3S1HTAtg+uOYt72+ZfwiQwKdysThkTBdL/rTi6HDmX9Ddw==} engines: {node: '>=0.6'} @@ -2272,6 +2540,9 @@ packages: react: '>=16' react-dom: '>=16' + react-is@17.0.2: + resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==} + react-refresh@0.17.0: resolution: {integrity: sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==} engines: {node: '>=0.10.0'} @@ -2318,6 +2589,10 @@ packages: resolution: {integrity: sha512-YTUo+Flmw4ZXiWfQKGcwwc11KnoRAYgzAE2E7mXKCjSviTKShtxBsN6YUUBB2gtaBzKzeKunxhUwNHQuRryhWA==} engines: {node: '>= 4'} + redent@3.0.0: + resolution: {integrity: sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==} + engines: {node: '>=8'} + require-from-string@2.0.2: resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==} engines: {node: '>=0.10.0'} @@ -2360,6 +2635,10 @@ packages: safer-buffer@2.1.2: resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==} + saxes@6.0.0: + resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==} + engines: {node: '>=v12.22.7'} + scheduler@0.27.0: resolution: {integrity: sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==} @@ -2416,6 +2695,9 @@ packages: resolution: {integrity: sha512-6x6dK6zJdpTzF4sQeNYxwtvBzf6Eg4GtlesS94HOvTudUeyK2WXAaIfmDgsyslYrRBeFIlsi54AYsFGUuhmvrQ==} engines: {node: '>= 0.4'} + siginfo@2.0.0: + resolution: {integrity: sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==} + signal-exit@4.1.0: resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==} engines: {node: '>=14'} @@ -2446,10 +2728,16 @@ packages: sprintf-js@1.0.3: resolution: {integrity: sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==} + stackback@0.0.2: + resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==} + statuses@2.0.2: resolution: {integrity: sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==} engines: {node: '>= 0.8'} + std-env@4.2.0: + resolution: {integrity: sha512-oCUKSupKTHX53EyjDtuZQ64pjLJ6yYCtpmEw0goYxtjG9KpbRe8KAsl2tBUGU9DyMcJ0RwJ8GqJAFzMXcXW1Rw==} + storybook@8.6.18: resolution: {integrity: sha512-p8seiSI6FiVY6P3V0pG+5v7c8pDMehMAFRWEhG5XqIBSQszzOjDnW2rNvm3odoLKfo3V3P6Cs6Hv9ILzymULyQ==} hasBin: true @@ -2491,6 +2779,10 @@ packages: resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==} engines: {node: '>=4'} + strip-indent@3.0.0: + resolution: {integrity: sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==} + engines: {node: '>=8'} + strip-indent@4.1.1: resolution: {integrity: sha512-SlyRoSkdh1dYP0PzclLE7r0M9sgbFKKMFXpFRUMNuKhQSbC6VQIGzq3E0qsfvGJaUFJPGv6Ws1NZ/haTAjfbMA==} engines: {node: '>=12'} @@ -2503,6 +2795,9 @@ packages: resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==} engines: {node: '>= 0.4'} + symbol-tree@3.2.4: + resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==} + table@6.9.0: resolution: {integrity: sha512-9kY+CygyYM6j02t5YFHbNz2FN5QmYGv9zAjVp4lCDjlCw7amdckXlEt/bjMhUIfj4ThGRE4gCUH5+yGnNuPo5A==} engines: {node: '>=10.0.0'} @@ -2510,6 +2805,9 @@ packages: tiny-invariant@1.3.3: resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==} + tinybench@2.9.0: + resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==} + tinyexec@1.2.4: resolution: {integrity: sha512-SHf/r48b7vOrjve9PxJo3MN5v5yuyjHvdUcrQffT3WXMUfnGmHDVbC4k3sHJaJTgZCwpUplIaAo5ANtMyp3YHg==} engines: {node: '>=18'} @@ -2518,6 +2816,17 @@ packages: resolution: {integrity: sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==} engines: {node: '>=12.0.0'} + tinyrainbow@3.1.0: + resolution: {integrity: sha512-Bf+ILmBgretUrdJxzXM0SgXLZ3XfiaUuOj/IKQHuTXip+05Xn+uyEYdVg0kYDipTBcLrCVyUzAPz7QmArb0mmw==} + engines: {node: '>=14.0.0'} + + tldts-core@7.4.9: + resolution: {integrity: sha512-DxKfPBI52p2msTEu7MPhdpdDTBhhVQg1a/8PjQckeyAvO13eMYElX545grIp6nnTGIMZlRvFZPvFhvI/WIz2Vg==} + + tldts@7.4.9: + resolution: {integrity: sha512-3kZ8wQQ/k5DrChD4X4FVvr2D7E5uoRgAqkPyLpSCGUvqOvqu+JEdr3mwMUaVWb+vMHZaKhF5fp2PBigKsui7hA==} + hasBin: true + to-regex-range@5.0.1: resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==} engines: {node: '>=8.0'} @@ -2526,6 +2835,14 @@ packages: resolution: {integrity: sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==} engines: {node: '>=0.6'} + tough-cookie@6.0.2: + resolution: {integrity: sha512-exgYmnmL/sJpR3upZfXG5PoatXQii55xAiXGXzY+sROLZ/Y+SLcp9PgJNI9Vz37HpQ74WvDcLT8eqm+kV3FzrA==} + engines: {node: '>=16'} + + tr46@6.0.0: + resolution: {integrity: sha512-bLVMLPtstlZ4iMQHpFHTR7GAGj2jxi8Dg0s2h2MafAE4uSWF98FC/3MomU51iQAMf8/qDUbKWf5GxuvvVcXEhw==} + engines: {node: '>=20'} + ts-dedent@2.2.0: resolution: {integrity: sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==} engines: {node: '>=6.10'} @@ -2570,6 +2887,10 @@ packages: ufo@1.6.4: resolution: {integrity: sha512-JFNbkD1Svwe0KvGi8GOeLcP4kAWQ609twvCdcHxq1oSL8svv39ZuSvajcD8B+5D0eL4+s1Is2D/O6KN3qcTeRA==} + undici@7.28.0: + resolution: {integrity: sha512-cRZYrTDwWznlnRiPjggAGxZXanty6M8RV1ff8Wm4LWXBp7/IG8v5DnOm74DtUBp9OONpK75YlPnIjQqX0dBDtA==} + engines: {node: '>=20.18.1'} + universalify@2.0.1: resolution: {integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==} engines: {node: '>= 10.0.0'} @@ -2667,12 +2988,69 @@ packages: yaml: optional: true + vitest@4.1.10: + resolution: {integrity: sha512-R9jUTe5S4Qb0HCd4TNqpC7oGcrMssMRGXLW80ubjWsW9VH5GF8y1Y0SFLY9AbqSk6nt0PnOx4H4WNJYZ13GUPw==} + engines: {node: ^20.0.0 || ^22.0.0 || >=24.0.0} + hasBin: true + peerDependencies: + '@edge-runtime/vm': '*' + '@opentelemetry/api': ^1.9.0 + '@types/node': ^20.0.0 || ^22.0.0 || >=24.0.0 + '@vitest/browser-playwright': 4.1.10 + '@vitest/browser-preview': 4.1.10 + '@vitest/browser-webdriverio': 4.1.10 + '@vitest/coverage-istanbul': 4.1.10 + '@vitest/coverage-v8': 4.1.10 + '@vitest/ui': 4.1.10 + happy-dom: '*' + jsdom: '*' + vite: ^6.0.0 || ^7.0.0 || ^8.0.0 + peerDependenciesMeta: + '@edge-runtime/vm': + optional: true + '@opentelemetry/api': + optional: true + '@types/node': + optional: true + '@vitest/browser-playwright': + optional: true + '@vitest/browser-preview': + optional: true + '@vitest/browser-webdriverio': + optional: true + '@vitest/coverage-istanbul': + optional: true + '@vitest/coverage-v8': + optional: true + '@vitest/ui': + optional: true + happy-dom: + optional: true + jsdom: + optional: true + vscode-uri@3.1.0: resolution: {integrity: sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==} + w3c-xmlserializer@5.0.0: + resolution: {integrity: sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==} + engines: {node: '>=18'} + + webidl-conversions@8.0.1: + resolution: {integrity: sha512-BMhLD/Sw+GbJC21C/UgyaZX41nPt8bUTg+jWyDeg7e7YN4xOM05YPSIXceACnXVtqyEw/LMClUQMtMZ+PGGpqQ==} + engines: {node: '>=20'} + webpack-virtual-modules@0.6.2: resolution: {integrity: sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==} + whatwg-mimetype@5.0.0: + resolution: {integrity: sha512-sXcNcHOC51uPGF0P/D4NVtrkjSU2fNsm9iog4ZvZJsL3rjoDAzXZhkm2MWt1y+PUdggKAYVoMAIYcs78wJ51Cw==} + engines: {node: '>=20'} + + whatwg-url@16.0.1: + resolution: {integrity: sha512-1to4zXBxmXHV3IiSSEInrreIlu02vUOvrhxJJH5vcxYTBDAx51cqZiKdyTxlecdKNSjj8EcxGBxNf6Vg+945gw==} + engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0} + which-typed-array@1.1.22: resolution: {integrity: sha512-fvO4ExWMFsqyhG3AiPAObMuY1lxaqgYcxbc49CNdWDDECOJNgQyvsOWVwbZc+qf3rzRtxojBK+CMEv0Ld5CYpw==} engines: {node: '>= 0.4'} @@ -2682,6 +3060,11 @@ packages: engines: {node: '>= 8'} hasBin: true + why-is-node-running@2.3.0: + resolution: {integrity: sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==} + engines: {node: '>=8'} + hasBin: true + wordwrapjs@5.1.1: resolution: {integrity: sha512-0yweIbkINJodk27gX9LBGMzyQdBDan3s/dEAiwBOj+Mf0PPyWL6/rikalkv8EeD0E8jm4o5RXEOrFTP3NXbhJg==} engines: {node: '>=12.17'} @@ -2717,6 +3100,13 @@ packages: utf-8-validate: optional: true + xml-name-validator@5.0.0: + resolution: {integrity: sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==} + engines: {node: '>=18'} + + xmlchars@2.2.0: + resolution: {integrity: sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==} + yallist@3.1.1: resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==} @@ -2743,6 +3133,28 @@ packages: snapshots: + '@adobe/css-tools@4.5.0': {} + + '@asamuzakjp/css-color@5.1.11': + dependencies: + '@asamuzakjp/generational-cache': 1.0.1 + '@csstools/css-calc': 3.2.1(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0) + '@csstools/css-color-parser': 4.1.9(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0) + '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0) + '@csstools/css-tokenizer': 4.0.0 + + '@asamuzakjp/dom-selector@7.1.1': + dependencies: + '@asamuzakjp/generational-cache': 1.0.1 + '@asamuzakjp/nwsapi': 2.3.9 + bidi-js: 1.0.3 + css-tree: 3.2.1 + is-potential-custom-element-name: 1.0.1 + + '@asamuzakjp/generational-cache@1.0.1': {} + + '@asamuzakjp/nwsapi@2.3.9': {} + '@babel/code-frame@7.29.7': dependencies: '@babel/helper-validator-identifier': 7.29.7 @@ -2832,6 +3244,8 @@ snapshots: '@babel/core': 7.29.7 '@babel/helper-plugin-utils': 7.29.7 + '@babel/runtime@7.29.7': {} + '@babel/template@7.29.7': dependencies: '@babel/code-frame': 7.29.7 @@ -2890,6 +3304,10 @@ snapshots: '@biomejs/cli-win32-x64@2.5.3': optional: true + '@bramus/specificity@2.4.2': + dependencies: + css-tree: 3.2.1 + '@clack/core@0.5.0': dependencies: picocolors: 1.1.1 @@ -2901,6 +3319,30 @@ snapshots: picocolors: 1.1.1 sisteransi: 1.0.5 + '@csstools/color-helpers@6.1.0': {} + + '@csstools/css-calc@3.2.1(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)': + dependencies: + '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0) + '@csstools/css-tokenizer': 4.0.0 + + '@csstools/css-color-parser@4.1.9(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)': + dependencies: + '@csstools/color-helpers': 6.1.0 + '@csstools/css-calc': 3.2.1(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0) + '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0) + '@csstools/css-tokenizer': 4.0.0 + + '@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0)': + dependencies: + '@csstools/css-tokenizer': 4.0.0 + + '@csstools/css-syntax-patches-for-csstree@1.1.6(css-tree@3.2.1)': + optionalDependencies: + css-tree: 3.2.1 + + '@csstools/css-tokenizer@4.0.0': {} + '@csstools/postcss-cascade-layers@5.0.2(postcss@8.5.14)': dependencies: '@csstools/selector-specificity': 5.0.0(postcss-selector-parser@7.1.1) @@ -2989,6 +3431,8 @@ snapshots: '@esbuild/win32-x64@0.25.12': optional: true + '@exodus/bytes@1.15.1': {} + '@floating-ui/core@1.7.5': dependencies: '@floating-ui/utils': 0.2.11 @@ -3148,14 +3592,14 @@ snapshots: postcss-selector-parser: 7.1.1 ts-pattern: 5.9.0 - '@pandacss/dev@1.11.3(typescript@5.9.3)': + '@pandacss/dev@1.11.3(jsdom@29.1.1)(typescript@5.9.3)': dependencies: '@clack/prompts': 0.11.0 '@pandacss/config': 1.11.3 '@pandacss/logger': 1.11.3 - '@pandacss/mcp': 1.11.3(typescript@5.9.3) - '@pandacss/node': 1.11.3(typescript@5.9.3) - '@pandacss/postcss': 1.11.3(typescript@5.9.3) + '@pandacss/mcp': 1.11.3(jsdom@29.1.1)(typescript@5.9.3) + '@pandacss/node': 1.11.3(jsdom@29.1.1)(typescript@5.9.3) + '@pandacss/postcss': 1.11.3(jsdom@29.1.1)(typescript@5.9.3) '@pandacss/preset-base': 1.11.3 '@pandacss/preset-panda': 1.11.3 '@pandacss/shared': 1.11.3 @@ -3168,10 +3612,10 @@ snapshots: - supports-color - typescript - '@pandacss/extractor@1.11.3(typescript@5.9.3)': + '@pandacss/extractor@1.11.3(jsdom@29.1.1)(typescript@5.9.3)': dependencies: '@pandacss/shared': 1.11.3 - ts-evaluator: 1.2.0(typescript@5.9.3) + ts-evaluator: 1.2.0(jsdom@29.1.1)(typescript@5.9.3) ts-morph: 28.0.0 transitivePeerDependencies: - jsdom @@ -3198,12 +3642,12 @@ snapshots: '@pandacss/types': 1.11.3 kleur: 4.1.5 - '@pandacss/mcp@1.11.3(typescript@5.9.3)': + '@pandacss/mcp@1.11.3(jsdom@29.1.1)(typescript@5.9.3)': dependencies: '@clack/prompts': 0.11.0 '@modelcontextprotocol/sdk': 1.29.0(zod@4.4.3) '@pandacss/logger': 1.11.3 - '@pandacss/node': 1.11.3(typescript@5.9.3) + '@pandacss/node': 1.11.3(jsdom@29.1.1)(typescript@5.9.3) '@pandacss/token-dictionary': 1.11.3 '@pandacss/types': 1.11.3 zod: 4.4.3 @@ -3213,13 +3657,13 @@ snapshots: - supports-color - typescript - '@pandacss/node@1.11.3(typescript@5.9.3)': + '@pandacss/node@1.11.3(jsdom@29.1.1)(typescript@5.9.3)': dependencies: '@pandacss/config': 1.11.3 '@pandacss/core': 1.11.3 '@pandacss/generator': 1.11.3 '@pandacss/logger': 1.11.3 - '@pandacss/parser': 1.11.3(typescript@5.9.3) + '@pandacss/parser': 1.11.3(jsdom@29.1.1)(typescript@5.9.3) '@pandacss/plugin-lightningcss': 1.11.3 '@pandacss/plugin-svelte': 1.11.3 '@pandacss/plugin-vue': 1.11.3 @@ -3251,11 +3695,11 @@ snapshots: - jsdom - typescript - '@pandacss/parser@1.11.3(typescript@5.9.3)': + '@pandacss/parser@1.11.3(jsdom@29.1.1)(typescript@5.9.3)': dependencies: '@pandacss/config': 1.11.3 '@pandacss/core': 1.11.3 - '@pandacss/extractor': 1.11.3(typescript@5.9.3) + '@pandacss/extractor': 1.11.3(jsdom@29.1.1)(typescript@5.9.3) '@pandacss/logger': 1.11.3 '@pandacss/shared': 1.11.3 '@pandacss/types': 1.11.3 @@ -3283,9 +3727,9 @@ snapshots: '@vue/compiler-sfc': 3.5.25 magic-string: 0.30.21 - '@pandacss/postcss@1.11.3(typescript@5.9.3)': + '@pandacss/postcss@1.11.3(jsdom@29.1.1)(typescript@5.9.3)': dependencies: - '@pandacss/node': 1.11.3(typescript@5.9.3) + '@pandacss/node': 1.11.3(jsdom@29.1.1)(typescript@5.9.3) postcss: 8.5.14 transitivePeerDependencies: - jsdom @@ -3750,6 +4194,8 @@ snapshots: transitivePeerDependencies: - '@types/node' + '@standard-schema/spec@1.1.0': {} + '@storybook/builder-vite@8.6.18(storybook@8.6.18(prettier@3.2.5))(vite@6.4.3(lightningcss@1.31.1)(yaml@2.9.0))': dependencies: '@storybook/csf-plugin': 8.6.18(storybook@8.6.18(prettier@3.2.5)) @@ -3842,6 +4288,41 @@ snapshots: dependencies: storybook: 8.6.18(prettier@3.2.5) + '@testing-library/dom@10.4.1': + dependencies: + '@babel/code-frame': 7.29.7 + '@babel/runtime': 7.29.7 + '@types/aria-query': 5.0.4 + aria-query: 5.3.0 + dom-accessibility-api: 0.5.16 + lz-string: 1.5.0 + picocolors: 1.1.1 + pretty-format: 27.5.1 + + '@testing-library/jest-dom@7.0.0(@testing-library/dom@10.4.1)': + dependencies: + '@adobe/css-tools': 4.5.0 + '@testing-library/dom': 10.4.1 + aria-query: 5.3.2 + css.escape: 1.5.1 + dom-accessibility-api: 0.6.3 + picocolors: 1.1.1 + redent: 3.0.0 + + '@testing-library/react@16.3.2(@testing-library/dom@10.4.1)(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)': + dependencies: + '@babel/runtime': 7.29.7 + '@testing-library/dom': 10.4.1 + react: 19.2.7 + react-dom: 19.2.7(react@19.2.7) + optionalDependencies: + '@types/react': 19.2.17 + '@types/react-dom': 19.2.3(@types/react@19.2.17) + + '@testing-library/user-event@14.6.1(@testing-library/dom@10.4.1)': + dependencies: + '@testing-library/dom': 10.4.1 + '@ts-morph/common@0.29.0': dependencies: minimatch: 10.2.5 @@ -3850,6 +4331,8 @@ snapshots: '@types/argparse@1.0.38': {} + '@types/aria-query@5.0.4': {} + '@types/babel__core@7.20.5': dependencies: '@babel/parser': 7.29.7 @@ -3871,6 +4354,13 @@ snapshots: dependencies: '@babel/types': 7.29.7 + '@types/chai@5.2.3': + dependencies: + '@types/deep-eql': 4.0.2 + assertion-error: 2.0.1 + + '@types/deep-eql@4.0.2': {} + '@types/doctrine@0.0.9': {} '@types/estree@1.0.9': {} @@ -3899,6 +4389,47 @@ snapshots: transitivePeerDependencies: - supports-color + '@vitest/expect@4.1.10': + dependencies: + '@standard-schema/spec': 1.1.0 + '@types/chai': 5.2.3 + '@vitest/spy': 4.1.10 + '@vitest/utils': 4.1.10 + chai: 6.2.2 + tinyrainbow: 3.1.0 + + '@vitest/mocker@4.1.10(vite@6.4.3(lightningcss@1.31.1)(yaml@2.9.0))': + dependencies: + '@vitest/spy': 4.1.10 + estree-walker: 3.0.3 + magic-string: 0.30.21 + optionalDependencies: + vite: 6.4.3(lightningcss@1.31.1)(yaml@2.9.0) + + '@vitest/pretty-format@4.1.10': + dependencies: + tinyrainbow: 3.1.0 + + '@vitest/runner@4.1.10': + dependencies: + '@vitest/utils': 4.1.10 + pathe: 2.0.3 + + '@vitest/snapshot@4.1.10': + dependencies: + '@vitest/pretty-format': 4.1.10 + '@vitest/utils': 4.1.10 + magic-string: 0.30.21 + pathe: 2.0.3 + + '@vitest/spy@4.1.10': {} + + '@vitest/utils@4.1.10': + dependencies: + '@vitest/pretty-format': 4.1.10 + convert-source-map: 2.0.0 + tinyrainbow: 3.1.0 + '@volar/language-core@2.4.28': dependencies: '@volar/source-map': 2.4.28 @@ -4025,6 +4556,8 @@ snapshots: dependencies: color-convert: 2.0.1 + ansi-styles@5.2.0: {} + ansi-styles@6.2.3: {} argparse@1.0.10: @@ -4035,6 +4568,14 @@ snapshots: dependencies: tslib: 2.8.1 + aria-query@5.3.0: + dependencies: + dequal: 2.0.3 + + aria-query@5.3.2: {} + + assertion-error@2.0.1: {} + ast-types@0.16.1: dependencies: tslib: 2.8.1 @@ -4055,6 +4596,10 @@ snapshots: dependencies: open: 8.4.2 + bidi-js@1.0.3: + dependencies: + require-from-string: 2.0.2 + body-parser@2.2.2: dependencies: bytes: 3.1.2 @@ -4122,6 +4667,8 @@ snapshots: caniuse-lite@1.0.30001797: {} + chai@6.2.2: {} + chokidar@4.0.3: dependencies: readdirp: 4.1.2 @@ -4176,16 +4723,32 @@ snapshots: dependencies: '@types/node': 17.0.45 + css-tree@3.2.1: + dependencies: + mdn-data: 2.27.1 + source-map-js: 1.2.1 + + css.escape@1.5.1: {} + cssesc@3.0.0: {} csstype@3.2.3: {} + data-urls@7.0.0: + dependencies: + whatwg-mimetype: 5.0.0 + whatwg-url: 16.0.1 + transitivePeerDependencies: + - '@noble/hashes' + de-indent@1.0.2: {} debug@4.4.3: dependencies: ms: 2.1.3 + decimal.js@10.6.0: {} + define-data-property@1.1.4: dependencies: es-define-property: 1.0.1 @@ -4196,6 +4759,8 @@ snapshots: depd@2.0.0: {} + dequal@2.0.3: {} + detect-libc@2.1.2: {} detect-node-es@1.1.0: {} @@ -4206,6 +4771,10 @@ snapshots: dependencies: esutils: 2.0.3 + dom-accessibility-api@0.5.16: {} + + dom-accessibility-api@0.6.3: {} + dunder-proto@1.0.1: dependencies: call-bind-apply-helpers: 1.0.2 @@ -4230,12 +4799,16 @@ snapshots: entities@7.0.1: {} + entities@8.0.0: {} + environment@1.1.0: {} es-define-property@1.0.1: {} es-errors@1.3.0: {} + es-module-lexer@2.3.1: {} + es-object-atoms@1.1.2: dependencies: es-errors: 1.3.0 @@ -4284,6 +4857,10 @@ snapshots: estree-walker@2.0.2: {} + estree-walker@3.0.3: + dependencies: + '@types/estree': 1.0.9 + esutils@2.0.3: {} etag@1.8.1: {} @@ -4296,6 +4873,8 @@ snapshots: dependencies: eventsource-parser: 3.1.0 + expect-type@1.4.0: {} + express-rate-limit@8.5.2(express@5.2.1): dependencies: express: 5.2.1 @@ -4481,6 +5060,12 @@ snapshots: hono@4.12.25: {} + html-encoding-sniffer@6.0.0: + dependencies: + '@exodus/bytes': 1.15.1 + transitivePeerDependencies: + - '@noble/hashes' + http-errors@2.0.1: dependencies: depd: 2.0.0 @@ -4497,6 +5082,8 @@ snapshots: import-lazy@4.0.0: {} + indent-string@4.0.0: {} + inherits@2.0.4: {} ip-address@10.2.0: {} @@ -4538,6 +5125,8 @@ snapshots: is-number@7.0.0: {} + is-potential-custom-element-name@1.0.1: {} + is-promise@4.0.0: {} is-regex@1.2.1: @@ -4573,6 +5162,32 @@ snapshots: jsdoc-type-pratt-parser@4.8.0: {} + jsdom@29.1.1: + dependencies: + '@asamuzakjp/css-color': 5.1.11 + '@asamuzakjp/dom-selector': 7.1.1 + '@bramus/specificity': 2.4.2 + '@csstools/css-syntax-patches-for-csstree': 1.1.6(css-tree@3.2.1) + '@exodus/bytes': 1.15.1 + css-tree: 3.2.1 + data-urls: 7.0.0 + decimal.js: 10.6.0 + html-encoding-sniffer: 6.0.0 + is-potential-custom-element-name: 1.0.1 + lru-cache: 11.5.2 + parse5: 8.0.1 + saxes: 6.0.0 + symbol-tree: 3.2.4 + tough-cookie: 6.0.2 + undici: 7.28.0 + w3c-xmlserializer: 5.0.0 + webidl-conversions: 8.0.1 + whatwg-mimetype: 5.0.0 + whatwg-url: 16.0.1 + xml-name-validator: 5.0.0 + transitivePeerDependencies: + - '@noble/hashes' + jsesc@3.1.0: {} json-schema-traverse@1.0.0: {} @@ -4683,10 +5298,14 @@ snapshots: lru-cache@10.4.3: {} + lru-cache@11.5.2: {} + lru-cache@5.1.1: dependencies: yallist: 3.1.1 + lz-string@1.5.0: {} + magic-string@0.27.0: dependencies: '@jridgewell/sourcemap-codec': 1.5.5 @@ -4697,6 +5316,8 @@ snapshots: math-intrinsics@1.1.0: {} + mdn-data@2.27.1: {} + media-typer@1.1.0: {} merge-descriptors@2.0.0: {} @@ -4718,6 +5339,8 @@ snapshots: mimic-function@5.0.1: {} + min-indent@1.0.1: {} + minimatch@10.2.3: dependencies: brace-expansion: 5.0.6 @@ -4757,6 +5380,8 @@ snapshots: object-path@0.11.8: {} + obug@2.1.4: {} + on-finished@2.4.1: dependencies: ee-first: 1.1.1 @@ -4793,6 +5418,10 @@ snapshots: package-manager-detector@1.6.0: {} + parse5@8.0.1: + dependencies: + entities: 8.0.0 + parseurl@1.3.3: {} path-browserify@1.0.1: {} @@ -4893,6 +5522,12 @@ snapshots: prettier@3.2.5: {} + pretty-format@27.5.1: + dependencies: + ansi-regex: 5.0.1 + ansi-styles: 5.2.0 + react-is: 17.0.2 + process@0.11.10: {} proxy-addr@2.0.7: @@ -4900,6 +5535,8 @@ snapshots: forwarded: 0.2.0 ipaddr.js: 1.9.1 + punycode@2.3.1: {} + qs@6.15.2: dependencies: side-channel: 1.1.1 @@ -4948,6 +5585,8 @@ snapshots: react: 19.2.7 react-dom: 19.2.7(react@19.2.7) + react-is@17.0.2: {} + react-refresh@0.17.0: {} react-remove-scroll-bar@2.3.8(@types/react@19.2.17)(react@19.2.7): @@ -4989,6 +5628,11 @@ snapshots: tiny-invariant: 1.3.3 tslib: 2.8.1 + redent@3.0.0: + dependencies: + indent-string: 4.0.0 + strip-indent: 3.0.0 + require-from-string@2.0.2: {} resolve-pkg-maps@1.0.0: {} @@ -5062,6 +5706,10 @@ snapshots: safer-buffer@2.1.2: {} + saxes@6.0.0: + dependencies: + xmlchars: 2.2.0 + scheduler@0.27.0: {} semver@6.3.1: {} @@ -5140,6 +5788,8 @@ snapshots: side-channel-map: 1.0.1 side-channel-weakmap: 1.0.2 + siginfo@2.0.0: {} + signal-exit@4.1.0: {} sisteransi@1.0.5: {} @@ -5166,8 +5816,12 @@ snapshots: sprintf-js@1.0.3: {} + stackback@0.0.2: {} + statuses@2.0.2: {} + std-env@4.2.0: {} + storybook@8.6.18(prettier@3.2.5): dependencies: '@storybook/core': 8.6.18(prettier@3.2.5)(storybook@8.6.18(prettier@3.2.5)) @@ -5213,6 +5867,10 @@ snapshots: strip-bom@3.0.0: {} + strip-indent@3.0.0: + dependencies: + min-indent: 1.0.1 + strip-indent@4.1.1: {} supports-color@8.1.1: @@ -5221,6 +5879,8 @@ snapshots: supports-preserve-symlinks-flag@1.0.0: {} + symbol-tree@3.2.4: {} + table@6.9.0: dependencies: ajv: 8.20.0 @@ -5231,6 +5891,8 @@ snapshots: tiny-invariant@1.3.3: {} + tinybench@2.9.0: {} + tinyexec@1.2.4: {} tinyglobby@0.2.17: @@ -5238,20 +5900,38 @@ snapshots: fdir: 6.5.0(picomatch@4.0.4) picomatch: 4.0.4 + tinyrainbow@3.1.0: {} + + tldts-core@7.4.9: {} + + tldts@7.4.9: + dependencies: + tldts-core: 7.4.9 + to-regex-range@5.0.1: dependencies: is-number: 7.0.0 toidentifier@1.0.1: {} + tough-cookie@6.0.2: + dependencies: + tldts: 7.4.9 + + tr46@6.0.0: + dependencies: + punycode: 2.3.1 + ts-dedent@2.2.0: {} - ts-evaluator@1.2.0(typescript@5.9.3): + ts-evaluator@1.2.0(jsdom@29.1.1)(typescript@5.9.3): dependencies: ansi-colors: 4.1.3 crosspath: 2.0.0 object-path: 0.11.8 typescript: 5.9.3 + optionalDependencies: + jsdom: 29.1.1 ts-morph@28.0.0: dependencies: @@ -5280,6 +5960,8 @@ snapshots: ufo@1.6.4: {} + undici@7.28.0: {} + universalify@2.0.1: {} unpipe@1.0.0: {} @@ -5360,10 +6042,53 @@ snapshots: lightningcss: 1.31.1 yaml: 2.9.0 + vitest@4.1.10(jsdom@29.1.1)(vite@6.4.3(lightningcss@1.31.1)(yaml@2.9.0)): + dependencies: + '@vitest/expect': 4.1.10 + '@vitest/mocker': 4.1.10(vite@6.4.3(lightningcss@1.31.1)(yaml@2.9.0)) + '@vitest/pretty-format': 4.1.10 + '@vitest/runner': 4.1.10 + '@vitest/snapshot': 4.1.10 + '@vitest/spy': 4.1.10 + '@vitest/utils': 4.1.10 + es-module-lexer: 2.3.1 + expect-type: 1.4.0 + magic-string: 0.30.21 + obug: 2.1.4 + pathe: 2.0.3 + picomatch: 4.0.4 + std-env: 4.2.0 + tinybench: 2.9.0 + tinyexec: 1.2.4 + tinyglobby: 0.2.17 + tinyrainbow: 3.1.0 + vite: 6.4.3(lightningcss@1.31.1)(yaml@2.9.0) + why-is-node-running: 2.3.0 + optionalDependencies: + jsdom: 29.1.1 + transitivePeerDependencies: + - msw + vscode-uri@3.1.0: {} + w3c-xmlserializer@5.0.0: + dependencies: + xml-name-validator: 5.0.0 + + webidl-conversions@8.0.1: {} + webpack-virtual-modules@0.6.2: {} + whatwg-mimetype@5.0.0: {} + + whatwg-url@16.0.1: + dependencies: + '@exodus/bytes': 1.15.1 + tr46: 6.0.0 + webidl-conversions: 8.0.1 + transitivePeerDependencies: + - '@noble/hashes' + which-typed-array@1.1.22: dependencies: available-typed-arrays: 1.0.7 @@ -5378,6 +6103,11 @@ snapshots: dependencies: isexe: 2.0.0 + why-is-node-running@2.3.0: + dependencies: + siginfo: 2.0.0 + stackback: 0.0.2 + wordwrapjs@5.1.1: {} wrap-ansi@10.0.0: @@ -5408,6 +6138,10 @@ snapshots: ws@8.21.0: {} + xml-name-validator@5.0.0: {} + + xmlchars@2.2.0: {} + yallist@3.1.1: {} yaml@2.9.0: diff --git a/src/utils/rich-text/setupTests.ts b/src/utils/rich-text/setupTests.ts new file mode 100644 index 0000000..f149f27 --- /dev/null +++ b/src/utils/rich-text/setupTests.ts @@ -0,0 +1 @@ +import "@testing-library/jest-dom/vitest"; diff --git a/src/utils/rich-text/smoke.test.ts b/src/utils/rich-text/smoke.test.ts new file mode 100644 index 0000000..95c85ec --- /dev/null +++ b/src/utils/rich-text/smoke.test.ts @@ -0,0 +1,8 @@ +import { describe, expect, it } from "vitest"; + +describe("vitest setup", () => { + it("runs in a jsdom environment", () => { + expect(typeof document).toBe("object"); + expect(document.createElement("div").tagName).toBe("DIV"); + }); +}); diff --git a/vitest.config.ts b/vitest.config.ts new file mode 100644 index 0000000..ab8ac17 --- /dev/null +++ b/vitest.config.ts @@ -0,0 +1,15 @@ +import { resolve } from "node:path"; +import react from "@vitejs/plugin-react"; +import { defineConfig } from "vite"; + +export default defineConfig({ + resolve: { + alias: { "@": resolve(__dirname, "src") }, + }, + plugins: [react()], + test: { + environment: "jsdom", + setupFiles: ["./src/utils/rich-text/setupTests.ts"], + globals: true, + }, +}); From 99bb6bf44715086b86e38e3416fca8cba982c863 Mon Sep 17 00:00:00 2001 From: jansaldo Date: Wed, 22 Jul 2026 17:36:40 -0300 Subject: [PATCH 25/83] feat(rich-text): add RichTextDocument marks model --- src/utils/rich-text/model.test.ts | 175 ++++++++++++++++++++++++++++++ src/utils/rich-text/model.ts | 135 +++++++++++++++++++++++ src/utils/rich-text/types.ts | 21 ++++ 3 files changed, 331 insertions(+) create mode 100644 src/utils/rich-text/model.test.ts create mode 100644 src/utils/rich-text/model.ts create mode 100644 src/utils/rich-text/types.ts diff --git a/src/utils/rich-text/model.test.ts b/src/utils/rich-text/model.test.ts new file mode 100644 index 0000000..390ef3a --- /dev/null +++ b/src/utils/rich-text/model.test.ts @@ -0,0 +1,175 @@ +import { describe, expect, it } from "vitest"; +import { + createParagraph, + documentFromPlainText, + mergeAdjacentRuns, + paragraphPlainText, + sameMark, + serializeToPlainText, + splitRunsAtOffsets, + toggleMark, +} from "./model"; +import type { RichTextParagraph, TextRun } from "./types"; + +describe("createParagraph", () => { + it("wraps plain text in a single unmarked run", () => { + expect(createParagraph("p1", "hello")).toEqual({ + id: "p1", + runs: [{ text: "hello", marks: [] }], + }); + }); +}); + +describe("documentFromPlainText", () => { + it("splits on blank lines into one paragraph per block, no marks", () => { + const doc = documentFromPlainText("Primero.\n\nSegundo.\n\nTercero."); + expect(doc.paragraphs).toHaveLength(3); + expect(doc.paragraphs.map((p) => paragraphPlainText(p))).toEqual([ + "Primero.", + "Segundo.", + "Tercero.", + ]); + expect(doc.paragraphs[0].runs[0].marks).toEqual([]); + }); + + it("ignores leading/trailing blank lines", () => { + const doc = documentFromPlainText("\n\nSolo esto.\n\n"); + expect(doc.paragraphs).toHaveLength(1); + }); +}); + +describe("paragraphPlainText / serializeToPlainText", () => { + it("concatenates run text within a paragraph", () => { + const p: RichTextParagraph = { + id: "p1", + runs: [ + { text: "hola ", marks: [] }, + { text: "mundo", marks: [{ type: "bold" }] }, + ], + }; + expect(paragraphPlainText(p)).toBe("hola mundo"); + }); + + it("joins paragraphs with a blank line", () => { + const doc = documentFromPlainText("Uno.\n\nDos."); + expect(serializeToPlainText(doc)).toBe("Uno.\n\nDos."); + }); +}); + +describe("sameMark", () => { + it("matches non-highlight marks by type alone", () => { + expect(sameMark({ type: "bold" }, { type: "bold" })).toBe(true); + }); + + it("requires matching color for highlight marks", () => { + expect( + sameMark( + { type: "highlight", color: "category.yellow-light" }, + { type: "highlight", color: "category.yellow-light" }, + ), + ).toBe(true); + expect( + sameMark( + { type: "highlight", color: "category.yellow-light" }, + { type: "highlight", color: "category.green-light" }, + ), + ).toBe(false); + }); +}); + +describe("splitRunsAtOffsets", () => { + it("splits a single run at the given character offsets", () => { + const runs: TextRun[] = [{ text: "hello world", marks: [] }]; + const split = splitRunsAtOffsets(runs, [5]); + expect(split.map((r) => r.text)).toEqual(["hello", " world"]); + }); + + it("is a no-op for offsets that already land on a run boundary", () => { + const runs: TextRun[] = [ + { text: "hello", marks: [] }, + { text: " world", marks: [] }, + ]; + expect(splitRunsAtOffsets(runs, [5]).map((r) => r.text)).toEqual([ + "hello", + " world", + ]); + }); +}); + +describe("mergeAdjacentRuns", () => { + it("merges consecutive runs with identical marks", () => { + const runs: TextRun[] = [ + { text: "he", marks: [{ type: "bold" }] }, + { text: "llo", marks: [{ type: "bold" }] }, + { text: " world", marks: [] }, + ]; + expect(mergeAdjacentRuns(runs)).toEqual([ + { text: "hello", marks: [{ type: "bold" }] }, + { text: " world", marks: [] }, + ]); + }); + + it("drops empty runs", () => { + const runs: TextRun[] = [ + { text: "", marks: [] }, + { text: "hi", marks: [] }, + ]; + expect(mergeAdjacentRuns(runs)).toEqual([{ text: "hi", marks: [] }]); + }); +}); + +describe("toggleMark", () => { + it("adds a mark to the runs fully inside the given range", () => { + const p = createParagraph("p1", "hello world"); + const next = toggleMark(p, 0, 5, { type: "bold" }); + expect(next.runs).toEqual([ + { text: "hello", marks: [{ type: "bold" }] }, + { text: " world", marks: [] }, + ]); + }); + + it("removes the mark when the whole range already has it (toggle off)", () => { + const p = createParagraph("p1", "hello world"); + const bolded = toggleMark(p, 0, 5, { type: "bold" }); + const toggledOff = toggleMark(bolded, 0, 5, { type: "bold" }); + expect(toggledOff.runs).toEqual([{ text: "hello world", marks: [] }]); + }); + + it("only adds the mark when the range is partially marked (not a toggle-off)", () => { + const p: RichTextParagraph = { + id: "p1", + runs: [ + { text: "hel", marks: [{ type: "bold" }] }, + { text: "lo world", marks: [] }, + ], + }; + const next = toggleMark(p, 0, 5, { type: "bold" }); + expect(next.runs).toEqual([ + { text: "hello", marks: [{ type: "bold" }] }, + { text: " world", marks: [] }, + ]); + }); + + it("replaces a highlight of a different color rather than stacking marks", () => { + const p = createParagraph("p1", "hello"); + const yellow = toggleMark(p, 0, 5, { + type: "highlight", + color: "category.yellow-light", + }); + const green = toggleMark(yellow, 0, 5, { + type: "highlight", + color: "category.green-light", + }); + expect(green.runs).toEqual([ + { + text: "hello", + marks: [{ type: "highlight", color: "category.green-light" }], + }, + ]); + }); + + it("is a no-op for a collapsed (zero-length) range", () => { + const p = createParagraph("p1", "hello"); + expect(toggleMark(p, 2, 2, { type: "bold" })).toBe(p); + }); +}); diff --git a/src/utils/rich-text/model.ts b/src/utils/rich-text/model.ts new file mode 100644 index 0000000..ba037fa --- /dev/null +++ b/src/utils/rich-text/model.ts @@ -0,0 +1,135 @@ +import type { + RichTextDocument, + RichTextParagraph, + TextMark, + TextRun, +} from "./types"; + +export function createParagraph(id: string, text: string): RichTextParagraph { + return { id, runs: [{ text, marks: [] }] }; +} + +export function documentFromPlainText(text: string): RichTextDocument { + const blocks = text + .split(/\n{2,}/) + .map((block) => block.trim()) + .filter((block) => block.length > 0); + + return { + paragraphs: blocks.map((block, index) => + createParagraph(`p${index}`, block), + ), + }; +} + +export function paragraphPlainText(paragraph: RichTextParagraph): string { + return paragraph.runs.map((run) => run.text).join(""); +} + +export function serializeToPlainText(document: RichTextDocument): string { + return document.paragraphs.map(paragraphPlainText).join("\n\n"); +} + +export function sameMark(a: TextMark, b: TextMark): boolean { + if (a.type !== b.type) return false; + return a.type === "highlight" ? a.color === b.color : true; +} + +function marksEqual(a: TextMark[], b: TextMark[]): boolean { + if (a.length !== b.length) return false; + return a.every((mark) => b.some((other) => sameMark(mark, other))); +} + +function splitRunAt(run: TextRun, offset: number): [TextRun, TextRun] { + return [ + { text: run.text.slice(0, offset), marks: run.marks }, + { text: run.text.slice(offset), marks: run.marks }, + ]; +} + +export function splitRunsAtOffsets( + runs: TextRun[], + offsets: number[], +): TextRun[] { + const sortedOffsets = [...new Set(offsets)].sort((a, b) => a - b); + let result = runs; + + for (const offset of sortedOffsets) { + const next: TextRun[] = []; + let pos = 0; + for (const run of result) { + const runStart = pos; + const runEnd = pos + run.text.length; + if (offset > runStart && offset < runEnd) { + const [before, after] = splitRunAt(run, offset - runStart); + next.push(before, after); + } else { + next.push(run); + } + pos = runEnd; + } + result = next; + } + + return result; +} + +export function mergeAdjacentRuns(runs: TextRun[]): TextRun[] { + const merged: TextRun[] = []; + for (const run of runs) { + if (run.text.length === 0) continue; + const prev = merged[merged.length - 1]; + if (prev && marksEqual(prev.marks, run.marks)) { + prev.text += run.text; + } else { + merged.push({ text: run.text, marks: run.marks }); + } + } + return merged; +} + +export function toggleMark( + paragraph: RichTextParagraph, + startOffset: number, + endOffset: number, + mark: TextMark, +): RichTextParagraph { + if (startOffset === endOffset) return paragraph; + const from = Math.min(startOffset, endOffset); + const to = Math.max(startOffset, endOffset); + + const splitRuns = splitRunsAtOffsets(paragraph.runs, [from, to]); + + const inRange = (runStart: number, runEnd: number) => + runStart >= from && runEnd <= to && runEnd > runStart; + + let pos = 0; + const runsInRange = splitRuns.filter((run) => { + const runStart = pos; + pos += run.text.length; + return inRange(runStart, pos); + }); + + const allHaveMark = + runsInRange.length > 0 && + runsInRange.every((run) => run.marks.some((m) => sameMark(m, mark))); + + pos = 0; + const nextRuns = splitRuns.map((run) => { + const runStart = pos; + pos += run.text.length; + if (!inRange(runStart, pos)) return run; + + const withoutSameType = run.marks.filter((m) => m.type !== mark.type); + return { + text: run.text, + marks: allHaveMark ? withoutSameType : [...withoutSameType, mark], + }; + }); + + return { ...paragraph, runs: mergeAdjacentRuns(nextRuns) }; +} + +export type { MarkType } from "./types"; +// Re-export types for convenience +export type { RichTextDocument, RichTextParagraph, TextMark, TextRun }; diff --git a/src/utils/rich-text/types.ts b/src/utils/rich-text/types.ts new file mode 100644 index 0000000..4122692 --- /dev/null +++ b/src/utils/rich-text/types.ts @@ -0,0 +1,21 @@ +export type MarkType = "bold" | "italic" | "underline" | "highlight"; + +export interface TextMark { + type: MarkType; + /** Only present when type === "highlight" — a token from RICH_TEXT_HIGHLIGHT_COLORS. */ + color?: string; +} + +export interface TextRun { + text: string; + marks: TextMark[]; +} + +export interface RichTextParagraph { + id: string; + runs: TextRun[]; +} + +export interface RichTextDocument { + paragraphs: RichTextParagraph[]; +} From db44fdb657983ce9b435ac24a071cb8a9763219f Mon Sep 17 00:00:00 2001 From: jansaldo Date: Wed, 22 Jul 2026 17:42:04 -0300 Subject: [PATCH 26/83] feat(rich-text): add paragraph text reconciliation for contentEditable typing --- src/utils/rich-text/reconcile.test.ts | 60 +++++++++++++++++++++++ src/utils/rich-text/reconcile.ts | 69 +++++++++++++++++++++++++++ 2 files changed, 129 insertions(+) create mode 100644 src/utils/rich-text/reconcile.test.ts create mode 100644 src/utils/rich-text/reconcile.ts diff --git a/src/utils/rich-text/reconcile.test.ts b/src/utils/rich-text/reconcile.test.ts new file mode 100644 index 0000000..8eebd01 --- /dev/null +++ b/src/utils/rich-text/reconcile.test.ts @@ -0,0 +1,60 @@ +import { describe, expect, it } from "vitest"; +import { createParagraph } from "./model"; +import { reconcileParagraphText } from "./reconcile"; +import type { RichTextParagraph } from "./types"; + +describe("reconcileParagraphText", () => { + it("returns the same paragraph when the text is unchanged", () => { + const p = createParagraph("p1", "hello"); + expect(reconcileParagraphText(p, "hello")).toBe(p); + }); + + it("extends the trailing run when text is appended", () => { + const p: RichTextParagraph = { + id: "p1", + runs: [{ text: "hello", marks: [{ type: "bold" }] }], + }; + const next = reconcileParagraphText(p, "hello world"); + expect(next.runs).toEqual([ + { text: "hello world", marks: [{ type: "bold" }] }, + ]); + }); + + it("shrinks a run when trailing text is deleted", () => { + const p = createParagraph("p1", "hello world"); + const next = reconcileParagraphText(p, "hello"); + expect(next.runs).toEqual([{ text: "hello", marks: [] }]); + }); + + it("inserts unmarked text in the middle, inheriting the marks at that position", () => { + const p: RichTextParagraph = { + id: "p1", + runs: [ + { text: "hello ", marks: [{ type: "italic" }] }, + { text: "world", marks: [] }, + ], + }; + // Insert "brave new " right after "hello ". + const next = reconcileParagraphText(p, "hello brave new world"); + expect(next.runs).toEqual([ + { text: "hello brave new ", marks: [{ type: "italic" }] }, + { text: "world", marks: [] }, + ]); + }); + + it("deletes text from the middle without disturbing marks on either side", () => { + const p: RichTextParagraph = { + id: "p1", + runs: [ + { text: "hello ", marks: [{ type: "bold" }] }, + { text: "cruel ", marks: [] }, + { text: "world", marks: [{ type: "italic" }] }, + ], + }; + const next = reconcileParagraphText(p, "hello world"); + expect(next.runs).toEqual([ + { text: "hello ", marks: [{ type: "bold" }] }, + { text: "world", marks: [{ type: "italic" }] }, + ]); + }); +}); diff --git a/src/utils/rich-text/reconcile.ts b/src/utils/rich-text/reconcile.ts new file mode 100644 index 0000000..a002f71 --- /dev/null +++ b/src/utils/rich-text/reconcile.ts @@ -0,0 +1,69 @@ +import { + mergeAdjacentRuns, + paragraphPlainText, + splitRunsAtOffsets, +} from "./model"; +import type { RichTextParagraph, TextMark } from "./types"; + +export function reconcileParagraphText( + paragraph: RichTextParagraph, + nextText: string, +): RichTextParagraph { + const prevText = paragraphPlainText(paragraph); + if (prevText === nextText) return paragraph; + + let prefixLen = 0; + const maxPrefix = Math.min(prevText.length, nextText.length); + while (prefixLen < maxPrefix && prevText[prefixLen] === nextText[prefixLen]) { + prefixLen++; + } + + let suffixLen = 0; + const maxSuffix = Math.min(prevText.length, nextText.length) - prefixLen; + while ( + suffixLen < maxSuffix && + prevText[prevText.length - 1 - suffixLen] === + nextText[nextText.length - 1 - suffixLen] + ) { + suffixLen++; + } + + const prevMiddleEnd = prevText.length - suffixLen; + const splitRuns = splitRunsAtOffsets(paragraph.runs, [ + prefixLen, + prevMiddleEnd, + ]); + + const middleMarks: TextMark[] = (() => { + if (prefixLen === 0) return []; + let pos = 0; + for (const run of splitRuns) { + const runEnd = pos + run.text.length; + if (pos < prefixLen && prefixLen <= runEnd) { + return run.marks; + } + pos = runEnd; + } + return []; + })(); + + const before: typeof splitRuns = []; + const after: typeof splitRuns = []; + let pos = 0; + for (const run of splitRuns) { + const runStart = pos; + const runEnd = pos + run.text.length; + pos = runEnd; + if (runEnd <= prefixLen) before.push(run); + else if (runStart >= prevMiddleEnd) after.push(run); + } + + const middleText = nextText.slice(prefixLen, nextText.length - suffixLen); + const middleRun = + middleText.length > 0 ? [{ text: middleText, marks: middleMarks }] : []; + + return { + ...paragraph, + runs: mergeAdjacentRuns([...before, ...middleRun, ...after]), + }; +} From bfd48ba4149bf0be9af1e5ba7af7cdc4ab458efd Mon Sep 17 00:00:00 2001 From: jansaldo Date: Wed, 22 Jul 2026 17:47:35 -0300 Subject: [PATCH 27/83] feat(rich-text): add DOM Range to character-offset mapping --- src/utils/rich-text/selection.test.ts | 38 +++++++++++++++++++++++++++ src/utils/rich-text/selection.ts | 17 ++++++++++++ 2 files changed, 55 insertions(+) create mode 100644 src/utils/rich-text/selection.test.ts create mode 100644 src/utils/rich-text/selection.ts diff --git a/src/utils/rich-text/selection.test.ts b/src/utils/rich-text/selection.test.ts new file mode 100644 index 0000000..ee88bc5 --- /dev/null +++ b/src/utils/rich-text/selection.test.ts @@ -0,0 +1,38 @@ +// src/utils/rich-text/selection.test.ts +import { describe, expect, it } from "vitest"; +import { getRangeOffsets } from "./selection"; + +function makeParagraph(html: string): HTMLElement { + const el = document.createElement("p"); + el.innerHTML = html; + document.body.appendChild(el); + return el; +} + +describe("getRangeOffsets", () => { + it("returns 0-length offsets for a collapsed range at the start", () => { + const el = makeParagraph("hello world"); + const range = document.createRange(); + range.setStart(el.firstChild as Text, 0); + range.collapse(true); + expect(getRangeOffsets(el, range)).toEqual({ start: 0, end: 0 }); + }); + + it("returns the plain-text offsets of a selection within a single text node", () => { + const el = makeParagraph("hello world"); + const range = document.createRange(); + range.setStart(el.firstChild as Text, 0); + range.setEnd(el.firstChild as Text, 5); + expect(getRangeOffsets(el, range)).toEqual({ start: 0, end: 5 }); + }); + + it("returns offsets spanning multiple child nodes", () => { + const el = makeParagraph("hello world"); + const boldText = el.querySelector("b")?.firstChild as Text; + const plainText = el.childNodes[1] as Text; // " world" + const range = document.createRange(); + range.setStart(boldText, 3); // inside "hello", after "hel" + range.setEnd(plainText, 4); // inside " world", after " wor" + expect(getRangeOffsets(el, range)).toEqual({ start: 3, end: 9 }); + }); +}); diff --git a/src/utils/rich-text/selection.ts b/src/utils/rich-text/selection.ts new file mode 100644 index 0000000..75caadc --- /dev/null +++ b/src/utils/rich-text/selection.ts @@ -0,0 +1,17 @@ +// src/utils/rich-text/selection.ts +export function getRangeOffsets( + root: HTMLElement, + range: Range, +): { start: number; end: number } { + const preStart = range.cloneRange(); + preStart.selectNodeContents(root); + preStart.setEnd(range.startContainer, range.startOffset); + const start = preStart.toString().length; + + const preEnd = range.cloneRange(); + preEnd.selectNodeContents(root); + preEnd.setEnd(range.endContainer, range.endOffset); + const end = preEnd.toString().length; + + return { start, end }; +} From 949396daef87aecf08e814588cea8544dae058e7 Mon Sep 17 00:00:00 2001 From: jansaldo Date: Wed, 22 Jul 2026 17:51:40 -0300 Subject: [PATCH 28/83] feat(rich-text-editor): render marks model read-only, with editable title --- .../rich-text-editor/RichTextEditor.test.tsx | 53 ++++++ .../rich-text-editor/RichTextEditor.tsx | 153 ++++++++++++++++++ src/components/rich-text-editor/index.ts | 1 + 3 files changed, 207 insertions(+) create mode 100644 src/components/rich-text-editor/RichTextEditor.test.tsx create mode 100644 src/components/rich-text-editor/RichTextEditor.tsx create mode 100644 src/components/rich-text-editor/index.ts diff --git a/src/components/rich-text-editor/RichTextEditor.test.tsx b/src/components/rich-text-editor/RichTextEditor.test.tsx new file mode 100644 index 0000000..01a8534 --- /dev/null +++ b/src/components/rich-text-editor/RichTextEditor.test.tsx @@ -0,0 +1,53 @@ +import { fireEvent, render, screen } from "@testing-library/react"; +import { describe, expect, it, vi } from "vitest"; +import type { RichTextDocument } from "@/utils/rich-text/types"; +import { RichTextEditor } from "./RichTextEditor"; + +const doc: RichTextDocument = { + paragraphs: [ + { + id: "p1", + runs: [ + { text: "hola ", marks: [] }, + { text: "mundo", marks: [{ type: "bold" }] }, + ], + }, + { + id: "p2", + runs: [{ text: "segundo párrafo", marks: [{ type: "italic" }] }], + }, + ], +}; + +describe("RichTextEditor", () => { + it("renders each paragraph and applies bold/italic styling per run", () => { + render(); + expect(screen.getByText("mundo").tagName).toBe("STRONG"); + expect(screen.getByText("segundo párrafo").tagName).toBe("EM"); + }); + + it("renders the title and calls onTitleChange when edited", () => { + const onTitleChange = vi.fn(); + render( + , + ); + fireEvent.click(screen.getByRole("button", { name: /editar título/i })); + const input = screen.getByDisplayValue("Resumen 10/04/2025"); + fireEvent.change(input, { target: { value: "Nuevo título" } }); + fireEvent.blur(input); + expect(onTitleChange).toHaveBeenCalledWith("Nuevo título"); + }); + + it("makes the body non-editable and hides the title's edit button in readOnly mode", () => { + render(); + expect( + screen.queryByRole("button", { name: /editar título/i }), + ).not.toBeInTheDocument(); + const body = screen.getByRole("textbox"); + expect(body).toHaveAttribute("contenteditable", "false"); + }); +}); diff --git a/src/components/rich-text-editor/RichTextEditor.tsx b/src/components/rich-text-editor/RichTextEditor.tsx new file mode 100644 index 0000000..83b05ed --- /dev/null +++ b/src/components/rich-text-editor/RichTextEditor.tsx @@ -0,0 +1,153 @@ +import { PencilSimpleLine } from "phosphor-react"; +import { Fragment, useState } from "react"; +import { Button } from "@/components/button"; +import { css, cx } from "@/styled/css"; +import { Stack } from "@/styled/jsx"; +import { paragraphPlainText } from "@/utils/rich-text/model"; +import type { + RichTextDocument, + RichTextParagraph, + TextMark, + TextRun, +} from "@/utils/rich-text/types"; + +const titleRow = css({ + display: "flex", + alignItems: "center", + gap: "2", +}); + +const titleText = css({ textStyle: "title.md.strong", color: "text.default" }); + +const titleInput = css({ + textStyle: "title.md.strong", + color: "text.default", + border: "primary-alt", + rounded: "sm", + px: "2", + py: "1", + bg: "bg.secondary", +}); + +const body = css({ + textStyle: "paragraph.md.default", + color: "text.default", + outline: "none", + "& p": { margin: "0" }, + "& p + p": { marginTop: "4" }, +}); + +function markClassName(mark: TextMark): string | undefined { + if (mark.type === "highlight") { + return css({ bg: (mark.color ?? "category.yellow-light") as never }); + } + return undefined; +} + +function RunView({ run }: { run: TextRun }) { + let node: React.ReactNode = run.text; + + for (const mark of run.marks) { + if (mark.type === "bold") node = {node}; + else if (mark.type === "italic") node = {node}; + else if (mark.type === "underline") node = {node}; + else if (mark.type === "highlight") + node = {node}; + } + + return {node}; +} + +function ParagraphView({ paragraph }: { paragraph: RichTextParagraph }) { + return ( +

+ {paragraph.runs.map((run, index) => ( + // Runs are recreated on every edit — index is the only stable-enough + // key available (no persistent run ids in the model). + + ))} +

+ ); +} + +export interface RichTextEditorProps { + document: RichTextDocument; + onChange?: (next: RichTextDocument) => void; + readOnly?: boolean; + title?: string; + onTitleChange?: (next: string) => void; + highlightColors?: string[]; + "aria-label"?: string; +} + +export function RichTextEditor({ + document: doc, + readOnly = false, + title, + onTitleChange, + "aria-label": ariaLabel, +}: RichTextEditorProps) { + const [editingTitle, setEditingTitle] = useState(false); + const [draftTitle, setDraftTitle] = useState(title ?? ""); + + const commitTitle = () => { + setEditingTitle(false); + if (draftTitle !== title) onTitleChange?.(draftTitle); + }; + + return ( + + {title !== undefined && ( +
+ {editingTitle ? ( + setDraftTitle(e.target.value)} + onBlur={commitTitle} + onKeyDown={(e) => { + if (e.key === "Enter") commitTitle(); + }} + // biome-ignore lint/a11y/noAutofocus: replaces an inline click-to-edit label, not a dialog + autoFocus + /> + ) : ( + {title} + )} + {!readOnly && !editingTitle && ( + + )} +
+ )} + +
+ {doc.paragraphs.map((paragraph) => ( + + ))} +
+ + ); +} + +// Exported so tests/consumers can compute a paragraph's plain text without a +// second import path. +export { paragraphPlainText }; + +export default RichTextEditor; diff --git a/src/components/rich-text-editor/index.ts b/src/components/rich-text-editor/index.ts new file mode 100644 index 0000000..23dad2f --- /dev/null +++ b/src/components/rich-text-editor/index.ts @@ -0,0 +1 @@ +export { RichTextEditor, type RichTextEditorProps } from "./RichTextEditor"; From 4943c4e1511848ecff6a911e5f635b7c3ea98efa Mon Sep 17 00:00:00 2001 From: jansaldo Date: Wed, 22 Jul 2026 18:01:49 -0300 Subject: [PATCH 29/83] feat(rich-text-editor): wire bold/italic/underline toolbar and typing reconciliation --- .../rich-text-editor/RichTextEditor.test.tsx | 60 ++++++++ .../rich-text-editor/RichTextEditor.tsx | 142 +++++++++++++++++- 2 files changed, 198 insertions(+), 4 deletions(-) diff --git a/src/components/rich-text-editor/RichTextEditor.test.tsx b/src/components/rich-text-editor/RichTextEditor.test.tsx index 01a8534..93bbe4d 100644 --- a/src/components/rich-text-editor/RichTextEditor.test.tsx +++ b/src/components/rich-text-editor/RichTextEditor.test.tsx @@ -51,3 +51,63 @@ describe("RichTextEditor", () => { expect(body).toHaveAttribute("contenteditable", "false"); }); }); + +describe("RichTextEditor — toolbar", () => { + function selectAll(paragraphEl: Element) { + const range = document.createRange(); + range.selectNodeContents(paragraphEl); + const selection = window.getSelection(); + selection?.removeAllRanges(); + selection?.addRange(range); + } + + it("toggles bold on the current selection and calls onChange", () => { + const onChange = vi.fn(); + const singleRunDoc: RichTextDocument = { + paragraphs: [{ id: "p1", runs: [{ text: "hola mundo", marks: [] }] }], + }; + render(); + + const paragraphEl = screen.getByText("hola mundo").closest("p")!; + selectAll(paragraphEl); + fireEvent.select(paragraphEl); + + fireEvent.click(screen.getByRole("button", { name: /negrita/i })); + + expect(onChange).toHaveBeenCalledWith({ + paragraphs: [ + { id: "p1", runs: [{ text: "hola mundo", marks: [{ type: "bold" }] }] }, + ], + }); + }); + + it("hides the toolbar entirely in readOnly mode", () => { + render( + , + ); + expect( + screen.queryByRole("button", { name: /negrita/i }), + ).not.toBeInTheDocument(); + }); + + it("reconciles typed text back into the model on input", () => { + const onChange = vi.fn(); + const singleRunDoc: RichTextDocument = { + paragraphs: [{ id: "p1", runs: [{ text: "hola", marks: [] }] }], + }; + render(); + + const paragraphEl = screen.getByText("hola").closest("p")!; + paragraphEl.textContent = "hola mundo"; + fireEvent.input(paragraphEl); + + expect(onChange).toHaveBeenCalledWith({ + paragraphs: [{ id: "p1", runs: [{ text: "hola mundo", marks: [] }] }], + }); + }); +}); diff --git a/src/components/rich-text-editor/RichTextEditor.tsx b/src/components/rich-text-editor/RichTextEditor.tsx index 83b05ed..9cd2053 100644 --- a/src/components/rich-text-editor/RichTextEditor.tsx +++ b/src/components/rich-text-editor/RichTextEditor.tsx @@ -1,9 +1,16 @@ -import { PencilSimpleLine } from "phosphor-react"; -import { Fragment, useState } from "react"; +import { + PencilSimpleLine, + TextBolder, + TextItalic, + TextUnderline, +} from "phosphor-react"; +import { Fragment, useCallback, useEffect, useRef, useState } from "react"; import { Button } from "@/components/button"; import { css, cx } from "@/styled/css"; -import { Stack } from "@/styled/jsx"; -import { paragraphPlainText } from "@/utils/rich-text/model"; +import { HStack, Stack } from "@/styled/jsx"; +import { paragraphPlainText, toggleMark } from "@/utils/rich-text/model"; +import { reconcileParagraphText } from "@/utils/rich-text/reconcile"; +import { getRangeOffsets } from "@/utils/rich-text/selection"; import type { RichTextDocument, RichTextParagraph, @@ -37,6 +44,8 @@ const body = css({ "& p + p": { marginTop: "4" }, }); +const toolbar = css({ borderBottom: "primary", pb: "3" }); + function markClassName(mark: TextMark): string | undefined { if (mark.type === "highlight") { return css({ bg: (mark.color ?? "category.yellow-light") as never }); @@ -80,8 +89,22 @@ export interface RichTextEditorProps { "aria-label"?: string; } +interface ActiveSelection { + paragraphId: string; + start: number; + end: number; +} + +function findParagraph( + doc: RichTextDocument, + paragraphId: string, +): RichTextParagraph | undefined { + return doc.paragraphs.find((p) => p.id === paragraphId); +} + export function RichTextEditor({ document: doc, + onChange, readOnly = false, title, onTitleChange, @@ -89,12 +112,89 @@ export function RichTextEditor({ }: RichTextEditorProps) { const [editingTitle, setEditingTitle] = useState(false); const [draftTitle, setDraftTitle] = useState(title ?? ""); + const bodyRef = useRef(null); + const activeSelectionRef = useRef(null); const commitTitle = () => { setEditingTitle(false); if (draftTitle !== title) onTitleChange?.(draftTitle); }; + const captureSelection = useCallback(() => { + const selection = window.getSelection(); + if (!selection || selection.rangeCount === 0) return; + const range = selection.getRangeAt(0); + const paragraphEl = ( + range.startContainer instanceof Element + ? range.startContainer + : range.startContainer.parentElement + )?.closest("[data-paragraph-id]"); + if (!paragraphEl) return; + + const paragraphId = paragraphEl.getAttribute("data-paragraph-id"); + if (!paragraphId) return; + + const { start, end } = getRangeOffsets(paragraphEl as HTMLElement, range); + activeSelectionRef.current = { paragraphId, start, end }; + }, []); + + // Selection tracking is wired via native listeners rather than React's + // `onSelect` prop: React only synthesizes `onSelect` from a fixed list of + // native events (mouseup/keydown/keyup/focusin/focusout/contextmenu/ + // dragend/selectionchange) gated on `document.activeElement`, which never + // fires for a contentEditable region that hasn't been focused + // programmatically — the exact case exercised in tests. Listening + // natively for both `select` (bubbles from the paragraph itself) and + // `selectionchange` (fires in real browsers whenever the caret/selection + // moves) covers both real usage and test simulation. + useEffect(() => { + const root = bodyRef.current; + if (!root || readOnly) return; + + const handleSelectionChange = () => { + const selection = window.getSelection(); + if (!selection || !root.contains(selection.anchorNode)) return; + captureSelection(); + }; + + root.addEventListener("select", handleSelectionChange); + document.addEventListener("selectionchange", handleSelectionChange); + return () => { + root.removeEventListener("select", handleSelectionChange); + document.removeEventListener("selectionchange", handleSelectionChange); + }; + }, [readOnly, captureSelection]); + + const applyMark = (mark: TextMark) => { + const selection = activeSelectionRef.current; + if (!selection) return; + const paragraph = findParagraph(doc, selection.paragraphId); + if (!paragraph) return; + + const nextParagraph = toggleMark( + paragraph, + selection.start, + selection.end, + mark, + ); + onChange?.({ + paragraphs: doc.paragraphs.map((p) => + p.id === paragraph.id ? nextParagraph : p, + ), + }); + }; + + const handleInput = () => { + const root = bodyRef.current; + if (!root) return; + const nextParagraphs = doc.paragraphs.map((paragraph) => { + const el = root.querySelector(`[data-paragraph-id="${paragraph.id}"]`); + if (!el) return paragraph; + return reconcileParagraphText(paragraph, el.textContent ?? ""); + }); + onChange?.({ paragraphs: nextParagraphs }); + }; + return ( {title !== undefined && ( @@ -130,13 +230,47 @@ export function RichTextEditor({
)} + {!readOnly && ( + + + + + + )} +
{doc.paragraphs.map((paragraph) => ( From 26a352f7168ba6264da6fffdb402f1c6f8e7dd2f Mon Sep 17 00:00:00 2001 From: jansaldo Date: Wed, 22 Jul 2026 18:08:38 -0300 Subject: [PATCH 30/83] feat(rich-text-editor): add highlight color picker and copy action --- .../rich-text-editor/RichTextEditor.test.tsx | 52 +++++++++++++ .../rich-text-editor/RichTextEditor.tsx | 73 ++++++++++++++++++- src/components/rich-text-editor/index.ts | 6 +- 3 files changed, 129 insertions(+), 2 deletions(-) diff --git a/src/components/rich-text-editor/RichTextEditor.test.tsx b/src/components/rich-text-editor/RichTextEditor.test.tsx index 93bbe4d..5b9f237 100644 --- a/src/components/rich-text-editor/RichTextEditor.test.tsx +++ b/src/components/rich-text-editor/RichTextEditor.test.tsx @@ -111,3 +111,55 @@ describe("RichTextEditor — toolbar", () => { }); }); }); + +describe("RichTextEditor — highlight + copy", () => { + it("applies the clicked swatch's color as a highlight mark on the selection", () => { + const onChange = vi.fn(); + const singleRunDoc: RichTextDocument = { + paragraphs: [{ id: "p1", runs: [{ text: "hola mundo", marks: [] }] }], + }; + render(); + + const paragraphEl = screen.getByText("hola mundo").closest("p")!; + const range = document.createRange(); + range.selectNodeContents(paragraphEl); + window.getSelection()?.removeAllRanges(); + window.getSelection()?.addRange(range); + fireEvent.select(paragraphEl); + + fireEvent.click(screen.getByRole("button", { name: /resaltar/i })); + fireEvent.click( + screen.getByRole("button", { name: /category.yellow-light/i }), + ); + + expect(onChange).toHaveBeenCalledWith({ + paragraphs: [ + { + id: "p1", + runs: [ + { + text: "hola mundo", + marks: [{ type: "highlight", color: "category.yellow-light" }], + }, + ], + }, + ], + }); + }); + + it("copies the serialized plain text to the clipboard", async () => { + const writeText = vi.fn().mockResolvedValue(undefined); + Object.assign(navigator, { clipboard: { writeText } }); + + render( + , + ); + + fireEvent.click(screen.getByRole("button", { name: /copiar/i })); + expect(writeText).toHaveBeenCalledWith("hola mundo"); + }); +}); diff --git a/src/components/rich-text-editor/RichTextEditor.tsx b/src/components/rich-text-editor/RichTextEditor.tsx index 9cd2053..8e79df0 100644 --- a/src/components/rich-text-editor/RichTextEditor.tsx +++ b/src/components/rich-text-editor/RichTextEditor.tsx @@ -1,4 +1,6 @@ import { + Copy as CopyIcon, + HighlighterCircle, PencilSimpleLine, TextBolder, TextItalic, @@ -6,9 +8,14 @@ import { } from "phosphor-react"; import { Fragment, useCallback, useEffect, useRef, useState } from "react"; import { Button } from "@/components/button"; +import { Popover, PopoverContent, PopoverTrigger } from "@/components/popover"; import { css, cx } from "@/styled/css"; import { HStack, Stack } from "@/styled/jsx"; -import { paragraphPlainText, toggleMark } from "@/utils/rich-text/model"; +import { + paragraphPlainText, + serializeToPlainText, + toggleMark, +} from "@/utils/rich-text/model"; import { reconcileParagraphText } from "@/utils/rich-text/reconcile"; import { getRangeOffsets } from "@/utils/rich-text/selection"; import type { @@ -46,6 +53,33 @@ const body = css({ const toolbar = css({ borderBottom: "primary", pb: "3" }); +export const RICH_TEXT_HIGHLIGHT_COLORS = [ + "category.yellow-light", + "category.green-light", + "category.blue-light", + "category.violet-light", + "category.pink-light", + "category.orange-light", + "category.red-light", +]; + +const swatch = (color: string) => + css({ + w: "6", + h: "6", + rounded: "full", + bg: color as never, + border: "primary", + cursor: "pointer", + }); + +const swatchGrid = css({ + display: "grid", + gridTemplateColumns: "repeat(4, 1fr)", + gap: "2", + p: "3", +}); + function markClassName(mark: TextMark): string | undefined { if (mark.type === "highlight") { return css({ bg: (mark.color ?? "category.yellow-light") as never }); @@ -108,6 +142,7 @@ export function RichTextEditor({ readOnly = false, title, onTitleChange, + highlightColors = RICH_TEXT_HIGHLIGHT_COLORS, "aria-label": ariaLabel, }: RichTextEditorProps) { const [editingTitle, setEditingTitle] = useState(false); @@ -259,6 +294,42 @@ export function RichTextEditor({ > + + + + + +
+ {highlightColors.map((color) => ( +
+ + + )} diff --git a/src/components/rich-text-editor/index.ts b/src/components/rich-text-editor/index.ts index 23dad2f..a3e04be 100644 --- a/src/components/rich-text-editor/index.ts +++ b/src/components/rich-text-editor/index.ts @@ -1 +1,5 @@ -export { RichTextEditor, type RichTextEditorProps } from "./RichTextEditor"; +export { + RICH_TEXT_HIGHLIGHT_COLORS, + RichTextEditor, + type RichTextEditorProps, +} from "./RichTextEditor"; From e9e654ff326ae98254fc5c6136196c9c2b048ddb Mon Sep 17 00:00:00 2001 From: jansaldo Date: Thu, 23 Jul 2026 09:44:45 -0300 Subject: [PATCH 31/83] feat(rich-text-editor): add Storybook stories and public export --- .../RichTextEditor.stories.tsx | 67 +++++++++++++++++++ src/index.ts | 1 + 2 files changed, 68 insertions(+) create mode 100644 src/components/rich-text-editor/RichTextEditor.stories.tsx diff --git a/src/components/rich-text-editor/RichTextEditor.stories.tsx b/src/components/rich-text-editor/RichTextEditor.stories.tsx new file mode 100644 index 0000000..1bab591 --- /dev/null +++ b/src/components/rich-text-editor/RichTextEditor.stories.tsx @@ -0,0 +1,67 @@ +import type { Meta, StoryObj } from "@storybook/react"; +import { useState } from "react"; +import type { RichTextDocument } from "@/utils/rich-text/types"; +import { RichTextEditor } from "./RichTextEditor"; + +const sampleDoc: RichTextDocument = { + paragraphs: [ + { + id: "p1", + runs: [ + { + text: "El presente caso tramita ante el Juzgado en lo Penal, ", + marks: [], + }, + { text: "Contravencional y de Faltas", marks: [{ type: "bold" }] }, + { text: " N.º 10.", marks: [] }, + ], + }, + { + id: "p2", + runs: [ + { + text: "Se dispusieron medidas de protección urgentes.", + marks: [{ type: "highlight", color: "category.yellow-light" }], + }, + ], + }, + ], +}; + +const meta: Meta = { + title: "Components/RichTextEditor", + component: RichTextEditor, +}; +export default meta; + +type Story = StoryObj; + +export const Editable: Story = { + render: () => { + const [doc, setDoc] = useState(sampleDoc); + const [title, setTitle] = useState("Resumen 10/04/2025"); + return ( + + ); + }, +}; + +export const ReadOnlyPreview: Story = { + args: { + document: sampleDoc, + title: "Resumen 10/04/2025", + readOnly: true, + }, +}; + +export const Empty: Story = { + args: { + document: { paragraphs: [] }, + title: "Resumen", + }, +}; diff --git a/src/index.ts b/src/index.ts index b698730..73756c6 100644 --- a/src/index.ts +++ b/src/index.ts @@ -39,6 +39,7 @@ export * from "./components/page-title"; export * from "./components/player"; export * from "./components/popover"; export * from "./components/radio"; +export * from "./components/rich-text-editor"; export * from "./components/search"; export * from "./components/select"; export * from "./components/side-panel"; From b5fce9c2f10906ea96442bfb65fbd4d4b18264fb Mon Sep 17 00:00:00 2001 From: jansaldo Date: Thu, 23 Jul 2026 10:21:35 -0300 Subject: [PATCH 32/83] fix(rich-text-editor): export marks model and document types from public API Consumers can now type the document prop (RichTextDocument) and call documentFromPlainText, serializeToPlainText, toggleMark, etc. by name from @aymurai/ui, which desktop-app's ODT/TXT export code depends on. Co-Authored-By: Claude Sonnet 5 --- src/index.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/index.ts b/src/index.ts index 73756c6..92eb357 100644 --- a/src/index.ts +++ b/src/index.ts @@ -60,4 +60,6 @@ export * from "./components/transcript-block"; export * from "./components/tutorial"; export * from "./components/workflow-step-layout"; // Utils +export * from "./utils/rich-text/model"; +export * from "./utils/rich-text/types"; export * from "./utils/timestamp"; From 640674e376ac21c2599dffd7d1d8b2711b17d910 Mon Sep 17 00:00:00 2001 From: jansaldo Date: Thu, 23 Jul 2026 10:21:45 -0300 Subject: [PATCH 33/83] fix(rich-text-editor): structural edits, empty input, selection clamp, a11y, read-only copy - Enter splits the current paragraph at the caret; Backspace at offset 0 of a non-first paragraph merges into the previous one (document model only; caret restoration remains an out-of-scope DOM limitation). - Typing into an empty document now seeds a first paragraph. - Cross-paragraph selections clamp to the end of the start paragraph instead of producing out-of-bounds offsets that corrupted the wrong range. - Highlight swatches get human Spanish aria-labels (Amarillo, Verde, ...). - Copy is now available in readOnly mode (export preview); the formatting controls stay hidden. Clipboard write is guarded with optional chaining + catch. Co-Authored-By: Claude Sonnet 5 --- .../rich-text-editor/RichTextEditor.test.tsx | 234 ++++++++++++++- .../rich-text-editor/RichTextEditor.tsx | 281 +++++++++++++----- 2 files changed, 435 insertions(+), 80 deletions(-) diff --git a/src/components/rich-text-editor/RichTextEditor.test.tsx b/src/components/rich-text-editor/RichTextEditor.test.tsx index 5b9f237..f688920 100644 --- a/src/components/rich-text-editor/RichTextEditor.test.tsx +++ b/src/components/rich-text-editor/RichTextEditor.test.tsx @@ -26,6 +26,26 @@ describe("RichTextEditor", () => { expect(screen.getByText("segundo párrafo").tagName).toBe("EM"); }); + it("renders underline and highlight runs with and ", () => { + const marksDoc: RichTextDocument = { + paragraphs: [ + { + id: "p1", + runs: [ + { text: "subrayado", marks: [{ type: "underline" }] }, + { + text: "resaltado", + marks: [{ type: "highlight", color: "category.yellow-light" }], + }, + ], + }, + ], + }; + render(); + expect(screen.getByText("subrayado").tagName).toBe("U"); + expect(screen.getByText("resaltado").tagName).toBe("MARK"); + }); + it("renders the title and calls onTitleChange when edited", () => { const onTitleChange = vi.fn(); render( @@ -81,7 +101,7 @@ describe("RichTextEditor — toolbar", () => { }); }); - it("hides the toolbar entirely in readOnly mode", () => { + it("hides the formatting toolbar in readOnly mode (Copy remains)", () => { render( { expect( screen.queryByRole("button", { name: /negrita/i }), ).not.toBeInTheDocument(); + expect( + screen.queryByRole("button", { name: /cursiva/i }), + ).not.toBeInTheDocument(); + expect( + screen.queryByRole("button", { name: /subrayado/i }), + ).not.toBeInTheDocument(); + expect( + screen.queryByRole("button", { name: /resaltar/i }), + ).not.toBeInTheDocument(); + // Copy is an export action, not an editing affordance — it stays visible. + expect(screen.getByRole("button", { name: /copiar/i })).toBeInTheDocument(); }); it("reconciles typed text back into the model on input", () => { @@ -128,9 +159,7 @@ describe("RichTextEditor — highlight + copy", () => { fireEvent.select(paragraphEl); fireEvent.click(screen.getByRole("button", { name: /resaltar/i })); - fireEvent.click( - screen.getByRole("button", { name: /category.yellow-light/i }), - ); + fireEvent.click(screen.getByRole("button", { name: /amarillo/i })); expect(onChange).toHaveBeenCalledWith({ paragraphs: [ @@ -162,4 +191,201 @@ describe("RichTextEditor — highlight + copy", () => { fireEvent.click(screen.getByRole("button", { name: /copiar/i })); expect(writeText).toHaveBeenCalledWith("hola mundo"); }); + + it("copies to the clipboard in readOnly mode", () => { + const writeText = vi.fn().mockResolvedValue(undefined); + Object.assign(navigator, { clipboard: { writeText } }); + + render( + , + ); + + fireEvent.click(screen.getByRole("button", { name: /copiar/i })); + expect(writeText).toHaveBeenCalledWith("solo lectura"); + }); +}); + +describe("RichTextEditor — structural editing", () => { + function placeCaret(paragraphEl: Element, offset: number) { + const walker = document.createTreeWalker(paragraphEl, NodeFilter.SHOW_TEXT); + const textNode = walker.nextNode() as Text; + const range = document.createRange(); + range.setStart(textNode, offset); + range.collapse(true); + const selection = window.getSelection(); + selection?.removeAllRanges(); + selection?.addRange(range); + } + + it("splits the current paragraph into two on Enter at the caret", () => { + const onChange = vi.fn(); + const singleRunDoc: RichTextDocument = { + paragraphs: [{ id: "p1", runs: [{ text: "hola mundo", marks: [] }] }], + }; + render(); + + const paragraphEl = screen.getByText("hola mundo").closest("p")!; + placeCaret(paragraphEl, 4); // between "hola" and " mundo" + + fireEvent.keyDown(paragraphEl, { key: "Enter" }); + + expect(onChange).toHaveBeenCalledTimes(1); + const next = onChange.mock.calls[0][0] as RichTextDocument; + expect(next.paragraphs).toHaveLength(2); + expect(next.paragraphs[0].id).toBe("p1"); + expect(next.paragraphs[0].runs).toEqual([{ text: "hola", marks: [] }]); + expect(next.paragraphs[1].runs).toEqual([{ text: " mundo", marks: [] }]); + expect(next.paragraphs[1].id).not.toBe("p1"); + }); + + it("preserves marks on both halves when splitting", () => { + const onChange = vi.fn(); + const boldDoc: RichTextDocument = { + paragraphs: [ + { id: "p1", runs: [{ text: "hola mundo", marks: [{ type: "bold" }] }] }, + ], + }; + render(); + + const paragraphEl = screen.getByText("hola mundo").closest("p")!; + placeCaret(paragraphEl, 4); + fireEvent.keyDown(paragraphEl, { key: "Enter" }); + + const next = onChange.mock.calls[0][0] as RichTextDocument; + expect(next.paragraphs[0].runs).toEqual([ + { text: "hola", marks: [{ type: "bold" }] }, + ]); + expect(next.paragraphs[1].runs).toEqual([ + { text: " mundo", marks: [{ type: "bold" }] }, + ]); + }); + + it("does not split on Shift+Enter", () => { + const onChange = vi.fn(); + const singleRunDoc: RichTextDocument = { + paragraphs: [{ id: "p1", runs: [{ text: "hola mundo", marks: [] }] }], + }; + render(); + + const paragraphEl = screen.getByText("hola mundo").closest("p")!; + placeCaret(paragraphEl, 4); + fireEvent.keyDown(paragraphEl, { key: "Enter", shiftKey: true }); + + expect(onChange).not.toHaveBeenCalled(); + }); + + it("merges into the previous paragraph on Backspace at offset 0", () => { + const onChange = vi.fn(); + const twoParaDoc: RichTextDocument = { + paragraphs: [ + { id: "p1", runs: [{ text: "hola", marks: [{ type: "bold" }] }] }, + { id: "p2", runs: [{ text: "mundo", marks: [] }] }, + ], + }; + render(); + + const secondEl = screen.getByText("mundo").closest("p")!; + placeCaret(secondEl, 0); + fireEvent.keyDown(secondEl, { key: "Backspace" }); + + expect(onChange).toHaveBeenCalledTimes(1); + const next = onChange.mock.calls[0][0] as RichTextDocument; + expect(next.paragraphs).toHaveLength(1); + expect(next.paragraphs[0].id).toBe("p1"); + expect(next.paragraphs[0].runs).toEqual([ + { text: "hola", marks: [{ type: "bold" }] }, + { text: "mundo", marks: [] }, + ]); + }); + + it("does not merge on Backspace at the start of the first paragraph", () => { + const onChange = vi.fn(); + const twoParaDoc: RichTextDocument = { + paragraphs: [ + { id: "p1", runs: [{ text: "hola", marks: [] }] }, + { id: "p2", runs: [{ text: "mundo", marks: [] }] }, + ], + }; + render(); + + const firstEl = screen.getByText("hola").closest("p")!; + placeCaret(firstEl, 0); + fireEvent.keyDown(firstEl, { key: "Backspace" }); + + expect(onChange).not.toHaveBeenCalled(); + }); + + it("does not merge on Backspace mid-paragraph", () => { + const onChange = vi.fn(); + const twoParaDoc: RichTextDocument = { + paragraphs: [ + { id: "p1", runs: [{ text: "hola", marks: [] }] }, + { id: "p2", runs: [{ text: "mundo", marks: [] }] }, + ], + }; + render(); + + const secondEl = screen.getByText("mundo").closest("p")!; + placeCaret(secondEl, 2); + fireEvent.keyDown(secondEl, { key: "Backspace" }); + + expect(onChange).not.toHaveBeenCalled(); + }); + + it("seeds a first paragraph when typing into an empty document", () => { + const onChange = vi.fn(); + render( + , + ); + + const body = screen.getByRole("textbox"); + body.textContent = "primer texto"; + fireEvent.input(body); + + expect(onChange).toHaveBeenCalledTimes(1); + const next = onChange.mock.calls[0][0] as RichTextDocument; + expect(next.paragraphs).toHaveLength(1); + expect(next.paragraphs[0].runs).toEqual([ + { text: "primer texto", marks: [] }, + ]); + }); + + it("clamps a cross-paragraph selection to the end of the first paragraph", () => { + const onChange = vi.fn(); + const twoParaDoc: RichTextDocument = { + paragraphs: [ + { id: "p1", runs: [{ text: "hola", marks: [] }] }, + { id: "p2", runs: [{ text: "mundo", marks: [] }] }, + ], + }; + render(); + + const firstEl = screen.getByText("hola").closest("p")!; + const secondEl = screen.getByText("mundo").closest("p")!; + const range = document.createRange(); + range.setStart(firstEl.firstChild as Text, 0); + range.setEnd(secondEl.firstChild as Text, 5); + const selection = window.getSelection(); + selection?.removeAllRanges(); + selection?.addRange(range); + fireEvent.select(firstEl); + + fireEvent.click(screen.getByRole("button", { name: /negrita/i })); + + // Only the first paragraph is affected, and the mark covers exactly its + // full text ("hola") — no out-of-bounds corruption, second paragraph + // untouched. + const next = onChange.mock.calls[0][0] as RichTextDocument; + expect(next.paragraphs[0].runs).toEqual([ + { text: "hola", marks: [{ type: "bold" }] }, + ]); + expect(next.paragraphs[1].runs).toEqual([{ text: "mundo", marks: [] }]); + }); }); diff --git a/src/components/rich-text-editor/RichTextEditor.tsx b/src/components/rich-text-editor/RichTextEditor.tsx index 8e79df0..bf81f9f 100644 --- a/src/components/rich-text-editor/RichTextEditor.tsx +++ b/src/components/rich-text-editor/RichTextEditor.tsx @@ -12,8 +12,11 @@ import { Popover, PopoverContent, PopoverTrigger } from "@/components/popover"; import { css, cx } from "@/styled/css"; import { HStack, Stack } from "@/styled/jsx"; import { + createParagraph, + mergeAdjacentRuns, paragraphPlainText, serializeToPlainText, + splitRunsAtOffsets, toggleMark, } from "@/utils/rich-text/model"; import { reconcileParagraphText } from "@/utils/rich-text/reconcile"; @@ -63,6 +66,33 @@ export const RICH_TEXT_HIGHLIGHT_COLORS = [ "category.red-light", ]; +// Human-readable Spanish names for the highlight swatches, so screen readers +// announce "Amarillo" instead of reading the raw token path "category dot +// yellow dash light". +const HIGHLIGHT_COLOR_LABELS: Record = { + "category.yellow-light": "Amarillo", + "category.green-light": "Verde", + "category.blue-light": "Azul", + "category.violet-light": "Violeta", + "category.pink-light": "Rosa", + "category.orange-light": "Naranja", + "category.red-light": "Rojo", +}; + +// Unique-enough id generator for paragraphs created at runtime (Enter split, +// typing into an empty document). Runs in real browsers only, so Date.now + +// a monotonic counter is sufficient and collision-free within a session. +let paragraphIdCounter = 0; +function nextParagraphId(): string { + paragraphIdCounter += 1; + return `rte-p-${Date.now().toString(36)}-${paragraphIdCounter}`; +} + +function elementOf(node: Node | null): Element | null { + if (!node) return null; + return node instanceof Element ? node : node.parentElement; +} + const swatch = (color: string) => css({ w: "6", @@ -159,18 +189,32 @@ export function RichTextEditor({ const selection = window.getSelection(); if (!selection || selection.rangeCount === 0) return; const range = selection.getRangeAt(0); - const paragraphEl = ( - range.startContainer instanceof Element - ? range.startContainer - : range.startContainer.parentElement - )?.closest("[data-paragraph-id]"); - if (!paragraphEl) return; + const startParagraphEl = elementOf(range.startContainer)?.closest( + "[data-paragraph-id]", + ); + if (!startParagraphEl) return; - const paragraphId = paragraphEl.getAttribute("data-paragraph-id"); + const paragraphId = startParagraphEl.getAttribute("data-paragraph-id"); if (!paragraphId) return; - const { start, end } = getRangeOffsets(paragraphEl as HTMLElement, range); - activeSelectionRef.current = { paragraphId, start, end }; + const { start, end } = getRangeOffsets( + startParagraphEl as HTMLElement, + range, + ); + + const endParagraphEl = elementOf(range.endContainer)?.closest( + "[data-paragraph-id]", + ); + // Cross-paragraph selection: this editor's mark model is paragraph-scoped + // (`toggleMark` operates on a single paragraph), and `getRangeOffsets` + // would compute the end offset against the wrong container. Clamp the + // selection to the end of the start paragraph — the simplest safe default. + const clampedEnd = + endParagraphEl === startParagraphEl + ? end + : (startParagraphEl.textContent?.length ?? start); + + activeSelectionRef.current = { paragraphId, start, end: clampedEnd }; }, []); // Selection tracking is wired via native listeners rather than React's @@ -222,6 +266,17 @@ export function RichTextEditor({ const handleInput = () => { const root = bodyRef.current; if (!root) return; + + // Empty document: there is no paragraph element to reconcile against, so + // typed text lands directly in the contentEditable body. Seed a first + // paragraph from it. + if (doc.paragraphs.length === 0) { + const text = root.textContent ?? ""; + if (text.length === 0) return; + onChange?.({ paragraphs: [createParagraph(nextParagraphId(), text)] }); + return; + } + const nextParagraphs = doc.paragraphs.map((paragraph) => { const el = root.querySelector(`[data-paragraph-id="${paragraph.id}"]`); if (!el) return paragraph; @@ -230,6 +285,71 @@ export function RichTextEditor({ onChange?.({ paragraphs: nextParagraphs }); }; + // Structural edits contentEditable can't express through plain-text + // reconciliation: Enter splits a paragraph, Backspace-at-start merges into + // the previous one. Caret restoration after these edits is a known + // limitation (out of scope) — only the document model is kept correct here. + const handleKeyDown = (event: React.KeyboardEvent) => { + if (readOnly) return; + + const selection = window.getSelection(); + if (!selection || selection.rangeCount === 0) return; + const range = selection.getRangeAt(0); + const paragraphEl = elementOf(range.startContainer)?.closest( + "[data-paragraph-id]", + ); + if (!paragraphEl) return; + const paragraphId = paragraphEl.getAttribute("data-paragraph-id"); + if (!paragraphId) return; + const index = doc.paragraphs.findIndex((p) => p.id === paragraphId); + if (index === -1) return; + const paragraph = doc.paragraphs[index]; + const { start, end } = getRangeOffsets(paragraphEl as HTMLElement, range); + + if (event.key === "Enter" && !event.shiftKey) { + event.preventDefault(); + const splitRuns = splitRunsAtOffsets(paragraph.runs, [start]); + const beforeRuns: TextRun[] = []; + const afterRuns: TextRun[] = []; + let pos = 0; + for (const run of splitRuns) { + if (pos < start) beforeRuns.push(run); + else afterRuns.push(run); + pos += run.text.length; + } + const first: RichTextParagraph = { + ...paragraph, + runs: mergeAdjacentRuns(beforeRuns), + }; + const second: RichTextParagraph = { + id: nextParagraphId(), + runs: mergeAdjacentRuns(afterRuns), + }; + const nextParagraphs = [...doc.paragraphs]; + nextParagraphs.splice(index, 1, first, second); + onChange?.({ paragraphs: nextParagraphs }); + return; + } + + if ( + event.key === "Backspace" && + selection.isCollapsed && + start === 0 && + end === 0 && + index > 0 + ) { + event.preventDefault(); + const prev = doc.paragraphs[index - 1]; + const merged: RichTextParagraph = { + ...prev, + runs: mergeAdjacentRuns([...prev.runs, ...paragraph.runs]), + }; + const nextParagraphs = [...doc.paragraphs]; + nextParagraphs.splice(index - 1, 2, merged); + onChange?.({ paragraphs: nextParagraphs }); + } + }; + return ( {title !== undefined && ( @@ -265,73 +385,81 @@ export function RichTextEditor({
)} - {!readOnly && ( - - - - - - - - - -
- {highlightColors.map((color) => ( -
- - - - - )} + {/* Copy stays available in both modes — the readOnly export preview + (Finalización) treats copy-to-clipboard as a core action. The + formatting controls below are editing affordances and stay hidden + when readOnly. */} + + {!readOnly && ( + <> + + + + + + + + +
+ {highlightColors.map((color) => ( +
+ + + + )} + +
{doc.paragraphs.map((paragraph) => ( From 9b6ced96cdf8de02b426187ef97cc0802a51bb01 Mon Sep 17 00:00:00 2001 From: jansaldo Date: Thu, 23 Jul 2026 10:34:19 -0300 Subject: [PATCH 34/83] fix(app-header): let the logo region grow past 203px for long feature names A fixed w:[203px] clipped a long featureName (e.g. "Resumen de Documento") under the logo box's overflow:hidden. minW keeps the Figma-sized 203px result for short names and grows only when content needs more room. --- src/components/app-header/AppHeader.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/app-header/AppHeader.tsx b/src/components/app-header/AppHeader.tsx index 8a40192..1ea6c5d 100644 --- a/src/components/app-header/AppHeader.tsx +++ b/src/components/app-header/AppHeader.tsx @@ -23,8 +23,10 @@ import { Stepper } from "../stepper"; * default logo/buttons without recreating their styles or focus behaviour. * * The top-bar variant is 1440×96px with 48px horizontal padding. Its three - * layout regions are 203px (logo), 332px (stepper), and 203px (actions), so - * the stepper remains centered even when the logo content changes width. + * layout regions are min 203px (logo — grows for a long `featureName`, + * e.g. "Resumen de Documento"), 332px (stepper), and 203px (actions), so the + * stepper stays centered for the Figma-sized case and only shifts if a + * longer feature name pushes past 203px. */ const root = css({ display: "flex", @@ -44,7 +46,7 @@ const root = css({ const logoWrap = css({ display: "flex", alignItems: "center", - w: "[203px]", + minW: "[203px]", flexShrink: "0", }); From 0873baa3a970372785d0517f09c74c28c7c8351d Mon Sep 17 00:00:00 2001 From: jansaldo Date: Thu, 23 Jul 2026 10:43:48 -0300 Subject: [PATCH 35/83] fix(app-header): keep the stepper truly centered regardless of logo width space-between shifted the stepper toward the actions side whenever a long featureName grew logoWrap past 203px, since the two space-between gaps shrink by the same amount but only one of them sits between logo and stepper. Absolutely centering stepperWrap on the header itself decouples it from both siblings' widths. --- src/components/app-header/AppHeader.tsx | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/components/app-header/AppHeader.tsx b/src/components/app-header/AppHeader.tsx index 1ea6c5d..e26551f 100644 --- a/src/components/app-header/AppHeader.tsx +++ b/src/components/app-header/AppHeader.tsx @@ -41,6 +41,9 @@ const root = css({ borderBottomColor: "[#BCBAB8]", // border.primary colour, no bare token flexShrink: "0", w: "full", + // Anchor for stepperWrap, which centers on the header itself rather than + // on the (variable-width) space between logo and actions. + position: "relative", }); const logoWrap = css({ @@ -51,8 +54,16 @@ const logoWrap = css({ }); const stepperWrap = css({ + // Absolutely centered on `root` so a long featureName growing logoWrap + // past 203px can't push the stepper off-center — space-between would + // otherwise shift it toward whichever side has more room. + position: "absolute", + left: "[50%]", + top: "[50%]", + transform: "[translate(-50%, -50%)]", display: "flex", alignItems: "center", + justifyContent: "center", w: "[332px]", h: "[52px]", flexShrink: "0", From 9c73daf094c714be078497d9ea847ca381011cef Mon Sep 17 00:00:00 2001 From: jansaldo Date: Thu, 23 Jul 2026 17:45:29 -0300 Subject: [PATCH 36/83] feat(tool-button): let a consumer override the default aria-label/title --- .../tool-button/ToolButton.test.tsx | 43 +++++++++++++++++++ src/components/tool-button/ToolButton.tsx | 36 ++++++++++------ 2 files changed, 65 insertions(+), 14 deletions(-) create mode 100644 src/components/tool-button/ToolButton.test.tsx diff --git a/src/components/tool-button/ToolButton.test.tsx b/src/components/tool-button/ToolButton.test.tsx new file mode 100644 index 0000000..0931c2d --- /dev/null +++ b/src/components/tool-button/ToolButton.test.tsx @@ -0,0 +1,43 @@ +import { render, screen } from "@testing-library/react"; +import { describe, expect, it, vi } from "vitest"; +import { ToolButton } from "./ToolButton"; + +describe("ToolButton", () => { + it("uses the action's default label as aria-label and title when none is passed", () => { + render(); + const button = screen.getByRole("button", { name: "Agregar etiqueta" }); + expect(button).toHaveAttribute("title", "Agregar etiqueta"); + }); + + it("lets a consumer override aria-label and title", () => { + render( + , + ); + expect( + screen.getByRole("button", { name: "Afectar una ocurrencia" }), + ).toHaveAttribute("title", "Afectar una ocurrencia"); + expect( + screen.queryByRole("button", { name: "Agregar etiqueta" }), + ).not.toBeInTheDocument(); + }); + + it("still forwards onClick and disabled when aria-label is overridden", () => { + const onClick = vi.fn(); + render( + , + ); + const button = screen.getByRole("button", { + name: "Eliminar esta ocurrencia", + }); + expect(button).toBeDisabled(); + }); +}); diff --git a/src/components/tool-button/ToolButton.tsx b/src/components/tool-button/ToolButton.tsx index 8e6fa88..27d921e 100644 --- a/src/components/tool-button/ToolButton.tsx +++ b/src/components/tool-button/ToolButton.tsx @@ -1,4 +1,4 @@ -import { Backspace, Repeat, TrashSimple } from "phosphor-react"; +import { Repeat, TagSimple, TrashSimple } from "phosphor-react"; import type { ButtonHTMLAttributes } from "react"; import { css, cva, cx } from "@/styled/css"; @@ -67,17 +67,25 @@ const iconWrapperStyle = css({ justifyContent: "center", }); -/** "ALL" badge — positioned bottom-right of the 24×24 icon area. */ +/** + * "ALL" badge — Figma (node 40000041:10521/10525) hand-draws these three + * letterforms centered on the 28×28 button canvas (bounding box center is + * ~14,14 — dead center), overlapping the base icon, not offset to a corner. + * Measured cap-height of the real vectors is ~3.5px — a 6px font (~4.2-4.5px + * cap-height) ran noticeably larger than that; 4.5px tracks the real size. + */ const allBadgeStyle = css({ position: "absolute", - bottom: "[0px]", - right: "[0px]", - fontSize: "[6px]", + inset: "[0px]", + display: "flex", + alignItems: "center", + justifyContent: "center", + fontSize: "[4.5px]", fontWeight: "[700]", lineHeight: "[1]", letterSpacing: "[0.02em]", color: "text.onbutton-alternative", - // Tight background patch so the badge is readable over the icon's bottom-right + // Tight background patch so the badge is readable over the icon bg: "[transparent]", pointerEvents: "none", userSelect: "none", @@ -103,13 +111,11 @@ const ACTION_LABELS: Record = { /** * Icon per action — matches Figma layer structure (node 40000041:10526). * - * "Todo/Todas" variants composite the singular icon with an absolute "ALL" - * badge overlaid in the bottom-right quadrant, matching the Figma SVG layout. - * "Agregar" uses Backspace rotated 180° (produces the right-pointing tag shape). + * "Todo/Todas" variants composite the singular icon with an "ALL" badge + * centered on top of it, matching the Figma SVG layout. */ function ActionIcon({ action }: { action: ToolButtonAction }) { const size = 24; - const flipped = { transform: "rotate(180deg)" }; switch (action) { case "reemplazar": @@ -135,12 +141,12 @@ function ActionIcon({ action }: { action: ToolButtonAction }) { ); case "agregar-etiqueta": - return ; + return ; case "agregar-todas": return (
- + ALL
); @@ -159,6 +165,8 @@ export function ToolButton({ action, className, type = "button", + "aria-label": ariaLabel, + title, ...props }: ToolButtonProps) { const label = ACTION_LABELS[action]; @@ -166,8 +174,8 @@ export function ToolButton({ + + +
+ Content owns its own background/radius/shadow — this shell only + positions and animates it. +
+ + + ), +}; + export const BottomPlacement: Story = { render: () => ( diff --git a/src/components/popover/Popover.tsx b/src/components/popover/Popover.tsx index 4dd170f..90c5e11 100644 --- a/src/components/popover/Popover.tsx +++ b/src/components/popover/Popover.tsx @@ -11,11 +11,8 @@ export const PopoverTrigger = PopoverPrimitive.Trigger; export const PopoverAnchor = PopoverPrimitive.Anchor; export const PopoverClose = PopoverPrimitive.Close; -const contentStyles = css({ +const baseStyles = css({ zIndex: 50, - bg: "bg.primary", - rounded: "lg", - boxShadow: "popover", "&[data-state='open']": { animation: "fadeIn", @@ -25,6 +22,16 @@ const contentStyles = css({ }, }); +// The default look: a light surface, rounded corners, and the standard +// popover shadow. `surface={false}` skips this for consumers that render +// their own fully-styled surface (a custom menu grid, a colored toolbar) +// and only want this shell for positioning/animation/focus-trap behavior. +const surfaceStyles = css({ + bg: "bg.primary", + rounded: "lg", + boxShadow: "popover", +}); + const arrowStyles = css({ // Match the popover surface so the caret reads as one shape (was bg.secondary // = #FFFFFF against a bg.primary #F6F5F7 body → visible seam). @@ -35,6 +42,15 @@ export interface PopoverContentProps extends ComponentPropsWithoutRef { showArrow?: boolean; container?: HTMLElement; + /** + * Set to `false` when the content renders its own fully-styled surface + * (background, radius, shadow) and this shell should stay inert apart + * from positioning/animation — e.g. FeaturesMenu's grid or an + * already-colored toolbar. Defaults to `true` (the standard light-surface + * look). Pair with `showArrow={false}` when disabling the surface, since + * the default arrow is colored to match it. + */ + surface?: boolean; } export function PopoverContent({ @@ -43,13 +59,14 @@ export function PopoverContent({ showArrow = false, container, children, + surface = true, ...props }: PopoverContentProps) { return ( {children} From c66222a46e98b5e2301d13a09fbfb390e434df36 Mon Sep 17 00:00:00 2001 From: jansaldo Date: Thu, 23 Jul 2026 18:49:33 -0300 Subject: [PATCH 40/83] fix(rich-text-editor): correct highlight palette to Figma's 12 swatches (no violet) --- .../rich-text-editor/RichTextEditor.test.tsx | 34 +++++++++++++-- .../rich-text-editor/RichTextEditor.tsx | 42 +++++++++++++------ 2 files changed, 60 insertions(+), 16 deletions(-) diff --git a/src/components/rich-text-editor/RichTextEditor.test.tsx b/src/components/rich-text-editor/RichTextEditor.test.tsx index f688920..506fd1f 100644 --- a/src/components/rich-text-editor/RichTextEditor.test.tsx +++ b/src/components/rich-text-editor/RichTextEditor.test.tsx @@ -144,7 +144,35 @@ describe("RichTextEditor — toolbar", () => { }); describe("RichTextEditor — highlight + copy", () => { - it("applies the clicked swatch's color as a highlight mark on the selection", () => { + it("renders exactly the 12 Figma-specified highlight swatches with human Spanish labels", () => { + render(); + fireEvent.click(screen.getByRole("button", { name: /resaltar/i })); + + const expectedLabels = [ + "Azul claro", + "Azul", + "Verde claro", + "Verde", + "Naranja claro", + "Naranja", + "Rosa claro", + "Rosa", + "Rojo claro", + "Rojo", + "Amarillo claro", + "Amarillo", + ]; + for (const label of expectedLabels) { + expect( + screen.getByRole("button", { name: new RegExp(`^${label}$`, "i") }), + ).toBeInTheDocument(); + } + expect( + screen.queryByRole("button", { name: /violeta/i }), + ).not.toBeInTheDocument(); + }); + + it("applies the correct highlight color for a solid-shade swatch click", () => { const onChange = vi.fn(); const singleRunDoc: RichTextDocument = { paragraphs: [{ id: "p1", runs: [{ text: "hola mundo", marks: [] }] }], @@ -159,7 +187,7 @@ describe("RichTextEditor — highlight + copy", () => { fireEvent.select(paragraphEl); fireEvent.click(screen.getByRole("button", { name: /resaltar/i })); - fireEvent.click(screen.getByRole("button", { name: /amarillo/i })); + fireEvent.click(screen.getByRole("button", { name: /^azul$/i })); expect(onChange).toHaveBeenCalledWith({ paragraphs: [ @@ -168,7 +196,7 @@ describe("RichTextEditor — highlight + copy", () => { runs: [ { text: "hola mundo", - marks: [{ type: "highlight", color: "category.yellow-light" }], + marks: [{ type: "highlight", color: "category.blue" }], }, ], }, diff --git a/src/components/rich-text-editor/RichTextEditor.tsx b/src/components/rich-text-editor/RichTextEditor.tsx index bf81f9f..d56960c 100644 --- a/src/components/rich-text-editor/RichTextEditor.tsx +++ b/src/components/rich-text-editor/RichTextEditor.tsx @@ -56,27 +56,43 @@ const body = css({ const toolbar = css({ borderBottom: "primary", pb: "3" }); +// 6 hues x 2 shades (light + solid), matching Figma's swatch popover exactly +// (verified via get_variable_defs on the popover node — no violet, no +// single-shade-only hues). Order: light-then-solid per hue, hues in +// blue/green/orange/pink/red/yellow order — a stable default; the Figma +// screenshot's exact on-screen grid order could not be pixel-verified at the +// available render resolution. export const RICH_TEXT_HIGHLIGHT_COLORS = [ - "category.yellow-light", - "category.green-light", "category.blue-light", - "category.violet-light", - "category.pink-light", + "category.blue", + "category.green-light", + "category.green", "category.orange-light", + "category.orange", + "category.pink-light", + "category.pink", "category.red-light", + "category.red", + "category.yellow-light", + "category.yellow", ]; // Human-readable Spanish names for the highlight swatches, so screen readers -// announce "Amarillo" instead of reading the raw token path "category dot -// yellow dash light". +// announce "Azul claro" instead of reading the raw token path "category dot +// blue dash light". const HIGHLIGHT_COLOR_LABELS: Record = { - "category.yellow-light": "Amarillo", - "category.green-light": "Verde", - "category.blue-light": "Azul", - "category.violet-light": "Violeta", - "category.pink-light": "Rosa", - "category.orange-light": "Naranja", - "category.red-light": "Rojo", + "category.blue-light": "Azul claro", + "category.blue": "Azul", + "category.green-light": "Verde claro", + "category.green": "Verde", + "category.orange-light": "Naranja claro", + "category.orange": "Naranja", + "category.pink-light": "Rosa claro", + "category.pink": "Rosa", + "category.red-light": "Rojo claro", + "category.red": "Rojo", + "category.yellow-light": "Amarillo claro", + "category.yellow": "Amarillo", }; // Unique-enough id generator for paragraphs created at runtime (Enter split, From 2a95275806bdba0c76c7fcc9c531c01e76bce6c7 Mon Sep 17 00:00:00 2001 From: jansaldo Date: Thu, 23 Jul 2026 18:53:50 -0300 Subject: [PATCH 41/83] fix(rich-text-editor): reorder toolbar to match Figma, add divider before Copy --- .../rich-text-editor/RichTextEditor.test.tsx | 23 +++++++++++++++++++ .../rich-text-editor/RichTextEditor.tsx | 22 +++++++++++++----- 2 files changed, 39 insertions(+), 6 deletions(-) diff --git a/src/components/rich-text-editor/RichTextEditor.test.tsx b/src/components/rich-text-editor/RichTextEditor.test.tsx index 506fd1f..e2a1197 100644 --- a/src/components/rich-text-editor/RichTextEditor.test.tsx +++ b/src/components/rich-text-editor/RichTextEditor.test.tsx @@ -126,6 +126,29 @@ describe("RichTextEditor — toolbar", () => { expect(screen.getByRole("button", { name: /copiar/i })).toBeInTheDocument(); }); + it("renders formatting buttons in Figma order (Underline, Italic, Bold, Highlight) with a divider before Copy", () => { + render( + , + ); + const buttons = screen.getAllByRole("button", { + name: /subrayado|cursiva|negrita|resaltar|copiar/i, + }); + expect(buttons.map((b) => b.getAttribute("aria-label"))).toEqual([ + "Subrayado", + "Cursiva", + "Negrita", + "Resaltar", + "Copiar", + ]); + expect( + screen.getByTestId("rich-text-editor-toolbar-divider"), + ).toBeInTheDocument(); + }); + it("reconciles typed text back into the model on input", () => { const onChange = vi.fn(); const singleRunDoc: RichTextDocument = { diff --git a/src/components/rich-text-editor/RichTextEditor.tsx b/src/components/rich-text-editor/RichTextEditor.tsx index d56960c..2f228bb 100644 --- a/src/components/rich-text-editor/RichTextEditor.tsx +++ b/src/components/rich-text-editor/RichTextEditor.tsx @@ -56,6 +56,12 @@ const body = css({ const toolbar = css({ borderBottom: "primary", pb: "3" }); +const divider = css({ + w: "[1px]", + h: "6", + bg: "[#BCBAB8]", +}); + // 6 hues x 2 shades (light + solid), matching Figma's swatch popover exactly // (verified via get_variable_defs on the popover node — no violet, no // single-shade-only hues). Order: light-then-solid per hue, hues in @@ -411,11 +417,11 @@ export function RichTextEditor({ @@ -461,6 +467,10 @@ export function RichTextEditor({
+
)} - )} -
- )} - - {/* Copy stays available in both modes — the readOnly export preview - (Finalización) treats copy-to-clipboard as a core action. The - formatting controls below are editing affordances and stay hidden - when readOnly. */} - - {!readOnly && ( - <> - - - - - - - - -
- {highlightColors.map((color) => ( -
- - -
- +
+ + {title !== undefined && ( +
+ {editingTitle ? ( + setDraftTitle(e.target.value)} + onBlur={commitTitle} + onKeyDown={(e) => { + if (e.key === "Enter") commitTitle(); + }} + // biome-ignore lint/a11y/noAutofocus: replaces an inline click-to-edit label, not a dialog + autoFocus + /> + ) : ( + {title} + )} + {!readOnly && !editingTitle && ( + + )} +
)} - + + + + + + + +
+ {highlightColors.map((color) => ( +
+ + +
+ + )} + + + +
- - - - -
- {doc.paragraphs.map((paragraph) => ( - - ))} -
- + {doc.paragraphs.map((paragraph) => ( + + ))} +
+ +
); } diff --git a/src/preset.ts b/src/preset.ts index 4b852cf..c0fb9d8 100644 --- a/src/preset.ts +++ b/src/preset.ts @@ -68,6 +68,9 @@ export const aymuraiPreset = definePreset({ // Dialog/Popover have no Figma node yet — tokenised at current values. dialog: { value: "0px 4px 8px rgba(0, 0, 0, 0.1)" }, popover: { value: "0px 0px 15px 0px #00000026" }, + // Figma "Document-Card" drop shadow (RichTextEditor's body + // container) — get_design_context on node 40002572:59916/40002573:62459. + card: { value: "0px 4px 10px rgba(0, 0, 0, 0.05)" }, }, }, textStyles: { @@ -170,6 +173,9 @@ export const aymuraiPreset = definePreset({ secondary: { value: "1px solid #9F99A5" }, "primary-alt": { value: "1px solid #110041" }, error: { value: "1px solid {colors.system.error}" }, + // Figma "Document-Card" border (RichTextEditor's body container) — + // get_design_context on node 40002572:59916/40002573:62459. + card: { value: "1px solid #E0DFE8" }, }, gradients: { primary: { From 0a3054cefb5a8bb51ff288a35f34be069c9e07a8 Mon Sep 17 00:00:00 2001 From: jansaldo Date: Thu, 23 Jul 2026 19:02:37 -0300 Subject: [PATCH 43/83] feat(rich-text): add documentFromMarkdown for LLM Markdown summary ingestion --- src/utils/rich-text/model.test.ts | 61 +++++++++++++++++++ src/utils/rich-text/model.ts | 98 +++++++++++++++++++++++++++++++ 2 files changed, 159 insertions(+) diff --git a/src/utils/rich-text/model.test.ts b/src/utils/rich-text/model.test.ts index 390ef3a..8d3113c 100644 --- a/src/utils/rich-text/model.test.ts +++ b/src/utils/rich-text/model.test.ts @@ -1,6 +1,7 @@ import { describe, expect, it } from "vitest"; import { createParagraph, + documentFromMarkdown, documentFromPlainText, mergeAdjacentRuns, paragraphPlainText, @@ -173,3 +174,63 @@ describe("toggleMark", () => { expect(toggleMark(p, 2, 2, { type: "bold" })).toBe(p); }); }); + +describe("documentFromMarkdown", () => { + it("splits paragraphs on blank lines, same as plain text", () => { + const doc = documentFromMarkdown("Primero.\n\nSegundo."); + expect(doc.paragraphs).toHaveLength(2); + expect(paragraphPlainText(doc.paragraphs[0])).toBe("Primero."); + expect(paragraphPlainText(doc.paragraphs[1])).toBe("Segundo."); + }); + + it("maps **bold** and *italic* inline syntax to marks", () => { + const doc = documentFromMarkdown("hola **mundo** y *chau*"); + expect(doc.paragraphs[0].runs).toEqual([ + { text: "hola ", marks: [] }, + { text: "mundo", marks: [{ type: "bold" }] }, + { text: " y ", marks: [] }, + { text: "chau", marks: [{ type: "italic" }] }, + ]); + }); + + it("also accepts __bold__ and _italic_ underscore syntax", () => { + const doc = documentFromMarkdown("__fuerte__ y _suave_"); + expect(doc.paragraphs[0].runs).toEqual([ + { text: "fuerte", marks: [{ type: "bold" }] }, + { text: " y ", marks: [] }, + { text: "suave", marks: [{ type: "italic" }] }, + ]); + }); + + it("flattens headers to a single bold paragraph, stripping the # markers", () => { + const doc = documentFromMarkdown( + "## Resumen del documento\n\nCuerpo del texto.", + ); + expect(doc.paragraphs).toHaveLength(2); + expect(doc.paragraphs[0].runs).toEqual([ + { text: "Resumen del documento", marks: [{ type: "bold" }] }, + ]); + expect(paragraphPlainText(doc.paragraphs[1])).toBe("Cuerpo del texto."); + }); + + it("flattens bullet list items to plain paragraphs with a leading marker", () => { + const doc = documentFromMarkdown("- Primero\n- Segundo"); + expect(doc.paragraphs.map((p) => paragraphPlainText(p))).toEqual([ + "• Primero", + "• Segundo", + ]); + }); + + it("flattens numbered list items the same way", () => { + const doc = documentFromMarkdown("1. Uno\n2. Dos"); + expect(doc.paragraphs.map((p) => paragraphPlainText(p))).toEqual([ + "• Uno", + "• Dos", + ]); + }); + + it("ignores leading/trailing blank lines, same as documentFromPlainText", () => { + const doc = documentFromMarkdown("\n\nSolo esto.\n\n"); + expect(doc.paragraphs).toHaveLength(1); + }); +}); diff --git a/src/utils/rich-text/model.ts b/src/utils/rich-text/model.ts index ba037fa..ed15f40 100644 --- a/src/utils/rich-text/model.ts +++ b/src/utils/rich-text/model.ts @@ -22,6 +22,104 @@ export function documentFromPlainText(text: string): RichTextDocument { }; } +const HEADING_RE = /^(#{1,3})\s+(.+)$/; +const UNORDERED_ITEM_RE = /^[-*]\s+(.+)$/; +const ORDERED_ITEM_RE = /^\d+[.)]\s+(.+)$/; +// Combined inline tokenizer for **bold**/__bold__ and *italic*/_italic_, +// ported from backend's feature/summarization-ui branch +// (frontend/src/renderer/src/utils/markdown/markdown.ts, +// markdownToSafeInlineParts) — proven regex, not reinvented. Link syntax is +// deliberately unhandled: this editor has no link mark, so a markdown link +// is left as literal text for now (out of scope, same as the original +// plan's "no links" boundary). +const INLINE_TOKEN_RE = + /(\*\*([^*]+)\*\*)|(__([^_]+)__)|(\*([^*]+)\*)|(_([^_]+)_)/g; + +function parseInlineRuns(text: string): TextRun[] { + const runs: TextRun[] = []; + let lastIndex = 0; + INLINE_TOKEN_RE.lastIndex = 0; + + let match = INLINE_TOKEN_RE.exec(text); + while (match !== null) { + if (match.index > lastIndex) { + runs.push({ text: text.slice(lastIndex, match.index), marks: [] }); + } + if (match[2] !== undefined || match[4] !== undefined) { + runs.push({ + text: (match[2] ?? match[4]) as string, + marks: [{ type: "bold" }], + }); + } else if (match[6] !== undefined || match[8] !== undefined) { + runs.push({ + text: (match[6] ?? match[8]) as string, + marks: [{ type: "italic" }], + }); + } + lastIndex = INLINE_TOKEN_RE.lastIndex; + match = INLINE_TOKEN_RE.exec(text); + } + + if (lastIndex < text.length) { + runs.push({ text: text.slice(lastIndex), marks: [] }); + } + + return runs.length > 0 ? runs : [{ text, marks: [] }]; +} + +export function documentFromMarkdown(markdown: string): RichTextDocument { + const lines = markdown.replace(/\r\n/g, "\n").split("\n"); + const paragraphs: RichTextParagraph[] = []; + let bufferedLines: string[] = []; + let paragraphIndex = 0; + + const flushBufferedParagraph = () => { + const text = bufferedLines.join(" ").trim(); + bufferedLines = []; + if (text.length === 0) return; + paragraphs.push({ + id: `p${paragraphIndex++}`, + runs: mergeAdjacentRuns(parseInlineRuns(text)), + }); + }; + + for (const rawLine of lines) { + const line = rawLine.trim(); + + if (line.length === 0) { + flushBufferedParagraph(); + continue; + } + + const heading = line.match(HEADING_RE); + if (heading) { + flushBufferedParagraph(); + paragraphs.push({ + id: `p${paragraphIndex++}`, + runs: [{ text: heading[2].trim(), marks: [{ type: "bold" }] }], + }); + continue; + } + + const unorderedItem = line.match(UNORDERED_ITEM_RE); + const orderedItem = line.match(ORDERED_ITEM_RE); + const listItemText = unorderedItem?.[1] ?? orderedItem?.[1]; + if (listItemText !== undefined) { + flushBufferedParagraph(); + paragraphs.push({ + id: `p${paragraphIndex++}`, + runs: mergeAdjacentRuns(parseInlineRuns(`• ${listItemText}`)), + }); + continue; + } + + bufferedLines.push(rawLine); + } + flushBufferedParagraph(); + + return { paragraphs }; +} + export function paragraphPlainText(paragraph: RichTextParagraph): string { return paragraph.runs.map((run) => run.text).join(""); } From 1aed6bec3e2335b2f21901135e764d48ce4e91ed Mon Sep 17 00:00:00 2001 From: jansaldo Date: Thu, 23 Jul 2026 19:09:19 -0300 Subject: [PATCH 44/83] feat(rich-text-editor): add Markdown-ingestion story, verify Figma-fidelity visually --- .../RichTextEditor.stories.tsx | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/src/components/rich-text-editor/RichTextEditor.stories.tsx b/src/components/rich-text-editor/RichTextEditor.stories.tsx index 1bab591..afb6194 100644 --- a/src/components/rich-text-editor/RichTextEditor.stories.tsx +++ b/src/components/rich-text-editor/RichTextEditor.stories.tsx @@ -1,5 +1,6 @@ import type { Meta, StoryObj } from "@storybook/react"; import { useState } from "react"; +import { documentFromMarkdown } from "@/utils/rich-text/model"; import type { RichTextDocument } from "@/utils/rich-text/types"; import { RichTextEditor } from "./RichTextEditor"; @@ -65,3 +66,20 @@ export const Empty: Story = { title: "Resumen", }, }; + +export const FromMarkdown: Story = { + render: () => { + const [doc, setDoc] = useState( + documentFromMarkdown( + "## Resumen del documento\n\nEl presente caso tramita ante el **Juzgado en lo Penal, Contravencional y de Faltas N.º 10**.\n\n- Hecho relevante uno\n- Hecho relevante dos\n\nSe dispusieron *medidas de protección* urgentes.", + ), + ); + return ( + + ); + }, +}; From f05cdf3251ac99017a6bb782d1fc98886d18ecc2 Mon Sep 17 00:00:00 2001 From: jansaldo Date: Thu, 23 Jul 2026 19:17:13 -0300 Subject: [PATCH 45/83] fix(rich-text-editor): make body card max-height consumer-overridable The card's maxH:"[532px]" ceiling was baked into the static css() recipe with no escape hatch, so a consumer embedding the editor in a taller layout couldn't opt out. Move the height to an inline style driven by a new optional `maxBodyHeight` prop (default "532px", preserving current behavior). Co-Authored-By: Claude Sonnet 5 --- .../rich-text-editor/RichTextEditor.test.tsx | 14 ++++++++++++++ src/components/rich-text-editor/RichTextEditor.tsx | 11 ++++++++++- 2 files changed, 24 insertions(+), 1 deletion(-) diff --git a/src/components/rich-text-editor/RichTextEditor.test.tsx b/src/components/rich-text-editor/RichTextEditor.test.tsx index 02e80d0..48c6def 100644 --- a/src/components/rich-text-editor/RichTextEditor.test.tsx +++ b/src/components/rich-text-editor/RichTextEditor.test.tsx @@ -78,6 +78,20 @@ describe("RichTextEditor", () => { expect(panel).toContainElement(card); expect(card).toContainElement(screen.getByRole("textbox")); }); + + it("defaults the body card's max height to 532px", () => { + render(); + const card = screen.getByTestId("rich-text-editor-card"); + expect(card.style.maxHeight).toBe("532px"); + }); + + it("lets a consumer override the body card's max height via maxBodyHeight", () => { + render( + , + ); + const card = screen.getByTestId("rich-text-editor-card"); + expect(card.style.maxHeight).toBe("800px"); + }); }); describe("RichTextEditor — toolbar", () => { diff --git a/src/components/rich-text-editor/RichTextEditor.tsx b/src/components/rich-text-editor/RichTextEditor.tsx index dd3cd93..ff2749a 100644 --- a/src/components/rich-text-editor/RichTextEditor.tsx +++ b/src/components/rich-text-editor/RichTextEditor.tsx @@ -68,7 +68,6 @@ const card = css({ rounded: "[12px]", boxShadow: "card", p: "8", - maxH: "[532px]", overflowY: "auto", }); @@ -191,6 +190,14 @@ export interface RichTextEditorProps { onTitleChange?: (next: string) => void; highlightColors?: string[]; "aria-label"?: string; + /** + * Maximum height of the scrollable body card, as a CSS length (e.g. + * "532px") or Panda token. Defaults to Figma's static mockup dimension + * ("532px") so existing behavior is unchanged unless a consumer opts into + * a different value — e.g. a taller real layout that has more vertical + * space available than the Figma mock did. + */ + maxBodyHeight?: string; } interface ActiveSelection { @@ -214,6 +221,7 @@ export function RichTextEditor({ onTitleChange, highlightColors = RICH_TEXT_HIGHLIGHT_COLORS, "aria-label": ariaLabel, + maxBodyHeight = "532px", }: RichTextEditorProps) { const [editingTitle, setEditingTitle] = useState(false); const [draftTitle, setDraftTitle] = useState(title ?? ""); @@ -515,6 +523,7 @@ export function RichTextEditor({ contentEditable={!readOnly} suppressContentEditableWarning className={cx(body, card)} + style={{ maxHeight: maxBodyHeight }} onInput={handleInput} onKeyDown={handleKeyDown} > From 4e5ff74cd9b78b6876b6b2f651fb1966812dda82 Mon Sep 17 00:00:00 2001 From: jansaldo Date: Thu, 23 Jul 2026 19:17:20 -0300 Subject: [PATCH 46/83] fix(rich-text): fix whitespace and inline emphasis bugs in documentFromMarkdown - Use the trimmed line (not rawLine) when buffering wrapped paragraph lines, avoiding doubled spaces in the joined plain-text output that the Copy action serializes verbatim. - Route heading text through parseInlineRuns instead of pushing it raw, so nested **bold**/*italic* markers inside a heading are parsed rather than rendered as literal asterisks. Inline runs are combined with the heading's bold mark rather than dropping it. Co-Authored-By: Claude Sonnet 5 --- src/utils/rich-text/model.test.ts | 21 +++++++++++++++++++++ src/utils/rich-text/model.ts | 10 ++++++++-- 2 files changed, 29 insertions(+), 2 deletions(-) diff --git a/src/utils/rich-text/model.test.ts b/src/utils/rich-text/model.test.ts index 8d3113c..e8b7764 100644 --- a/src/utils/rich-text/model.test.ts +++ b/src/utils/rich-text/model.test.ts @@ -233,4 +233,25 @@ describe("documentFromMarkdown", () => { const doc = documentFromMarkdown("\n\nSolo esto.\n\n"); expect(doc.paragraphs).toHaveLength(1); }); + + it("does not double whitespace when joining a wrapped multi-line paragraph", () => { + const doc = documentFromMarkdown("Hello\n World"); + expect(paragraphPlainText(doc.paragraphs[0])).toBe("Hello World"); + }); + + it("parses inline emphasis inside headings, combining it with the heading's bold mark", () => { + const boldHeading = documentFromMarkdown("## **Importante** nota"); + expect(boldHeading.paragraphs[0].runs).toEqual([ + { text: "Importante nota", marks: [{ type: "bold" }] }, + ]); + + const italicHeading = documentFromMarkdown("## Nota *importante*"); + expect(italicHeading.paragraphs[0].runs).toEqual([ + { text: "Nota ", marks: [{ type: "bold" }] }, + { + text: "importante", + marks: [{ type: "italic" }, { type: "bold" }], + }, + ]); + }); }); diff --git a/src/utils/rich-text/model.ts b/src/utils/rich-text/model.ts index ed15f40..65c128c 100644 --- a/src/utils/rich-text/model.ts +++ b/src/utils/rich-text/model.ts @@ -94,9 +94,15 @@ export function documentFromMarkdown(markdown: string): RichTextDocument { const heading = line.match(HEADING_RE); if (heading) { flushBufferedParagraph(); + const headingRuns = parseInlineRuns(heading[2].trim()).map((run) => ({ + text: run.text, + marks: run.marks.some((m) => m.type === "bold") + ? run.marks + : [...run.marks, { type: "bold" as const }], + })); paragraphs.push({ id: `p${paragraphIndex++}`, - runs: [{ text: heading[2].trim(), marks: [{ type: "bold" }] }], + runs: mergeAdjacentRuns(headingRuns), }); continue; } @@ -113,7 +119,7 @@ export function documentFromMarkdown(markdown: string): RichTextDocument { continue; } - bufferedLines.push(rawLine); + bufferedLines.push(line); } flushBufferedParagraph(); From d1204776fee0b8f51dc9e799c5af27138f888732 Mon Sep 17 00:00:00 2001 From: jansaldo Date: Thu, 23 Jul 2026 20:31:17 -0300 Subject: [PATCH 47/83] chore(icons): migrate from phosphor-react to @phosphor-icons/react --- package.json | 2 +- src/components/app-header/AppHeader.tsx | 2 +- src/components/archives/ArchiveProgress.tsx | 2 +- .../archives/ArchiveRow.stories.tsx | 2 +- src/components/archives/ArchiveTabs.tsx | 2 +- src/components/archives/ArchiveView.tsx | 2 +- src/components/avatar-pill/AvatarPill.tsx | 2 +- .../big-icon-button/BigIconButton.stories.tsx | 2 +- .../button-link/ButtonLink.stories.tsx | 2 +- src/components/button-link/ButtonLink.tsx | 2 +- src/components/button/Button.stories.tsx | 2 +- src/components/button/Button.tsx | 2 +- src/components/callout/Callout.stories.tsx | 4 +- src/components/callout/Callout.tsx | 4 +- src/components/card-tool/CardTool.stories.tsx | 2 +- src/components/checkbox/Checkbox.tsx | 2 +- .../features-menu/FeaturesMenu.stories.tsx | 8 +- .../file-drop-zone/FileDropZone.stories.tsx | 2 +- src/components/option/Option.tsx | 2 +- src/components/player/Player.tsx | 2 +- .../rich-text-editor/RichTextEditor.tsx | 2 +- src/components/search/Search.tsx | 2 +- src/components/select/Select.tsx | 2 +- src/components/side-panel/SidePanel.tsx | 2 +- src/components/text-field/TextField.tsx | 2 +- src/components/toast/Toast.stories.tsx | 7 +- src/components/toast/Toast.tsx | 2 +- src/components/tool-button/ToolButton.tsx | 2 +- src/components/tutorial/TutorialDialog.tsx | 2 +- .../WorkflowStepLayout.stories.tsx | 2 +- src/showcase/Showcase.stories.tsx | 2091 ++++++++++++++--- 31 files changed, 1812 insertions(+), 354 deletions(-) diff --git a/package.json b/package.json index bfe9de2..574e55c 100644 --- a/package.json +++ b/package.json @@ -48,12 +48,12 @@ "react-dom": "^18 || ^19" }, "dependencies": { + "@phosphor-icons/react": "^2.1.10", "@radix-ui/react-dialog": "^1.1.15", "@radix-ui/react-popover": "^1.1.15", "@radix-ui/react-select": "^2.2.6", "@radix-ui/react-switch": "^1.2.6", "@radix-ui/react-tooltip": "^1.2.8", - "phosphor-react": "^1.4.1", "react-hot-toast": "^2.6.0" }, "devDependencies": { diff --git a/src/components/app-header/AppHeader.tsx b/src/components/app-header/AppHeader.tsx index e26551f..53d77a5 100644 --- a/src/components/app-header/AppHeader.tsx +++ b/src/components/app-header/AppHeader.tsx @@ -1,4 +1,4 @@ -import { DotsNine, Question } from "phosphor-react"; +import { DotsNine, Question } from "@phosphor-icons/react"; import type { ReactElement, ReactNode } from "react"; import { css, cx } from "@/styled/css"; import { BigIconButton } from "../big-icon-button"; diff --git a/src/components/archives/ArchiveProgress.tsx b/src/components/archives/ArchiveProgress.tsx index 38b46eb..c87e219 100644 --- a/src/components/archives/ArchiveProgress.tsx +++ b/src/components/archives/ArchiveProgress.tsx @@ -1,4 +1,4 @@ -import { ArrowsClockwise, CheckCircle, Stop } from "phosphor-react"; +import { ArrowsClockwise, CheckCircle, Stop } from "@phosphor-icons/react"; import { Button } from "@/components/button/Button"; import { css, cx } from "@/styled/css"; diff --git a/src/components/archives/ArchiveRow.stories.tsx b/src/components/archives/ArchiveRow.stories.tsx index 2a5625d..1272be3 100644 --- a/src/components/archives/ArchiveRow.stories.tsx +++ b/src/components/archives/ArchiveRow.stories.tsx @@ -1,5 +1,5 @@ +import { File, Play, Trash } from "@phosphor-icons/react"; import type { Meta, StoryObj } from "@storybook/react"; -import { File, Play, Trash } from "phosphor-react"; import { css } from "@/styled/css"; import { Button } from "../button"; import { ArchiveRow } from "./ArchiveRow"; diff --git a/src/components/archives/ArchiveTabs.tsx b/src/components/archives/ArchiveTabs.tsx index 72845da..5b91e88 100644 --- a/src/components/archives/ArchiveTabs.tsx +++ b/src/components/archives/ArchiveTabs.tsx @@ -1,4 +1,4 @@ -import { CheckCircle } from "phosphor-react"; +import { CheckCircle } from "@phosphor-icons/react"; import { cva, cx } from "@/styled/css"; /** diff --git a/src/components/archives/ArchiveView.tsx b/src/components/archives/ArchiveView.tsx index 8662ebd..34b1e72 100644 --- a/src/components/archives/ArchiveView.tsx +++ b/src/components/archives/ArchiveView.tsx @@ -1,4 +1,4 @@ -import { CheckCircle, XCircle } from "phosphor-react"; +import { CheckCircle, XCircle } from "@phosphor-icons/react"; import { css, cva, cx } from "@/styled/css"; import { Spinner } from "../spinner"; diff --git a/src/components/avatar-pill/AvatarPill.tsx b/src/components/avatar-pill/AvatarPill.tsx index d333d1c..23d971a 100644 --- a/src/components/avatar-pill/AvatarPill.tsx +++ b/src/components/avatar-pill/AvatarPill.tsx @@ -1,4 +1,4 @@ -import { PencilSimple } from "phosphor-react"; +import { PencilSimple } from "@phosphor-icons/react"; import type { HTMLAttributes } from "react"; import { useEffect, useRef } from "react"; import { css, cva, cx, type RecipeVariantProps } from "@/styled/css"; diff --git a/src/components/big-icon-button/BigIconButton.stories.tsx b/src/components/big-icon-button/BigIconButton.stories.tsx index 0ded366..e9319d0 100644 --- a/src/components/big-icon-button/BigIconButton.stories.tsx +++ b/src/components/big-icon-button/BigIconButton.stories.tsx @@ -1,5 +1,5 @@ +import { MagnifyingGlass, Pencil, PlusCircle } from "@phosphor-icons/react"; import type { Meta, StoryObj } from "@storybook/react"; -import { MagnifyingGlass, Pencil, PlusCircle } from "phosphor-react"; import { BigIconButton } from "./BigIconButton"; const meta = { diff --git a/src/components/button-link/ButtonLink.stories.tsx b/src/components/button-link/ButtonLink.stories.tsx index e164672..656461b 100644 --- a/src/components/button-link/ButtonLink.stories.tsx +++ b/src/components/button-link/ButtonLink.stories.tsx @@ -1,5 +1,5 @@ +import { ArrowLeft, CaretDown } from "@phosphor-icons/react"; import type { Meta, StoryObj } from "@storybook/react"; -import { ArrowLeft, CaretDown } from "phosphor-react"; import { ButtonLink } from "./ButtonLink"; const meta = { diff --git a/src/components/button-link/ButtonLink.tsx b/src/components/button-link/ButtonLink.tsx index fa6a4b6..713a784 100644 --- a/src/components/button-link/ButtonLink.tsx +++ b/src/components/button-link/ButtonLink.tsx @@ -1,4 +1,4 @@ -import { CaretDown } from "phosphor-react"; +import { CaretDown } from "@phosphor-icons/react"; import type { AnchorHTMLAttributes, ReactNode } from "react"; import { cva, cx, type RecipeVariantProps } from "@/styled/css"; diff --git a/src/components/button/Button.stories.tsx b/src/components/button/Button.stories.tsx index f78cca9..d0cddca 100644 --- a/src/components/button/Button.stories.tsx +++ b/src/components/button/Button.stories.tsx @@ -1,5 +1,5 @@ +import { CaretDown } from "@phosphor-icons/react"; import type { Meta, StoryObj } from "@storybook/react"; -import { CaretDown } from "phosphor-react"; import { Button } from "./Button"; const meta = { diff --git a/src/components/button/Button.tsx b/src/components/button/Button.tsx index 4871636..0df75a1 100644 --- a/src/components/button/Button.tsx +++ b/src/components/button/Button.tsx @@ -1,4 +1,4 @@ -import { CircleNotch } from "phosphor-react"; +import { CircleNotch } from "@phosphor-icons/react"; import type { ButtonHTMLAttributes } from "react"; import { css, cva, cx, type RecipeVariantProps } from "@/styled/css"; diff --git a/src/components/callout/Callout.stories.tsx b/src/components/callout/Callout.stories.tsx index 91b8e0d..14969b4 100644 --- a/src/components/callout/Callout.stories.tsx +++ b/src/components/callout/Callout.stories.tsx @@ -1,10 +1,10 @@ -import type { Meta, StoryObj } from "@storybook/react"; import { CheckCircle, Info as InfoIcon, WarningCircle, Warning as WarningIcon, -} from "phosphor-react"; +} from "@phosphor-icons/react"; +import type { Meta, StoryObj } from "@storybook/react"; import { Callout } from "./Callout"; const meta = { diff --git a/src/components/callout/Callout.tsx b/src/components/callout/Callout.tsx index 31bd017..dd5f2a4 100644 --- a/src/components/callout/Callout.tsx +++ b/src/components/callout/Callout.tsx @@ -1,5 +1,5 @@ -import type { Icon } from "phosphor-react"; -import { Bell, X } from "phosphor-react"; +import type { Icon } from "@phosphor-icons/react"; +import { Bell, X } from "@phosphor-icons/react"; import type { HTMLAttributes } from "react"; import { cva, cx } from "@/styled/css"; import { styled } from "@/styled/jsx"; diff --git a/src/components/card-tool/CardTool.stories.tsx b/src/components/card-tool/CardTool.stories.tsx index f44eaf5..f0aebcb 100644 --- a/src/components/card-tool/CardTool.stories.tsx +++ b/src/components/card-tool/CardTool.stories.tsx @@ -1,5 +1,5 @@ +import { Article } from "@phosphor-icons/react"; import type { Meta, StoryObj } from "@storybook/react"; -import { Article } from "phosphor-react"; import { CardTool } from "./CardTool"; const meta = { diff --git a/src/components/checkbox/Checkbox.tsx b/src/components/checkbox/Checkbox.tsx index bea196a..d19d9f3 100644 --- a/src/components/checkbox/Checkbox.tsx +++ b/src/components/checkbox/Checkbox.tsx @@ -1,4 +1,4 @@ -import { Check } from "phosphor-react"; +import { Check } from "@phosphor-icons/react"; import type { InputHTMLAttributes, ReactNode } from "react"; import { css, cva, cx, type RecipeVariantProps } from "@/styled/css"; diff --git a/src/components/features-menu/FeaturesMenu.stories.tsx b/src/components/features-menu/FeaturesMenu.stories.tsx index 3aec30c..890d1a1 100644 --- a/src/components/features-menu/FeaturesMenu.stories.tsx +++ b/src/components/features-menu/FeaturesMenu.stories.tsx @@ -1,5 +1,11 @@ +import { + Article, + Database, + Detective, + FileAudio, + Gear, +} from "@phosphor-icons/react"; import type { Meta, StoryObj } from "@storybook/react"; -import { Article, Database, Detective, FileAudio, Gear } from "phosphor-react"; import { Popover, PopoverContent, PopoverTrigger } from "../popover"; import { FeaturesMenu } from "./FeaturesMenu"; import { FeaturesMenuItem } from "./FeaturesMenuItem"; diff --git a/src/components/file-drop-zone/FileDropZone.stories.tsx b/src/components/file-drop-zone/FileDropZone.stories.tsx index e48c8fe..7501aab 100644 --- a/src/components/file-drop-zone/FileDropZone.stories.tsx +++ b/src/components/file-drop-zone/FileDropZone.stories.tsx @@ -1,5 +1,5 @@ +import { FileAudio } from "@phosphor-icons/react"; import type { Meta, StoryObj } from "@storybook/react"; -import { FileAudio } from "phosphor-react"; import { FileDropZone } from "./FileDropZone"; const meta = { diff --git a/src/components/option/Option.tsx b/src/components/option/Option.tsx index 73cfd2d..abcd882 100644 --- a/src/components/option/Option.tsx +++ b/src/components/option/Option.tsx @@ -1,4 +1,4 @@ -import { XCircle } from "phosphor-react"; +import { XCircle } from "@phosphor-icons/react"; import type { HTMLAttributes, MouseEventHandler } from "react"; import { css, cva, cx, type RecipeVariantProps } from "@/styled/css"; diff --git a/src/components/player/Player.tsx b/src/components/player/Player.tsx index 6e1fc0d..dd76682 100644 --- a/src/components/player/Player.tsx +++ b/src/components/player/Player.tsx @@ -3,7 +3,7 @@ import { ArrowCounterClockwise, Pause, Play, -} from "phosphor-react"; +} from "@phosphor-icons/react"; import { type MouseEvent, type ReactNode, diff --git a/src/components/rich-text-editor/RichTextEditor.tsx b/src/components/rich-text-editor/RichTextEditor.tsx index ff2749a..0bb9b2a 100644 --- a/src/components/rich-text-editor/RichTextEditor.tsx +++ b/src/components/rich-text-editor/RichTextEditor.tsx @@ -5,7 +5,7 @@ import { TextBolder, TextItalic, TextUnderline, -} from "phosphor-react"; +} from "@phosphor-icons/react"; import { Fragment, useCallback, useEffect, useRef, useState } from "react"; import { Button } from "@/components/button"; import { Popover, PopoverContent, PopoverTrigger } from "@/components/popover"; diff --git a/src/components/search/Search.tsx b/src/components/search/Search.tsx index 16e7d96..ad5ed0d 100644 --- a/src/components/search/Search.tsx +++ b/src/components/search/Search.tsx @@ -1,4 +1,4 @@ -import { CaretDown, CaretUp, MagnifyingGlass, X } from "phosphor-react"; +import { CaretDown, CaretUp, MagnifyingGlass, X } from "@phosphor-icons/react"; import type { InputHTMLAttributes } from "react"; import { css, cx, sva } from "@/styled/css"; diff --git a/src/components/select/Select.tsx b/src/components/select/Select.tsx index 0a8637b..476bc07 100644 --- a/src/components/select/Select.tsx +++ b/src/components/select/Select.tsx @@ -1,5 +1,5 @@ +import { CaretDown, CaretUp, Check, XCircle } from "@phosphor-icons/react"; import * as RadixSelect from "@radix-ui/react-select"; -import { CaretDown, CaretUp, Check, XCircle } from "phosphor-react"; import { type Ref, useEffect, diff --git a/src/components/side-panel/SidePanel.tsx b/src/components/side-panel/SidePanel.tsx index 86fdba6..dd60807 100644 --- a/src/components/side-panel/SidePanel.tsx +++ b/src/components/side-panel/SidePanel.tsx @@ -1,4 +1,4 @@ -import { Plus, Trash } from "phosphor-react"; +import { Plus, Trash } from "@phosphor-icons/react"; import type { ComponentProps, ReactNode } from "react"; import { useState } from "react"; import { css, cva, cx } from "@/styled/css"; diff --git a/src/components/text-field/TextField.tsx b/src/components/text-field/TextField.tsx index 9e7564b..0f5ac72 100644 --- a/src/components/text-field/TextField.tsx +++ b/src/components/text-field/TextField.tsx @@ -1,4 +1,4 @@ -import { WarningCircle } from "phosphor-react"; +import { WarningCircle } from "@phosphor-icons/react"; import { useId } from "react"; import { Suggestion } from "@/components/suggestion/Suggestion"; diff --git a/src/components/toast/Toast.stories.tsx b/src/components/toast/Toast.stories.tsx index b6b7343..01beeb6 100644 --- a/src/components/toast/Toast.stories.tsx +++ b/src/components/toast/Toast.stories.tsx @@ -1,5 +1,10 @@ +import { + CheckCircle, + Info, + Warning, + WarningCircle, +} from "@phosphor-icons/react"; import type { Meta, StoryObj } from "@storybook/react"; -import { CheckCircle, Info, Warning, WarningCircle } from "phosphor-react"; import { toast as hotToast, Toaster } from "react-hot-toast"; import { Toast } from "./Toast"; diff --git a/src/components/toast/Toast.tsx b/src/components/toast/Toast.tsx index 3c3d352..c82e5c6 100644 --- a/src/components/toast/Toast.tsx +++ b/src/components/toast/Toast.tsx @@ -1,4 +1,4 @@ -import type { Icon } from "phosphor-react"; +import type { Icon } from "@phosphor-icons/react"; import { type Toast as HotToast, toast } from "react-hot-toast"; import { Callout, type CalloutVariant } from "@/components/callout/Callout"; diff --git a/src/components/tool-button/ToolButton.tsx b/src/components/tool-button/ToolButton.tsx index 27d921e..bf43c89 100644 --- a/src/components/tool-button/ToolButton.tsx +++ b/src/components/tool-button/ToolButton.tsx @@ -1,4 +1,4 @@ -import { Repeat, TagSimple, TrashSimple } from "phosphor-react"; +import { Repeat, TagSimple, TrashSimple } from "@phosphor-icons/react"; import type { ButtonHTMLAttributes } from "react"; import { css, cva, cx } from "@/styled/css"; diff --git a/src/components/tutorial/TutorialDialog.tsx b/src/components/tutorial/TutorialDialog.tsx index 751585e..bfc8761 100644 --- a/src/components/tutorial/TutorialDialog.tsx +++ b/src/components/tutorial/TutorialDialog.tsx @@ -1,4 +1,4 @@ -import { X } from "phosphor-react"; +import { X } from "@phosphor-icons/react"; import type { ReactNode } from "react"; import { css } from "@/styled/css"; import { diff --git a/src/components/workflow-step-layout/WorkflowStepLayout.stories.tsx b/src/components/workflow-step-layout/WorkflowStepLayout.stories.tsx index baa9a7b..b581c0d 100644 --- a/src/components/workflow-step-layout/WorkflowStepLayout.stories.tsx +++ b/src/components/workflow-step-layout/WorkflowStepLayout.stories.tsx @@ -1,5 +1,5 @@ +import { ArrowLeft } from "@phosphor-icons/react"; import type { Meta, StoryObj } from "@storybook/react"; -import { ArrowLeft } from "phosphor-react"; import { css } from "@/styled/css"; import { AppFooter } from "../app-footer"; import { AppHeader } from "../app-header"; diff --git a/src/showcase/Showcase.stories.tsx b/src/showcase/Showcase.stories.tsx index f341366..0d638a0 100644 --- a/src/showcase/Showcase.stories.tsx +++ b/src/showcase/Showcase.stories.tsx @@ -1,17 +1,38 @@ +import { + ArrowLeft, + ArrowsClockwise, + Article, + Database, + Detective, + File, + FileAudio, + Gear, + Info as InfoIcon, + Play, + Plus, + Trash, +} from "@phosphor-icons/react"; import type { Meta, StoryObj } from "@storybook/react"; -import { ArrowsClockwise, Plus, Trash } from "phosphor-react"; -import { useState } from "react"; +import { type ReactNode, useState } from "react"; import { Toaster, toast } from "react-hot-toast"; +import { css, cva } from "@/styled/css"; +import type { RichTextDocument } from "@/utils/rich-text/types"; import { + AppFooter, AppHeader, ArchiveProgress, + ArchiveRow, ArchiveTabs, ArchiveView, + Avatar, + AvatarPill, BigIconButton, Button, ButtonLink, Callout, Card, + CardTool, + CategoryItem, Checkbox, CheckCircle, Dialog, @@ -22,13 +43,21 @@ import { DialogHeader, DialogTitle, DialogTrigger, + FeaturesMenu, + FeaturesMenuItem, + FileDropZone, Logo, + Option, + PageTitle, + Player, Popover, PopoverContent, PopoverTrigger, Radio, + RichTextEditor, Search, Select, + SidePanel, Spinner, StatusBar, Stepper, @@ -43,12 +72,12 @@ import { TooltipContent, TooltipProvider, TooltipTrigger, + TranscriptBlock, + TutorialDialog, + TutorialGrid, + WorkflowStepLayout, } from "../index"; -/** - * A single "kitchen-sink" page that renders every @aymurai/ui component grouped - * by category — the gallery/overview page UI libraries ship as a showroom. - */ const meta = { title: "Overview/Showcase", parameters: { @@ -60,362 +89,1780 @@ const meta = { export default meta; type Story = StoryObj; -function Section({ +type Locale = "es" | "en"; +type DemoSpan = "small" | "compact" | "medium" | "wide" | "full"; +type DemoAlign = "start" | "center" | "stretch"; + +const page = css({ + minH: "[100vh]", + bg: "bg.primary", + color: "text.default", + fontFamily: "primary", +}); + +const pageInner = css({ + boxSizing: "border-box", + w: "full", + maxW: "[1600px]", + mx: "auto", + px: { base: "4", sm: "6", lg: "10" }, + py: { base: "6", md: "10" }, +}); + +const hero = css({ + display: "flex", + flexDir: "column", + gap: "5", + mb: { base: "10", lg: "16" }, +}); + +const heroDescription = css({ + m: "0", + maxW: "[720px]", + color: "text.lighter", + textStyle: "paragraph.sm.default", +}); + +const stickyNav = css({ + position: "sticky", + top: "0", + zIndex: "20", + display: "flex", + flexDir: { base: "column", md: "row" }, + alignItems: { base: "flex-start", md: "center" }, + gap: "3", + mx: { base: "-4", sm: "-6", lg: "-10" }, + mb: "5", + px: { base: "4", sm: "6", lg: "10" }, + py: "3", + bg: "bg.primary", + borderBottom: "primary", +}); + +const stickyBrand = css({ + display: "inline-flex", + flexShrink: "0", +}); + +const sectionNav = css({ + display: "flex", + flexWrap: "nowrap", + flex: "1 1 auto", + w: "full", + minW: "[0px]", + gap: "2", + overflowX: "auto", + overflowY: "hidden", + pb: "1", +}); + +const sectionNavLink = css({ + display: "inline-flex", + alignItems: "center", + minH: "8", + px: "3", + border: "primary", + rounded: "full", + bg: "bg.secondary", + color: "text.default", + textStyle: "label.sm.default", + textDecoration: "none", + transitionProperty: "[border-color, background-color]", + transitionDuration: "fast", + flexShrink: "0", + "&:hover": { + border: "primary-alt", + bg: "bg.primary-alternative", + }, + "&:focus-visible": { + outline: "primary-alt", + outlineWidth: "[2px]", + }, +}); + +const sectionStyle = css({ + display: "flex", + flexDir: "column", + gap: "5", + mb: { base: "10", lg: "14" }, + scrollMarginTop: { base: "[132px]", md: "[84px]" }, +}); + +const sectionHeader = css({ + display: "flex", + flexDir: "column", + gap: "1", + pb: "3", + borderBottom: "primary", +}); + +const sectionTitle = css({ + m: "0", + textStyle: "subtitle.md.strong", +}); + +const sectionDescription = css({ + m: "0", + color: "text.lighter", + textStyle: "subtitle.sm.default", +}); + +const demoGrid = css({ + display: "grid", + gridTemplateColumns: { + base: "minmax(0, 1fr)", + md: "repeat(2, minmax(0, 1fr))", + xl: "repeat(12, minmax(0, 1fr))", + }, + gap: { base: "4", md: "5" }, + alignItems: "stretch", + minW: "[0px]", +}); + +const demoCardRecipe = cva({ + base: { + display: "flex", + flexDir: "column", + gap: "4", + minW: "[0px]", + p: { base: "4", md: "5" }, + bg: "bg.secondary", + border: "primary", + rounded: "md", + overflow: "hidden", + }, + variants: { + span: { + small: { + gridColumn: { md: "span 1", xl: "span 2" }, + }, + compact: { + gridColumn: { md: "span 1", xl: "span 3" }, + }, + medium: { + gridColumn: { md: "span 1", xl: "span 4" }, + }, + wide: { + gridColumn: { md: "1 / -1", xl: "span 6" }, + }, + full: { + gridColumn: "1 / -1", + }, + }, + }, + defaultVariants: { + span: "compact", + }, +}); + +const demoCardHeader = css({ + display: "flex", + alignItems: "center", + justifyContent: "space-between", + flexWrap: "wrap", + gap: "2", + minH: "6", +}); + +const demoCardTitle = css({ + m: "0", + color: "text.lighter", + textStyle: "label.sm.default", + fontWeight: "600", +}); + +const demoContentRecipe = cva({ + base: { + display: "flex", + gap: "3", + minW: "[0px]", + maxW: "full", + }, + variants: { + align: { + start: { + alignItems: "flex-start", + justifyContent: "flex-start", + }, + center: { + alignItems: "center", + justifyContent: "center", + }, + stretch: { + alignItems: "stretch", + justifyContent: "stretch", + }, + }, + scroll: { + true: { + overflowX: "auto", + overflowY: "hidden", + pb: "2", + }, + false: { + overflow: "visible", + }, + }, + }, + defaultVariants: { + align: "start", + scroll: false, + }, +}); + +const wrap = css({ + display: "flex", + alignItems: "center", + flexWrap: "wrap", + gap: "3", + minW: "[0px]", + maxW: "full", +}); + +const archiveViewMatrix = css({ + display: "flex", + alignItems: "flex-start", + flexWrap: "wrap", + gap: "3", + minW: "[0px]", + maxW: "full", +}); + +const stack = css({ + display: "flex", + flexDir: "column", + gap: "3", + minW: "[0px]", + w: "full", +}); + +const twoColumnGrid = css({ + display: "grid", + gridTemplateColumns: { base: "1fr", lg: "repeat(2, minmax(0, 1fr))" }, + gap: "4", + w: "full", + minW: "[0px]", +}); + +const threeColumnGrid = css({ + display: "grid", + gridTemplateColumns: { + base: "1fr", + md: "repeat(2, minmax(0, 1fr))", + xl: "repeat(3, minmax(0, 1fr))", + }, + gap: "4", + w: "full", + minW: "[0px]", +}); + +const control = css({ + w: "full", + maxW: "[360px]", + minW: "[0px]", +}); + +const wideControl = css({ + w: "full", + maxW: "[520px]", + minW: "[0px]", +}); + +const fullWidth = css({ + w: "full", + minW: "[0px]", +}); + +const headerDemoWidth = css({ + w: "full", + minW: "[1200px]", +}); + +const subtleSurface = css({ + boxSizing: "border-box", + w: "full", + minW: "[0px]", + p: "4", + rounded: "sm", + bg: "bg.primary", +}); + +const builtBy = css({ + display: "flex", + flexDir: "column", + gap: "1", +}); + +const builtByLabel = css({ + color: "text.lighter", + textStyle: "label.sm.default", +}); + +const builtByName = css({ + textStyle: "subtitle.md.strong", +}); + +const transcriptDemo = css({ + w: "full", + maxW: "[875px]", +}); + +const archiveRowWidth = css({ + w: "[366px]", + maxW: "full", +}); + +const largeArchiveComposition = css({ + display: "flex", + flexDir: "column", + alignItems: "center", + gap: "6", + w: "[367px]", + flexShrink: "0", +}); + +const sidePanelMatrix = css({ + display: "flex", + alignItems: "flex-start", + gap: "4", + w: "max-content", +}); + +const sidePanelColumn = css({ + display: "flex", + flexDir: "column", + gap: "2", + flexShrink: "0", +}); + +const matrixLabel = css({ + color: "text.lighter", + textStyle: "label.sm.default", +}); + +const workflowFrame = css({ + w: "full", + minW: "[1200px]", + border: "primary", + rounded: "sm", + overflow: "hidden", +}); + +const cardCopy = css({ + m: "0", + color: "text.lighter", + textStyle: "subtitle.sm.default", +}); + +const sectionLinks = [ + ["identidad-navegacion", "Identidad y navegación"], + ["acciones", "Acciones"], + ["formularios", "Formularios y selección"], + ["clasificacion", "Identidad y clasificación"], + ["feedback", "Feedback y overlays"], + ["superficies", "Superficies y carga"], + ["archivos", "Archivos"], + ["audio-edicion", "Audio y edición"], + ["workflow", "Workflow"], + ["chrome", "Chrome"], +] as const; + +const englishCopy: Record = { + "@aymurai/ui — todos los componentes de la biblioteca de Figma, en una sola página.": + "@aymurai/ui — every component from the Figma UI Library, in one page.", + "Secciones del Showcase": "Showcase sections", + "Identidad y navegación": "Identity and navigation", + Acciones: "Actions", + "Formularios y selección": "Forms and selection", + "Identidad y clasificación": "Identity and classification", + "Feedback y overlays": "Feedback and overlays", + "Superficies y carga": "Surfaces and uploads", + Archivos: "Files", + "Audio y edición": "Audio and editing", + Workflow: "Workflow", + Chrome: "Chrome", + "Marca, navegación global y estructura compartida entre productos.": + "Brand, global navigation, and structure shared across products.", + "Botones principales, enlaces y controles icónicos.": + "Primary buttons, links, and icon controls.", + "Entradas, sugerencias y controles de selección con estado real.": + "Inputs, suggestions, and selection controls with real state.", + "Representación visual de personas, entidades y categorías.": + "Visual representation of people, entities, and categories.", + "Estados, mensajes y superficies que aparecen sobre el contenido.": + "States, messages, and surfaces displayed over content.", + "Contenedores, accesos a herramientas y selección de archivos.": + "Containers, tool entry points, and file selection.", + "Carga, progreso, selección, preview y presentación horizontal.": + "Upload, progress, selection, preview, and horizontal presentation.", + "Herramientas de búsqueda, reproducción, transcripción y edición documental.": + "Search, playback, transcription, and document editing tools.", + "Composición de workflow": "Workflow composition", + "Primitivas de página reunidas en un flujo real de selección de archivo.": + "Page primitives combined in a real file-selection workflow.", + "Representación del marco de navegador utilizado en las referencias visuales.": + "Browser chrome used in the visual references.", + "Variantes de Logo": "Logo variants", + "AppHeader · wordmark de inicio": "AppHeader · home wordmark", + "AppHeader · slots, nombre largo y stepper centrado": + "AppHeader · slots, long name, and centered stepper", + "Secondary y tertiary": "Secondary and tertiary", + "TextField · controlado": "TextField · controlled", + "TextField · typed y suggestion": "TextField · typed and suggestion", + "TextField · error": "TextField · error", + "Select · autogestionado": "Select · uncontrolled", + "Select · valor y clear": "Select · value and clear", + "Callout · estados": "Callout · states", + "Callout · compact": "Callout · compact", + "Tooltip, Spinner y Check": "Tooltip, Spinner, and Check", + "Dialog · tamaños": "Dialog · sizes", + "FileDropZone · estados": "FileDropZone · states", + "ArchiveProgress · estados vigentes": "ArchiveProgress · current states", + "ArchiveView · tipos": "ArchiveView · types", + "Preview grande + ArchiveRow": "Large preview + ArchiveRow", + "Toolbar · tres contextos": "Toolbar · three contexts", + "SidePanel · sm, md y lg": "SidePanel · sm, md, and lg", + "RichTextEditor · editable y read-only": + "RichTextEditor · editable and read-only", + "Plataforma hecha por": "Platform built by", + "Eliminar archivo": "Delete file", + Cerrar: "Close", + Confirmar: "Confirm", + "Esta demo usa la variante de tamaño “{size}” y permanece acotada al viewport.": + "This demo uses the “{size}” size variant and remains constrained to the viewport.", + "Resumen de Documento": "Document Summary", + Selección: "Selection", + Procesamiento: "Processing", + Revisión: "Review", + Finalización: "Completion", + "Ir al inicio del Showcase": "Go to the start of the Showcase", + "Set de Datos": "Datasets", + Anonimizador: "Anonymizer", + "Voz a Texto": "Speech to Text", + Configuración: "Settings", + "¿Cómo funciona?": "How does it work?", + "Paso 1": "Step 1", + "Paso 2": "Step 2", + "Paso 3": "Step 3", + "Paso 4": "Step 4", + "Seleccioná un archivo": "Select a file", + "Elegí el documento que querés procesar desde tu equipo.": + "Choose the document you want to process from your device.", + "Revisá la vista previa": "Review the preview", + "Confirmá que el contenido se haya cargado correctamente.": + "Confirm that the content loaded correctly.", + "Procesá el documento": "Process the document", + "AymurAI analiza el archivo y prepara los resultados.": + "AymurAI analyzes the file and prepares the results.", + "Descargá el resultado": "Download the result", + "Guardá el archivo final en tu equipo.": + "Save the final file to your device.", + Resumen: "Summary", + Cargar: "Upload", + Procesar: "Process", + Revisar: "Review", + Exportar: "Export", + Volver: "Back", + Continuar: "Continue", + Anonimizar: "Anonymize", + Pequeño: "Small", + Cargando: "Loading", + Deshabilitado: "Disabled", + Secundario: "Secondary", + Terciario: "Tertiary", + "Ver más": "Learn more", + Alternativo: "Alternative", + Agregar: "Add", + Actualizar: "Refresh", + Eliminar: "Delete", + Nombre: "Name", + "Escribí un nombre": "Enter a name", + Sugerencia: "Suggestion", + "Campo con error": "Field with error", + "Campo inválido": "Invalid field", + "Buscar…": "Search…", + Tipo: "Type", + "Elegí una opción": "Choose an option", + "Tipo seleccionado": "Selected type", + Acepto: "I agree", + "Opción A": "Option A", + "Opción B": "Option B", + Activado: "On", + Desactivado: "Off", + "Aplicar sugerencia": "Apply suggestion", + Personas: "People", + Fechas: "Dates", + "Categoría deshabilitada": "Disabled category", + Persona: "Person", + Expediente: "Case file", + "Persona 1": "Person 1", + Jueza: "Judge", + Fiscal: "Prosecutor", + Defensor: "Defense Attorney", + "Información para el usuario.": "Information for the user.", + "Documento anonimizado.": "Document anonymized.", + "Revisá antes de continuar.": "Review before continuing.", + "Ocurrió un error.": "An error occurred.", + "Transcribiendo audio…": "Transcribing audio…", + "Pasá el cursor": "Hover over me", + "Abrir sm": "Open sm", + "Abrir md": "Open md", + "Abrir lg": "Open lg", + "Abrir full": "Open full", + Confirmación: "Confirmation", + Formulario: "Form", + Tutorial: "Tutorial", + "Pantalla compleja": "Complex screen", + "Abrir popover": "Open popover", + "Contenido contextual del popover.": "Contextual popover content.", + "Abrir tutorial": "Open tutorial", + "¡Guardado!": "Saved!", + "Lanzar toast": "Launch toast", + "Card estándar": "Standard card", + "Contenedor con borde y padding.": "Container with border and padding.", + "Card interactiva": "Interactive card", + "Acepta atributos HTML públicos.": "Accepts public HTML attributes.", + "Resumen de documentos": "Document summaries", + "Resumen automático de documentos": "Automatic document summaries", + Próximamente: "Coming soon", + "Herramienta todavía no disponible": "Tool not available yet", + "Seleccioná o arrastrá el archivo para\ntranscribir": + "Select or drag the file here\nto transcribe", + "Formatos válidos: .mp3, .wav, .m4a": "Supported formats: .mp3, .wav, .m4a", + "Soltá el archivo para cargarlo": "Drop the file to upload it", + "El estado dragging puede controlarse externamente": + "The dragging state can be controlled externally", + "Carga no disponible": "Upload unavailable", + "La superficie también contempla disabled": + "The surface also supports a disabled state", + "Seleccionable.doc": "Selectable.doc", + "Cargando.doc": "Loading.doc", + "Correcto.doc": "Successful.doc", + "Fallido.doc": "Failed.doc", + "11 pág. · 21,5 MB": "11 pages · 21.5 MB", + Reproducir: "Play", + "Modo edición": "Edit mode", + "Editor de resumen": "Summary editor", + "Vista previa del resumen": "Summary preview", + "1. Selección de archivo": "1. File selection", + "Revisá y validá la información extraída del documento": + "Review and validate the information extracted from the document", + Extracción: "Extraction", + Validación: "Validation", + "Seleccionar archivo": "Select file", + "Seleccioná o arrastrá el documento para anonimizar": + "Select or drag the document here to anonymize it", + "Formatos válidos: .docx, .pdf": "Supported formats: .docx, .pdf", + Finalizar: "Finish", +}; + +function translate(locale: Locale, value: string) { + return locale === "en" ? (englishCopy[value] ?? value) : value; +} + +function getSelectOptions(locale: Locale) { + const t = (value: string) => translate(locale, value); + return [ + { id: "persona", text: t("Persona") }, + { id: "cuij", text: "CUIJ" }, + { id: "expediente", text: t("Expediente") }, + ]; +} + +function getPeople(locale: Locale) { + const t = (value: string) => translate(locale, value); + return [ + { initials: "AB", name: t("Persona 1"), color: "violet" as const }, + { initials: "JU", name: t("Jueza"), color: "red" as const }, + { initials: "FI", name: t("Fiscal"), color: "yellow" as const }, + { initials: "DE", name: t("Defensor"), color: "pink" as const }, + ]; +} + +function getRichTextDocument(locale: Locale): RichTextDocument { + if (locale === "en") { + return { + paragraphs: [ + { + id: "p1", + runs: [ + { + text: "This case is before Criminal, ", + marks: [], + }, + { + text: "Misdemeanor and Offences Court", + marks: [{ type: "bold" }], + }, + { text: " No. 10.", marks: [] }, + ], + }, + { + id: "p2", + runs: [ + { + text: "Urgent protection measures were ordered.", + marks: [{ type: "highlight", color: "category.yellow-light" }], + }, + ], + }, + ], + }; + } + + return { + paragraphs: [ + { + id: "p1", + runs: [ + { + text: "El presente caso tramita ante el Juzgado en lo Penal, ", + marks: [], + }, + { + text: "Contravencional y de Faltas", + marks: [{ type: "bold" }], + }, + { text: " N.º 10.", marks: [] }, + ], + }, + { + id: "p2", + runs: [ + { + text: "Se dispusieron medidas de protección urgentes.", + marks: [{ type: "highlight", color: "category.yellow-light" }], + }, + ], + }, + ], + }; +} + +function tutorialPlaceholder(label: string) { + const svg = ` + + ${label} + `; + return `data:image/svg+xml,${encodeURIComponent(svg)}`; +} + +function getTutorialSteps(locale: Locale) { + const t = (value: string) => translate(locale, value); + return [ + { + image: tutorialPlaceholder(t("Paso 1")), + imageAlt: t("Seleccioná un archivo"), + title: t("Seleccioná un archivo"), + description: t("Elegí el documento que querés procesar desde tu equipo."), + }, + { + image: tutorialPlaceholder(t("Paso 2")), + imageAlt: t("Revisá la vista previa"), + title: t("Revisá la vista previa"), + description: t( + "Confirmá que el contenido se haya cargado correctamente.", + ), + }, + { + image: tutorialPlaceholder(t("Paso 3")), + imageAlt: t("Procesá el documento"), + title: t("Procesá el documento"), + description: t("AymurAI analiza el archivo y prepara los resultados."), + }, + { + image: tutorialPlaceholder(t("Paso 4")), + imageAlt: t("Descargá el resultado"), + title: t("Descargá el resultado"), + description: t("Guardá el archivo final en tu equipo."), + }, + ]; +} + +function ShowcaseSection({ + id, title, + description, children, }: { + id: string; title: string; - children: React.ReactNode; + description: string; + children: ReactNode; }) { return ( -
-

- {title} -

-
- {children} +
+
+

{title}

+

{description}

+
{children}
); } -function Tile({ - label, +function DemoCard({ + title, + span = "compact", + align = "start", + scroll = false, children, }: { - label: string; - children: React.ReactNode; + title: string; + span?: DemoSpan; + align?: DemoAlign; + scroll?: boolean; + children: ReactNode; }) { return ( -
- - {label} - -
- {children} +
+
+

{title}

+
{children}
+
+ ); +} + +function BuiltByPlaceholder({ locale }: { locale: Locale }) { + return ( +
+ + {translate(locale, "Plataforma hecha por")} + + datagénero
); } -function ShowcasePage() { +function TrashButton({ locale }: { locale: Locale }) { + return ( + + ); +} + +function DialogSizeDemo({ + size, + trigger, + title, + locale, +}: { + size: "sm" | "md" | "lg" | "full"; + trigger: string; + title: string; + locale: Locale; +}) { + const t = (value: string) => translate(locale, value); + return ( + + + + + + + {title} + + + {t( + "Esta demo usa la variante de tamaño “{size}” y permanece acotada al viewport.", + ).replace("{size}", size)} + + + + + + + + + + + + ); +} + +function HeaderComposition({ locale }: { locale: Locale }) { + const t = (value: string) => translate(locale, value); + const tutorialSteps = getTutorialSteps(locale); + return ( + + + ( + + {defaultMark} + + ), + help: (defaultHelp) => ( + {defaultHelp} + ), + apps: (defaultApps) => ( + {defaultApps} + ), + }} + /> + + + } + label={t("Set de Datos")} + /> + } + label={t("Anonimizador")} + /> + } + label={t("Voz a Texto")} + /> + } + label={t("Configuración")} + fullWidth + /> + + + + + {t("¿Cómo funciona?")} + + + + + + + + + ); +} + +function ShowcasePage({ locale }: { locale: Locale }) { + const t = (value: string) => translate(locale, value); + const selectOptions = getSelectOptions(locale); + const people = getPeople(locale); + const tutorialSteps = getTutorialSteps(locale); + const transcriptSample = + locale === "en" + ? "We are gathered here regarding case number 78274. The prosecution is conducting the investigation in preparation for the oral and public trial." + : "Estamos aquí reunidos en relación a un caso que tiene el número 78274. La fiscalía está trabajando la investigación para preparar el juicio oral y público."; const [checked, setChecked] = useState(true); const [radio, setRadio] = useState("a"); const [text, setText] = useState(""); const [search, setSearch] = useState("ano"); - const [step] = useState(1); + const [archiveSelected, setArchiveSelected] = useState(false); + const [selectedPerson, setSelectedPerson] = useState(0); + const [timestamp, setTimestamp] = useState("01:15"); + const [richTextDocument, setRichTextDocument] = useState( + getRichTextDocument(locale), + ); + const [richTextTitle, setRichTextTitle] = useState( + locale === "en" ? "Summary 04/10/2025" : "Resumen 10/04/2025", + ); return ( -
-
- -

- @aymurai/ui — every component from the Figma UI Library, in one - page. -

-
- -
- - - - - - - - - -
- -
- - - - - - - - - - - - - Ver más - - - Alternative - - - - - - - - - - - - - - - - - - - -
- -
- -
- setText(e.target.value)} - /> -
- - -
- - -
- - -
- setSearch(e.target.value)} - /> +
+
+
+
+
- - -
- +
+ + + +
+ +
+ + + + Acepto + + + Disabled + + + + setRadio("a")} > - {sectionLinks.map(([id, label]) => ( - - {t(label)} - - ))} - -
-
-

- {t( - "@aymurai/ui — todos los componentes de la biblioteca de Figma, en una sola página.", - )} -

-
- - - -
- - - -
- - - - - } - label={t("Set de Datos")} - /> - } - label={t("Anonimizador")} - /> - } - label={t("Voz a Texto")} - /> - } - label={t("Resumen")} - disabled - /> - - - - -
- -
- - - + setRadio("b")} > -
- -
- - - + + + + + + + Juan Pérez + + + + +
+ +
+
+ + + + +
+ + + + + + +
Tooltip
+ + + + + + + - - - } - /> -
- - - - - -
- - - - -
- - - -
- - -
- - - -
- - {t("Ver más")} - - - {t("Alternativo")} - -
- - - -
- - - - - - - - - -
- - - -
- - - - - - -
- - - - - -
- setText(event.target.value)} - /> -
- - - -
- - -
- - - -
- -
- - - -
- setSearch(event.target.value)} - onClear={() => setSearch("")} - /> -
- - - -
- -
- - - -
- - {t("Acepto")} - - - {t("Deshabilitado")} - -
- - - -
- setRadio("a")} - > - {t("Opción A")} - - setRadio("b")} - > - {t("Opción B")} - -
- - - -
- - - -
- - - -
- - {locale === "en" ? "John Doe" : "Juan Pérez"} - - {t("Aplicar sugerencia")} -
- - - -
- - - -
- - - -
-
- - - - - -
- - - - -
- - - -
- - - {}} - /> -
- - - -
- - - - -
- - - - - -
- - - - -
- - - -
- -
- + Lanzar toast + + +
+ +
+
- -
- - +
+ + Card +

+ Contenedor con borde y sombra. +

+ + + + + + + + + Confirmar + + ¿Querés continuar? + + - - -
Tooltip
- - - - -
- - - -
- - - - -
- - - - - - - - -
- {t("Contenido contextual del popover.")} -
- - - - - - - {t("Abrir tutorial")} - - } - /> - - - - - - - - - -
- - {t("Card estándar")} -

- {t("Contenedor con borde y padding.")} -

- - - {t("Card interactiva")} -

- {t("Acepta atributos HTML públicos.")} -

- -
- - - -
- } - title={t("Resumen de documentos")} - description={t("Resumen automático de documentos")} - interactive - /> - } - title={t("Próximamente")} - description={t("Herramienta todavía no disponible")} - disabled - /> -
- - - -
- } - title={t( - "Seleccioná o arrastrá el archivo para\ntranscribir", - )} - description={t("Formatos válidos: .mp3, .wav, .m4a")} - /> - } - title={t("Soltá el archivo para cargarlo")} - description={t( - "El estado dragging puede controlarse externamente", - )} - dragging - /> - } - title={t("Carga no disponible")} - description={t("La superficie también contempla disabled")} - disabled - /> -
- - - -
- -
- - - - - -
- - - - -
- - - -
- - - -
- - - -
-
- } - title="demanda-con-un-nombre-largo.docx" - description={t("11 pág. · 21,5 MB")} - trailingAction={} - /> -
-
- - - - } - trailingAction={} - /> -
-
- - - -
- - - - - -
- - - -
- - } - title="documento-para-procesar.docx" - description={t("11 pág. · 21,5 MB")} - trailingAction={} - /> -
- - - - - -
- - - - - {t("Modo edición")} -
- } - /> -
- - - -
- {t("Finalizar")}} - /> -
- - - -
- -
- - - -
- {(["sm", "md", "lg"] as const).map((size) => ( -
- size="{size}" - -
- ))} -
- - - -
-
- -
-
- -
-
- - - - - -
- {t("1. Selección de archivo")} - - {t("Revisá y validá la información extraída del documento")} - -
- - - -
- - } - title={t("1. Selección de archivo")} - leading={ - - } - footer={ - } - actions={} - /> - } - > - } - title={t( - "Seleccioná o arrastrá el documento para anonimizar", - )} - description={t("Formatos válidos: .docx, .pdf")} - /> - -
- - - - - -
- -
- - -
+ + + +

+ + + + + + + +
Contenido del popover
+ + + + + +
+
+ + + +
+
+ +
+
+ + +
+ + +
+ +
+
); } export const Showcase: Story = { - render: () => , -}; - -export const ShowcaseEn: Story = { - name: "Showcase (EN)", - render: () => , + render: () => , }; From af386f74727e1749ee68153e7e135e772de5dedd Mon Sep 17 00:00:00 2001 From: jansaldo Date: Thu, 23 Jul 2026 21:07:56 -0300 Subject: [PATCH 50/83] chore(icons): commit pnpm-lock.yaml update from the phosphor-react migration MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Follow-up to d120477 — the lockfile change from that dependency swap wasn't staged in the original commit. --- pnpm-lock.yaml | 28 +++++++++++++++------------- 1 file changed, 15 insertions(+), 13 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2a8acf2..b3bf61a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -8,6 +8,9 @@ importers: .: dependencies: + '@phosphor-icons/react': + specifier: ^2.1.10 + version: 2.1.10(react-dom@19.2.7(react@19.2.7))(react@19.2.7) '@radix-ui/react-dialog': specifier: ^1.1.15 version: 1.1.16(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7) @@ -23,9 +26,6 @@ importers: '@radix-ui/react-tooltip': specifier: ^1.2.8 version: 1.2.9(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7) - phosphor-react: - specifier: ^1.4.1 - version: 1.4.1(react@19.2.7) react-hot-toast: specifier: ^2.6.0 version: 2.6.0(react-dom@19.2.7(react@19.2.7))(react@19.2.7) @@ -644,6 +644,13 @@ packages: resolution: {integrity: sha512-tUbxa3WzoCuulP6kcMn7f0uNgLBvu81JAg4sfoUpz6PZE36VHA3k9n6ROEwziTbr7vqgeCj5DYQCUldrVNbEGQ==} engines: {node: '>=20'} + '@phosphor-icons/react@2.1.10': + resolution: {integrity: sha512-vt8Tvq8GLjheAZZYa+YG/pW7HDbov8El/MANW8pOAz4eGxrwhnbfrQZq0Cp4q8zBEu8NIhHdnr+r8thnfRSNYA==} + engines: {node: '>=10'} + peerDependencies: + react: '>= 16.8' + react-dom: '>= 16.8' + '@pkgjs/parseargs@0.11.0': resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==} engines: {node: '>=14'} @@ -2397,12 +2404,6 @@ packages: perfect-debounce@1.0.0: resolution: {integrity: sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==} - phosphor-react@1.4.1: - resolution: {integrity: sha512-gO5j7U0xZrdglTAYDYPACU4xDOFBTJmptrrB/GeR+tHhCZF3nUMyGmV/0hnloKjuTrOmpSFlbfOY78H39rgjUQ==} - engines: {node: '>=10'} - peerDependencies: - react: '>=16' - picocolors@1.1.1: resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==} @@ -3765,6 +3766,11 @@ snapshots: '@pandacss/types@1.11.3': {} + '@phosphor-icons/react@2.1.10(react-dom@19.2.7(react@19.2.7))(react@19.2.7)': + dependencies: + react: 19.2.7 + react-dom: 19.2.7(react@19.2.7) + '@pkgjs/parseargs@0.11.0': optional: true @@ -5443,10 +5449,6 @@ snapshots: perfect-debounce@1.0.0: {} - phosphor-react@1.4.1(react@19.2.7): - dependencies: - react: 19.2.7 - picocolors@1.1.1: {} picomatch@2.3.2: {} From 6d8e9274e04c24fae4b7c3922dd4119cbb03fc73 Mon Sep 17 00:00:00 2001 From: jansaldo Date: Thu, 23 Jul 2026 21:12:24 -0300 Subject: [PATCH 51/83] chore(icons): fix the one committed import line d120477's revert lost in Showcase.stories.tsx 8d10f35 correctly reverted the accidental ~1769-line unrelated rewrite in this file, but over-corrected by also reverting the file's legitimate one-line icon-migration fix back to importing from the now-removed phosphor-react package. This applies just that one line against the committed history, independent of the concurrent session's own uncommitted content for this file. --- src/showcase/Showcase.stories.tsx | 2091 ++++++++++++++++++++++++----- 1 file changed, 1769 insertions(+), 322 deletions(-) diff --git a/src/showcase/Showcase.stories.tsx b/src/showcase/Showcase.stories.tsx index f341366..0d638a0 100644 --- a/src/showcase/Showcase.stories.tsx +++ b/src/showcase/Showcase.stories.tsx @@ -1,17 +1,38 @@ +import { + ArrowLeft, + ArrowsClockwise, + Article, + Database, + Detective, + File, + FileAudio, + Gear, + Info as InfoIcon, + Play, + Plus, + Trash, +} from "@phosphor-icons/react"; import type { Meta, StoryObj } from "@storybook/react"; -import { ArrowsClockwise, Plus, Trash } from "phosphor-react"; -import { useState } from "react"; +import { type ReactNode, useState } from "react"; import { Toaster, toast } from "react-hot-toast"; +import { css, cva } from "@/styled/css"; +import type { RichTextDocument } from "@/utils/rich-text/types"; import { + AppFooter, AppHeader, ArchiveProgress, + ArchiveRow, ArchiveTabs, ArchiveView, + Avatar, + AvatarPill, BigIconButton, Button, ButtonLink, Callout, Card, + CardTool, + CategoryItem, Checkbox, CheckCircle, Dialog, @@ -22,13 +43,21 @@ import { DialogHeader, DialogTitle, DialogTrigger, + FeaturesMenu, + FeaturesMenuItem, + FileDropZone, Logo, + Option, + PageTitle, + Player, Popover, PopoverContent, PopoverTrigger, Radio, + RichTextEditor, Search, Select, + SidePanel, Spinner, StatusBar, Stepper, @@ -43,12 +72,12 @@ import { TooltipContent, TooltipProvider, TooltipTrigger, + TranscriptBlock, + TutorialDialog, + TutorialGrid, + WorkflowStepLayout, } from "../index"; -/** - * A single "kitchen-sink" page that renders every @aymurai/ui component grouped - * by category — the gallery/overview page UI libraries ship as a showroom. - */ const meta = { title: "Overview/Showcase", parameters: { @@ -60,362 +89,1780 @@ const meta = { export default meta; type Story = StoryObj; -function Section({ +type Locale = "es" | "en"; +type DemoSpan = "small" | "compact" | "medium" | "wide" | "full"; +type DemoAlign = "start" | "center" | "stretch"; + +const page = css({ + minH: "[100vh]", + bg: "bg.primary", + color: "text.default", + fontFamily: "primary", +}); + +const pageInner = css({ + boxSizing: "border-box", + w: "full", + maxW: "[1600px]", + mx: "auto", + px: { base: "4", sm: "6", lg: "10" }, + py: { base: "6", md: "10" }, +}); + +const hero = css({ + display: "flex", + flexDir: "column", + gap: "5", + mb: { base: "10", lg: "16" }, +}); + +const heroDescription = css({ + m: "0", + maxW: "[720px]", + color: "text.lighter", + textStyle: "paragraph.sm.default", +}); + +const stickyNav = css({ + position: "sticky", + top: "0", + zIndex: "20", + display: "flex", + flexDir: { base: "column", md: "row" }, + alignItems: { base: "flex-start", md: "center" }, + gap: "3", + mx: { base: "-4", sm: "-6", lg: "-10" }, + mb: "5", + px: { base: "4", sm: "6", lg: "10" }, + py: "3", + bg: "bg.primary", + borderBottom: "primary", +}); + +const stickyBrand = css({ + display: "inline-flex", + flexShrink: "0", +}); + +const sectionNav = css({ + display: "flex", + flexWrap: "nowrap", + flex: "1 1 auto", + w: "full", + minW: "[0px]", + gap: "2", + overflowX: "auto", + overflowY: "hidden", + pb: "1", +}); + +const sectionNavLink = css({ + display: "inline-flex", + alignItems: "center", + minH: "8", + px: "3", + border: "primary", + rounded: "full", + bg: "bg.secondary", + color: "text.default", + textStyle: "label.sm.default", + textDecoration: "none", + transitionProperty: "[border-color, background-color]", + transitionDuration: "fast", + flexShrink: "0", + "&:hover": { + border: "primary-alt", + bg: "bg.primary-alternative", + }, + "&:focus-visible": { + outline: "primary-alt", + outlineWidth: "[2px]", + }, +}); + +const sectionStyle = css({ + display: "flex", + flexDir: "column", + gap: "5", + mb: { base: "10", lg: "14" }, + scrollMarginTop: { base: "[132px]", md: "[84px]" }, +}); + +const sectionHeader = css({ + display: "flex", + flexDir: "column", + gap: "1", + pb: "3", + borderBottom: "primary", +}); + +const sectionTitle = css({ + m: "0", + textStyle: "subtitle.md.strong", +}); + +const sectionDescription = css({ + m: "0", + color: "text.lighter", + textStyle: "subtitle.sm.default", +}); + +const demoGrid = css({ + display: "grid", + gridTemplateColumns: { + base: "minmax(0, 1fr)", + md: "repeat(2, minmax(0, 1fr))", + xl: "repeat(12, minmax(0, 1fr))", + }, + gap: { base: "4", md: "5" }, + alignItems: "stretch", + minW: "[0px]", +}); + +const demoCardRecipe = cva({ + base: { + display: "flex", + flexDir: "column", + gap: "4", + minW: "[0px]", + p: { base: "4", md: "5" }, + bg: "bg.secondary", + border: "primary", + rounded: "md", + overflow: "hidden", + }, + variants: { + span: { + small: { + gridColumn: { md: "span 1", xl: "span 2" }, + }, + compact: { + gridColumn: { md: "span 1", xl: "span 3" }, + }, + medium: { + gridColumn: { md: "span 1", xl: "span 4" }, + }, + wide: { + gridColumn: { md: "1 / -1", xl: "span 6" }, + }, + full: { + gridColumn: "1 / -1", + }, + }, + }, + defaultVariants: { + span: "compact", + }, +}); + +const demoCardHeader = css({ + display: "flex", + alignItems: "center", + justifyContent: "space-between", + flexWrap: "wrap", + gap: "2", + minH: "6", +}); + +const demoCardTitle = css({ + m: "0", + color: "text.lighter", + textStyle: "label.sm.default", + fontWeight: "600", +}); + +const demoContentRecipe = cva({ + base: { + display: "flex", + gap: "3", + minW: "[0px]", + maxW: "full", + }, + variants: { + align: { + start: { + alignItems: "flex-start", + justifyContent: "flex-start", + }, + center: { + alignItems: "center", + justifyContent: "center", + }, + stretch: { + alignItems: "stretch", + justifyContent: "stretch", + }, + }, + scroll: { + true: { + overflowX: "auto", + overflowY: "hidden", + pb: "2", + }, + false: { + overflow: "visible", + }, + }, + }, + defaultVariants: { + align: "start", + scroll: false, + }, +}); + +const wrap = css({ + display: "flex", + alignItems: "center", + flexWrap: "wrap", + gap: "3", + minW: "[0px]", + maxW: "full", +}); + +const archiveViewMatrix = css({ + display: "flex", + alignItems: "flex-start", + flexWrap: "wrap", + gap: "3", + minW: "[0px]", + maxW: "full", +}); + +const stack = css({ + display: "flex", + flexDir: "column", + gap: "3", + minW: "[0px]", + w: "full", +}); + +const twoColumnGrid = css({ + display: "grid", + gridTemplateColumns: { base: "1fr", lg: "repeat(2, minmax(0, 1fr))" }, + gap: "4", + w: "full", + minW: "[0px]", +}); + +const threeColumnGrid = css({ + display: "grid", + gridTemplateColumns: { + base: "1fr", + md: "repeat(2, minmax(0, 1fr))", + xl: "repeat(3, minmax(0, 1fr))", + }, + gap: "4", + w: "full", + minW: "[0px]", +}); + +const control = css({ + w: "full", + maxW: "[360px]", + minW: "[0px]", +}); + +const wideControl = css({ + w: "full", + maxW: "[520px]", + minW: "[0px]", +}); + +const fullWidth = css({ + w: "full", + minW: "[0px]", +}); + +const headerDemoWidth = css({ + w: "full", + minW: "[1200px]", +}); + +const subtleSurface = css({ + boxSizing: "border-box", + w: "full", + minW: "[0px]", + p: "4", + rounded: "sm", + bg: "bg.primary", +}); + +const builtBy = css({ + display: "flex", + flexDir: "column", + gap: "1", +}); + +const builtByLabel = css({ + color: "text.lighter", + textStyle: "label.sm.default", +}); + +const builtByName = css({ + textStyle: "subtitle.md.strong", +}); + +const transcriptDemo = css({ + w: "full", + maxW: "[875px]", +}); + +const archiveRowWidth = css({ + w: "[366px]", + maxW: "full", +}); + +const largeArchiveComposition = css({ + display: "flex", + flexDir: "column", + alignItems: "center", + gap: "6", + w: "[367px]", + flexShrink: "0", +}); + +const sidePanelMatrix = css({ + display: "flex", + alignItems: "flex-start", + gap: "4", + w: "max-content", +}); + +const sidePanelColumn = css({ + display: "flex", + flexDir: "column", + gap: "2", + flexShrink: "0", +}); + +const matrixLabel = css({ + color: "text.lighter", + textStyle: "label.sm.default", +}); + +const workflowFrame = css({ + w: "full", + minW: "[1200px]", + border: "primary", + rounded: "sm", + overflow: "hidden", +}); + +const cardCopy = css({ + m: "0", + color: "text.lighter", + textStyle: "subtitle.sm.default", +}); + +const sectionLinks = [ + ["identidad-navegacion", "Identidad y navegación"], + ["acciones", "Acciones"], + ["formularios", "Formularios y selección"], + ["clasificacion", "Identidad y clasificación"], + ["feedback", "Feedback y overlays"], + ["superficies", "Superficies y carga"], + ["archivos", "Archivos"], + ["audio-edicion", "Audio y edición"], + ["workflow", "Workflow"], + ["chrome", "Chrome"], +] as const; + +const englishCopy: Record = { + "@aymurai/ui — todos los componentes de la biblioteca de Figma, en una sola página.": + "@aymurai/ui — every component from the Figma UI Library, in one page.", + "Secciones del Showcase": "Showcase sections", + "Identidad y navegación": "Identity and navigation", + Acciones: "Actions", + "Formularios y selección": "Forms and selection", + "Identidad y clasificación": "Identity and classification", + "Feedback y overlays": "Feedback and overlays", + "Superficies y carga": "Surfaces and uploads", + Archivos: "Files", + "Audio y edición": "Audio and editing", + Workflow: "Workflow", + Chrome: "Chrome", + "Marca, navegación global y estructura compartida entre productos.": + "Brand, global navigation, and structure shared across products.", + "Botones principales, enlaces y controles icónicos.": + "Primary buttons, links, and icon controls.", + "Entradas, sugerencias y controles de selección con estado real.": + "Inputs, suggestions, and selection controls with real state.", + "Representación visual de personas, entidades y categorías.": + "Visual representation of people, entities, and categories.", + "Estados, mensajes y superficies que aparecen sobre el contenido.": + "States, messages, and surfaces displayed over content.", + "Contenedores, accesos a herramientas y selección de archivos.": + "Containers, tool entry points, and file selection.", + "Carga, progreso, selección, preview y presentación horizontal.": + "Upload, progress, selection, preview, and horizontal presentation.", + "Herramientas de búsqueda, reproducción, transcripción y edición documental.": + "Search, playback, transcription, and document editing tools.", + "Composición de workflow": "Workflow composition", + "Primitivas de página reunidas en un flujo real de selección de archivo.": + "Page primitives combined in a real file-selection workflow.", + "Representación del marco de navegador utilizado en las referencias visuales.": + "Browser chrome used in the visual references.", + "Variantes de Logo": "Logo variants", + "AppHeader · wordmark de inicio": "AppHeader · home wordmark", + "AppHeader · slots, nombre largo y stepper centrado": + "AppHeader · slots, long name, and centered stepper", + "Secondary y tertiary": "Secondary and tertiary", + "TextField · controlado": "TextField · controlled", + "TextField · typed y suggestion": "TextField · typed and suggestion", + "TextField · error": "TextField · error", + "Select · autogestionado": "Select · uncontrolled", + "Select · valor y clear": "Select · value and clear", + "Callout · estados": "Callout · states", + "Callout · compact": "Callout · compact", + "Tooltip, Spinner y Check": "Tooltip, Spinner, and Check", + "Dialog · tamaños": "Dialog · sizes", + "FileDropZone · estados": "FileDropZone · states", + "ArchiveProgress · estados vigentes": "ArchiveProgress · current states", + "ArchiveView · tipos": "ArchiveView · types", + "Preview grande + ArchiveRow": "Large preview + ArchiveRow", + "Toolbar · tres contextos": "Toolbar · three contexts", + "SidePanel · sm, md y lg": "SidePanel · sm, md, and lg", + "RichTextEditor · editable y read-only": + "RichTextEditor · editable and read-only", + "Plataforma hecha por": "Platform built by", + "Eliminar archivo": "Delete file", + Cerrar: "Close", + Confirmar: "Confirm", + "Esta demo usa la variante de tamaño “{size}” y permanece acotada al viewport.": + "This demo uses the “{size}” size variant and remains constrained to the viewport.", + "Resumen de Documento": "Document Summary", + Selección: "Selection", + Procesamiento: "Processing", + Revisión: "Review", + Finalización: "Completion", + "Ir al inicio del Showcase": "Go to the start of the Showcase", + "Set de Datos": "Datasets", + Anonimizador: "Anonymizer", + "Voz a Texto": "Speech to Text", + Configuración: "Settings", + "¿Cómo funciona?": "How does it work?", + "Paso 1": "Step 1", + "Paso 2": "Step 2", + "Paso 3": "Step 3", + "Paso 4": "Step 4", + "Seleccioná un archivo": "Select a file", + "Elegí el documento que querés procesar desde tu equipo.": + "Choose the document you want to process from your device.", + "Revisá la vista previa": "Review the preview", + "Confirmá que el contenido se haya cargado correctamente.": + "Confirm that the content loaded correctly.", + "Procesá el documento": "Process the document", + "AymurAI analiza el archivo y prepara los resultados.": + "AymurAI analyzes the file and prepares the results.", + "Descargá el resultado": "Download the result", + "Guardá el archivo final en tu equipo.": + "Save the final file to your device.", + Resumen: "Summary", + Cargar: "Upload", + Procesar: "Process", + Revisar: "Review", + Exportar: "Export", + Volver: "Back", + Continuar: "Continue", + Anonimizar: "Anonymize", + Pequeño: "Small", + Cargando: "Loading", + Deshabilitado: "Disabled", + Secundario: "Secondary", + Terciario: "Tertiary", + "Ver más": "Learn more", + Alternativo: "Alternative", + Agregar: "Add", + Actualizar: "Refresh", + Eliminar: "Delete", + Nombre: "Name", + "Escribí un nombre": "Enter a name", + Sugerencia: "Suggestion", + "Campo con error": "Field with error", + "Campo inválido": "Invalid field", + "Buscar…": "Search…", + Tipo: "Type", + "Elegí una opción": "Choose an option", + "Tipo seleccionado": "Selected type", + Acepto: "I agree", + "Opción A": "Option A", + "Opción B": "Option B", + Activado: "On", + Desactivado: "Off", + "Aplicar sugerencia": "Apply suggestion", + Personas: "People", + Fechas: "Dates", + "Categoría deshabilitada": "Disabled category", + Persona: "Person", + Expediente: "Case file", + "Persona 1": "Person 1", + Jueza: "Judge", + Fiscal: "Prosecutor", + Defensor: "Defense Attorney", + "Información para el usuario.": "Information for the user.", + "Documento anonimizado.": "Document anonymized.", + "Revisá antes de continuar.": "Review before continuing.", + "Ocurrió un error.": "An error occurred.", + "Transcribiendo audio…": "Transcribing audio…", + "Pasá el cursor": "Hover over me", + "Abrir sm": "Open sm", + "Abrir md": "Open md", + "Abrir lg": "Open lg", + "Abrir full": "Open full", + Confirmación: "Confirmation", + Formulario: "Form", + Tutorial: "Tutorial", + "Pantalla compleja": "Complex screen", + "Abrir popover": "Open popover", + "Contenido contextual del popover.": "Contextual popover content.", + "Abrir tutorial": "Open tutorial", + "¡Guardado!": "Saved!", + "Lanzar toast": "Launch toast", + "Card estándar": "Standard card", + "Contenedor con borde y padding.": "Container with border and padding.", + "Card interactiva": "Interactive card", + "Acepta atributos HTML públicos.": "Accepts public HTML attributes.", + "Resumen de documentos": "Document summaries", + "Resumen automático de documentos": "Automatic document summaries", + Próximamente: "Coming soon", + "Herramienta todavía no disponible": "Tool not available yet", + "Seleccioná o arrastrá el archivo para\ntranscribir": + "Select or drag the file here\nto transcribe", + "Formatos válidos: .mp3, .wav, .m4a": "Supported formats: .mp3, .wav, .m4a", + "Soltá el archivo para cargarlo": "Drop the file to upload it", + "El estado dragging puede controlarse externamente": + "The dragging state can be controlled externally", + "Carga no disponible": "Upload unavailable", + "La superficie también contempla disabled": + "The surface also supports a disabled state", + "Seleccionable.doc": "Selectable.doc", + "Cargando.doc": "Loading.doc", + "Correcto.doc": "Successful.doc", + "Fallido.doc": "Failed.doc", + "11 pág. · 21,5 MB": "11 pages · 21.5 MB", + Reproducir: "Play", + "Modo edición": "Edit mode", + "Editor de resumen": "Summary editor", + "Vista previa del resumen": "Summary preview", + "1. Selección de archivo": "1. File selection", + "Revisá y validá la información extraída del documento": + "Review and validate the information extracted from the document", + Extracción: "Extraction", + Validación: "Validation", + "Seleccionar archivo": "Select file", + "Seleccioná o arrastrá el documento para anonimizar": + "Select or drag the document here to anonymize it", + "Formatos válidos: .docx, .pdf": "Supported formats: .docx, .pdf", + Finalizar: "Finish", +}; + +function translate(locale: Locale, value: string) { + return locale === "en" ? (englishCopy[value] ?? value) : value; +} + +function getSelectOptions(locale: Locale) { + const t = (value: string) => translate(locale, value); + return [ + { id: "persona", text: t("Persona") }, + { id: "cuij", text: "CUIJ" }, + { id: "expediente", text: t("Expediente") }, + ]; +} + +function getPeople(locale: Locale) { + const t = (value: string) => translate(locale, value); + return [ + { initials: "AB", name: t("Persona 1"), color: "violet" as const }, + { initials: "JU", name: t("Jueza"), color: "red" as const }, + { initials: "FI", name: t("Fiscal"), color: "yellow" as const }, + { initials: "DE", name: t("Defensor"), color: "pink" as const }, + ]; +} + +function getRichTextDocument(locale: Locale): RichTextDocument { + if (locale === "en") { + return { + paragraphs: [ + { + id: "p1", + runs: [ + { + text: "This case is before Criminal, ", + marks: [], + }, + { + text: "Misdemeanor and Offences Court", + marks: [{ type: "bold" }], + }, + { text: " No. 10.", marks: [] }, + ], + }, + { + id: "p2", + runs: [ + { + text: "Urgent protection measures were ordered.", + marks: [{ type: "highlight", color: "category.yellow-light" }], + }, + ], + }, + ], + }; + } + + return { + paragraphs: [ + { + id: "p1", + runs: [ + { + text: "El presente caso tramita ante el Juzgado en lo Penal, ", + marks: [], + }, + { + text: "Contravencional y de Faltas", + marks: [{ type: "bold" }], + }, + { text: " N.º 10.", marks: [] }, + ], + }, + { + id: "p2", + runs: [ + { + text: "Se dispusieron medidas de protección urgentes.", + marks: [{ type: "highlight", color: "category.yellow-light" }], + }, + ], + }, + ], + }; +} + +function tutorialPlaceholder(label: string) { + const svg = ` + + ${label} + `; + return `data:image/svg+xml,${encodeURIComponent(svg)}`; +} + +function getTutorialSteps(locale: Locale) { + const t = (value: string) => translate(locale, value); + return [ + { + image: tutorialPlaceholder(t("Paso 1")), + imageAlt: t("Seleccioná un archivo"), + title: t("Seleccioná un archivo"), + description: t("Elegí el documento que querés procesar desde tu equipo."), + }, + { + image: tutorialPlaceholder(t("Paso 2")), + imageAlt: t("Revisá la vista previa"), + title: t("Revisá la vista previa"), + description: t( + "Confirmá que el contenido se haya cargado correctamente.", + ), + }, + { + image: tutorialPlaceholder(t("Paso 3")), + imageAlt: t("Procesá el documento"), + title: t("Procesá el documento"), + description: t("AymurAI analiza el archivo y prepara los resultados."), + }, + { + image: tutorialPlaceholder(t("Paso 4")), + imageAlt: t("Descargá el resultado"), + title: t("Descargá el resultado"), + description: t("Guardá el archivo final en tu equipo."), + }, + ]; +} + +function ShowcaseSection({ + id, title, + description, children, }: { + id: string; title: string; - children: React.ReactNode; + description: string; + children: ReactNode; }) { return ( -
-

- {title} -

-
- {children} +
+
+

{title}

+

{description}

+
{children}
); } -function Tile({ - label, +function DemoCard({ + title, + span = "compact", + align = "start", + scroll = false, children, }: { - label: string; - children: React.ReactNode; + title: string; + span?: DemoSpan; + align?: DemoAlign; + scroll?: boolean; + children: ReactNode; }) { return ( -
- - {label} - -
- {children} +
+
+

{title}

+
{children}
+
+ ); +} + +function BuiltByPlaceholder({ locale }: { locale: Locale }) { + return ( +
+ + {translate(locale, "Plataforma hecha por")} + + datagénero
); } -function ShowcasePage() { +function TrashButton({ locale }: { locale: Locale }) { + return ( + + ); +} + +function DialogSizeDemo({ + size, + trigger, + title, + locale, +}: { + size: "sm" | "md" | "lg" | "full"; + trigger: string; + title: string; + locale: Locale; +}) { + const t = (value: string) => translate(locale, value); + return ( + + + + + + + {title} + + + {t( + "Esta demo usa la variante de tamaño “{size}” y permanece acotada al viewport.", + ).replace("{size}", size)} + + + + + + + + + + + + ); +} + +function HeaderComposition({ locale }: { locale: Locale }) { + const t = (value: string) => translate(locale, value); + const tutorialSteps = getTutorialSteps(locale); + return ( + + + ( + + {defaultMark} + + ), + help: (defaultHelp) => ( + {defaultHelp} + ), + apps: (defaultApps) => ( + {defaultApps} + ), + }} + /> + + + } + label={t("Set de Datos")} + /> + } + label={t("Anonimizador")} + /> + } + label={t("Voz a Texto")} + /> + } + label={t("Configuración")} + fullWidth + /> + + + + + {t("¿Cómo funciona?")} + + + + + + + + + ); +} + +function ShowcasePage({ locale }: { locale: Locale }) { + const t = (value: string) => translate(locale, value); + const selectOptions = getSelectOptions(locale); + const people = getPeople(locale); + const tutorialSteps = getTutorialSteps(locale); + const transcriptSample = + locale === "en" + ? "We are gathered here regarding case number 78274. The prosecution is conducting the investigation in preparation for the oral and public trial." + : "Estamos aquí reunidos en relación a un caso que tiene el número 78274. La fiscalía está trabajando la investigación para preparar el juicio oral y público."; const [checked, setChecked] = useState(true); const [radio, setRadio] = useState("a"); const [text, setText] = useState(""); const [search, setSearch] = useState("ano"); - const [step] = useState(1); + const [archiveSelected, setArchiveSelected] = useState(false); + const [selectedPerson, setSelectedPerson] = useState(0); + const [timestamp, setTimestamp] = useState("01:15"); + const [richTextDocument, setRichTextDocument] = useState( + getRichTextDocument(locale), + ); + const [richTextTitle, setRichTextTitle] = useState( + locale === "en" ? "Summary 04/10/2025" : "Resumen 10/04/2025", + ); return ( -
-
- -

- @aymurai/ui — every component from the Figma UI Library, in one - page. -

-
- -
- - - - - - - - - -
- -
- - - - - - - - - - - - - Ver más - - - Alternative - - - - - - - - - - - - - - - - - - - -
- -
- -
- setText(e.target.value)} - /> -
- - -
- - -
- - -
- setSearch(e.target.value)} - /> +
+
+
+
+
- - -
- +
+ + + +
+ +
+ + + + Acepto + + + Disabled + + + + setRadio("a")} > - {sectionLinks.map(([id, label]) => ( - - {t(label)} - - ))} - -
-
-

- {t( - "@aymurai/ui — todos los componentes de la biblioteca de Figma, en una sola página.", - )} -

-
- - - -
- - - -
- - - - - } - label={t("Set de Datos")} - /> - } - label={t("Anonimizador")} - /> - } - label={t("Voz a Texto")} - /> - } - label={t("Resumen")} - disabled - /> - - - - -
- -
- - - + setRadio("b")} > -
- -
- - - + + + + + + + Juan Pérez + + + + +
+ +
+
+ + + + +
+ + + + + + +
Tooltip
+ + + + + + + - - - } - /> -
- - - - - -
- - - - -
- - - -
- - -
- - - -
- - {t("Ver más")} - - - {t("Alternativo")} - -
- - - -
- - - - - - - - - -
- - - -
- - - - - - -
- - - - - -
- setText(event.target.value)} - /> -
- - - -
- - -
- - - -
- -
- - - -
- setSearch(event.target.value)} - onClear={() => setSearch("")} - /> -
- - - -
- -
- - - -
- - {t("Acepto")} - - - {t("Deshabilitado")} - -
- - - -
- setRadio("a")} - > - {t("Opción A")} - - setRadio("b")} - > - {t("Opción B")} - -
- - - -
- - - -
- - - -
- - {locale === "en" ? "John Doe" : "Juan Pérez"} - - {t("Aplicar sugerencia")} -
- - - -
- - - -
- - - -
-
- - - - - -
- - - - -
- - - -
- - - {}} - /> -
- - - -
- - - - -
- - - - - -
- - - - -
- - - -
- -
- + Lanzar toast + + +
+ +
+
- -
- - +
+ + Card +

+ Contenedor con borde y sombra. +

+ + + + + + + + + Confirmar + + ¿Querés continuar? + + - - -
Tooltip
- - - - -
- - - -
- - - - -
- - - - - - - - -
- {t("Contenido contextual del popover.")} -
- - - - - - - {t("Abrir tutorial")} - - } - /> - - - - - - - - - -
- - {t("Card estándar")} -

- {t("Contenedor con borde y padding.")} -

- - - {t("Card interactiva")} -

- {t("Acepta atributos HTML públicos.")} -

- -
- - - -
- } - title={t("Resumen de documentos")} - description={t("Resumen automático de documentos")} - interactive - /> - } - title={t("Próximamente")} - description={t("Herramienta todavía no disponible")} - disabled - /> -
- - - -
- } - title={t( - "Seleccioná o arrastrá el archivo para\ntranscribir", - )} - description={t("Formatos válidos: .mp3, .wav, .m4a")} - /> - } - title={t("Soltá el archivo para cargarlo")} - description={t( - "El estado dragging puede controlarse externamente", - )} - dragging - /> - } - title={t("Carga no disponible")} - description={t("La superficie también contempla disabled")} - disabled - /> -
- - - -
- -
- - - - - -
- - - - -
- - - -
- - - -
- - - -
-
- } - title="demanda-con-un-nombre-largo.docx" - description={t("11 pág. · 21,5 MB")} - trailingAction={} - /> -
-
- - - - } - trailingAction={} - /> -
-
- - - -
- - - - - -
- - - -
- - } - title="documento-para-procesar.docx" - description={t("11 pág. · 21,5 MB")} - trailingAction={} - /> -
- - - - - -
- - - - - {t("Modo edición")} -
- } - /> - - - - -
- {t("Finalizar")}} - /> -
- - - -
- -
- - - -
- {(["sm", "md", "lg"] as const).map((size) => ( -
- size="{size}" - -
- ))} -
- - - -
-
- -
-
- -
-
- - - - - -
- {t("1. Selección de archivo")} - - {t("Revisá y validá la información extraída del documento")} - -
- - - -
- - } - title={t("1. Selección de archivo")} - leading={ - - } - footer={ - } - actions={} - /> - } - > - } - title={t( - "Seleccioná o arrastrá el documento para anonimizar", - )} - description={t("Formatos válidos: .docx, .pdf")} - /> - -
- - - - - -
- -
- - - + + + + + + + + + + + +
Contenido del popover
+ + + + + +
+
+ + + +
+
+ +
+
+ + +
+ + +
+ +
+
); } export const Showcase: Story = { - render: () => , -}; - -export const ShowcaseEn: Story = { - name: "Showcase (EN)", - render: () => , + render: () => , }; From fb285793bc1f6289d40c37f5ca4a158453b7d351 Mon Sep 17 00:00:00 2001 From: jansaldo Date: Thu, 23 Jul 2026 21:17:35 -0300 Subject: [PATCH 53/83] fix(rich-text-editor): real Figma icons, revert button order, move toolbar above title (right-aligned, no border) --- .../rich-text-editor/RichTextEditor.test.tsx | 17 +++- .../rich-text-editor/RichTextEditor.tsx | 92 ++++++++++--------- 2 files changed, 62 insertions(+), 47 deletions(-) diff --git a/src/components/rich-text-editor/RichTextEditor.test.tsx b/src/components/rich-text-editor/RichTextEditor.test.tsx index 48c6def..acea89b 100644 --- a/src/components/rich-text-editor/RichTextEditor.test.tsx +++ b/src/components/rich-text-editor/RichTextEditor.test.tsx @@ -148,27 +148,38 @@ describe("RichTextEditor — toolbar", () => { expect(screen.getByRole("button", { name: /copiar/i })).toBeInTheDocument(); }); - it("renders formatting buttons in Figma order (Underline, Italic, Bold, Highlight) with a divider before Copy", () => { + it("renders formatting buttons in Bold/Italic/Underline/Highlight order, with a divider before Copy, right-aligned above the title", () => { render( , ); const buttons = screen.getAllByRole("button", { name: /subrayado|cursiva|negrita|resaltar|copiar/i, }); expect(buttons.map((b) => b.getAttribute("aria-label"))).toEqual([ - "Subrayado", - "Cursiva", "Negrita", + "Cursiva", + "Subrayado", "Resaltar", "Copiar", ]); expect( screen.getByTestId("rich-text-editor-toolbar-divider"), ).toBeInTheDocument(); + + const panel = screen.getByTestId("rich-text-editor-panel"); + const toolbar = screen.getByTestId("rich-text-editor-toolbar"); + const titleRow = screen + .getByText("Resumen") + .closest('[data-testid="rich-text-editor-title-row"]')!; + const allChildren = Array.from(panel.querySelectorAll("[data-testid]")); + const toolbarIndex = allChildren.indexOf(toolbar); + const titleIndex = allChildren.indexOf(titleRow as Element); + expect(toolbarIndex).toBeLessThan(titleIndex); }); it("reconciles typed text back into the model on input", () => { diff --git a/src/components/rich-text-editor/RichTextEditor.tsx b/src/components/rich-text-editor/RichTextEditor.tsx index ca81fb3..8df21e0 100644 --- a/src/components/rich-text-editor/RichTextEditor.tsx +++ b/src/components/rich-text-editor/RichTextEditor.tsx @@ -1,8 +1,8 @@ import { Copy as CopyIcon, - HighlighterCircle, + Highlighter, PencilSimpleLine, - TextBolderIcon as TextBolder, + TextB, TextItalic, TextUnderline, } from "@phosphor-icons/react"; @@ -98,7 +98,7 @@ const card = css({ }, }); -const toolbar = css({ borderBottom: "primary", pb: "3" }); +const toolbar = css({ justifyContent: "flex-end", pb: "3" }); const divider = css({ w: "[1px]", @@ -468,54 +468,25 @@ export function RichTextEditor({ return (
- {title !== undefined && ( -
- {editingTitle ? ( - setDraftTitle(e.target.value)} - onBlur={commitTitle} - onKeyDown={(e) => { - if (e.key === "Enter") commitTitle(); - }} - // biome-ignore lint/a11y/noAutofocus: replaces an inline click-to-edit label, not a dialog - autoFocus - /> - ) : ( - {title} - )} - {!readOnly && !editingTitle && ( - - )} -
- )} - {/* Copy stays available in both modes — the readOnly export preview (Finalización) treats copy-to-clipboard as a core action. The formatting controls below are editing affordances and stay hidden when readOnly. */} - + {!readOnly && ( <> @@ -543,7 +514,7 @@ export function RichTextEditor({ aria-label="Resaltar" onMouseDown={(e) => e.preventDefault()} > - + @@ -581,6 +552,39 @@ export function RichTextEditor({ + {title !== undefined && ( +
+ {editingTitle ? ( + setDraftTitle(e.target.value)} + onBlur={commitTitle} + onKeyDown={(e) => { + if (e.key === "Enter") commitTitle(); + }} + // biome-ignore lint/a11y/noAutofocus: replaces an inline click-to-edit label, not a dialog + autoFocus + /> + ) : ( + {title} + )} + {!readOnly && !editingTitle && ( + + )} +
+ )} + setBodyEpoch((epoch) => epoch + 1)} From 7ed6366fa28ef96e41a1dfe0823aac14c615a1c5 Mon Sep 17 00:00:00 2001 From: jansaldo Date: Thu, 23 Jul 2026 21:28:05 -0300 Subject: [PATCH 54/83] feat(rich-text-editor): show highlight swatch border only on the active color --- .../rich-text-editor/RichTextEditor.test.tsx | 67 +++++++++++++++++++ .../rich-text-editor/RichTextEditor.tsx | 29 ++++++-- src/utils/rich-text/model.test.ts | 37 ++++++++++ src/utils/rich-text/model.ts | 31 +++++++++ 4 files changed, 159 insertions(+), 5 deletions(-) diff --git a/src/components/rich-text-editor/RichTextEditor.test.tsx b/src/components/rich-text-editor/RichTextEditor.test.tsx index acea89b..b9ba33d 100644 --- a/src/components/rich-text-editor/RichTextEditor.test.tsx +++ b/src/components/rich-text-editor/RichTextEditor.test.tsx @@ -276,6 +276,73 @@ describe("RichTextEditor — highlight + copy", () => { expect(writeText).toHaveBeenCalledWith("hola mundo"); }); + it("shows a border only on the swatch matching the current selection's highlight, and none by default", () => { + const onChange = vi.fn(); + const highlightDoc: RichTextDocument = { + paragraphs: [ + { + id: "p1", + runs: [ + { + text: "hola", + marks: [{ type: "highlight", color: "category.blue" }], + }, + ], + }, + ], + }; + render(); + + const paragraphEl = screen.getByText("hola").closest("p")!; + const range = document.createRange(); + range.selectNodeContents(paragraphEl); + window.getSelection()?.removeAllRanges(); + window.getSelection()?.addRange(range); + fireEvent.select(paragraphEl); + + fireEvent.click(screen.getByRole("button", { name: /resaltar/i })); + const blueSwatch = screen.getByRole("button", { name: /^azul$/i }); + const greenSwatch = screen.getByRole("button", { name: /^verde$/i }); + + // jsdom's computed-style engine can't resolve a `border` shorthand whose + // value is a CSS custom property (our design tokens compile to + // `border: var(--aym-borders-primary-alt)`), so `toHaveStyle` always + // reports "none" here regardless of which class is applied — a jsdom/ + // cssstyle limitation, not a real bug. Asserting on the generated + // utility class name is the reliable way to check which swatch got the + // active border class within this test environment. + expect(blueSwatch.className).toMatch(/(?:^|\s)aym-bd_primary-alt(?:\s|$)/); + expect(greenSwatch.className).not.toMatch( + /(?:^|\s)aym-bd_primary-alt(?:\s|$)/, + ); + }); + + it("clicking the already-active swatch again removes the highlight and its border", () => { + const onChange = vi.fn(); + const plainDoc: RichTextDocument = { + paragraphs: [{ id: "p1", runs: [{ text: "hola", marks: [] }] }], + }; + render(); + + const paragraphEl = screen.getByText("hola").closest("p")!; + const range = document.createRange(); + range.selectNodeContents(paragraphEl); + window.getSelection()?.removeAllRanges(); + window.getSelection()?.addRange(range); + fireEvent.select(paragraphEl); + + fireEvent.click(screen.getByRole("button", { name: /resaltar/i })); + const blueSwatch = screen.getByRole("button", { name: /^azul$/i }); + + fireEvent.click(blueSwatch); + expect(blueSwatch.className).toMatch(/(?:^|\s)aym-bd_primary-alt(?:\s|$)/); + + fireEvent.click(blueSwatch); + expect(blueSwatch.className).not.toMatch( + /(?:^|\s)aym-bd_primary-alt(?:\s|$)/, + ); + }); + it("copies to the clipboard in readOnly mode", () => { const writeText = vi.fn().mockResolvedValue(undefined); Object.assign(navigator, { clipboard: { writeText } }); diff --git a/src/components/rich-text-editor/RichTextEditor.tsx b/src/components/rich-text-editor/RichTextEditor.tsx index 8df21e0..34ad650 100644 --- a/src/components/rich-text-editor/RichTextEditor.tsx +++ b/src/components/rich-text-editor/RichTextEditor.tsx @@ -21,6 +21,7 @@ import { css, cx } from "@/styled/css"; import { HStack, Stack } from "@/styled/jsx"; import { createParagraph, + getActiveHighlightColor, mergeAdjacentRuns, paragraphPlainText, serializeToPlainText, @@ -159,13 +160,13 @@ function elementOf(node: Node | null): Element | null { return node instanceof Element ? node : node.parentElement; } -const swatch = (color: string) => +const swatch = (color: string, active: boolean) => css({ w: "6", h: "6", rounded: "full", bg: color as never, - border: "primary", + border: active ? "primary-alt" : "none", cursor: "pointer", }); @@ -294,6 +295,9 @@ export function RichTextEditor({ const [bodyEpoch, setBodyEpoch] = useState(0); const bodyRef = useRef(null); const activeSelectionRef = useRef(null); + const [activeHighlightColor, setActiveHighlightColor] = useState< + string | null + >(null); const commitTitle = () => { setEditingTitle(false); @@ -330,7 +334,14 @@ export function RichTextEditor({ : (startParagraphEl.textContent?.length ?? start); activeSelectionRef.current = { paragraphId, start, end: clampedEnd }; - }, []); + + const paragraph = findParagraph(doc, paragraphId); + setActiveHighlightColor( + paragraph + ? (getActiveHighlightColor(paragraph, start, clampedEnd) ?? null) + : null, + ); + }, [doc]); // Selection tracking is wired via native listeners rather than React's // `onSelect` prop: React only synthesizes `onSelect` from a fixed list of @@ -524,9 +535,17 @@ export function RichTextEditor({ key={color} type="button" aria-label={HIGHLIGHT_COLOR_LABELS[color] ?? color} - className={swatch(color)} + className={swatch( + color, + color === activeHighlightColor, + )} onMouseDown={(e) => e.preventDefault()} - onClick={() => applyMark({ type: "highlight", color })} + onClick={() => { + applyMark({ type: "highlight", color }); + setActiveHighlightColor((prev) => + prev === color ? null : color, + ); + }} /> ))}
diff --git a/src/utils/rich-text/model.test.ts b/src/utils/rich-text/model.test.ts index e8b7764..ca169c4 100644 --- a/src/utils/rich-text/model.test.ts +++ b/src/utils/rich-text/model.test.ts @@ -3,6 +3,7 @@ import { createParagraph, documentFromMarkdown, documentFromPlainText, + getActiveHighlightColor, mergeAdjacentRuns, paragraphPlainText, sameMark, @@ -255,3 +256,39 @@ describe("documentFromMarkdown", () => { ]); }); }); + +describe("getActiveHighlightColor", () => { + it("returns the color when the whole range has a uniform highlight", () => { + const p: RichTextParagraph = { + id: "p1", + runs: [ + { + text: "hello", + marks: [{ type: "highlight", color: "category.blue" }], + }, + ], + }; + expect(getActiveHighlightColor(p, 0, 5)).toBe("category.blue"); + }); + + it("returns undefined when the range has no highlight", () => { + const p = createParagraph("p1", "hello"); + expect(getActiveHighlightColor(p, 0, 5)).toBeUndefined(); + }); + + it("returns undefined when the range spans mixed highlight colors", () => { + const p: RichTextParagraph = { + id: "p1", + runs: [ + { text: "he", marks: [{ type: "highlight", color: "category.blue" }] }, + { text: "llo", marks: [{ type: "highlight", color: "category.red" }] }, + ], + }; + expect(getActiveHighlightColor(p, 0, 5)).toBeUndefined(); + }); + + it("returns undefined for a collapsed (zero-length) range", () => { + const p = createParagraph("p1", "hello"); + expect(getActiveHighlightColor(p, 2, 2)).toBeUndefined(); + }); +}); diff --git a/src/utils/rich-text/model.ts b/src/utils/rich-text/model.ts index 65c128c..4b449eb 100644 --- a/src/utils/rich-text/model.ts +++ b/src/utils/rich-text/model.ts @@ -234,6 +234,37 @@ export function toggleMark( return { ...paragraph, runs: mergeAdjacentRuns(nextRuns) }; } +export function getActiveHighlightColor( + paragraph: RichTextParagraph, + startOffset: number, + endOffset: number, +): string | undefined { + if (startOffset === endOffset) return undefined; + const from = Math.min(startOffset, endOffset); + const to = Math.max(startOffset, endOffset); + const splitRuns = splitRunsAtOffsets(paragraph.runs, [from, to]); + + let pos = 0; + const runsInRange = splitRuns.filter((run) => { + const runStart = pos; + pos += run.text.length; + return runStart >= from && pos <= to && pos > runStart; + }); + + if (runsInRange.length === 0) return undefined; + + const firstColor = runsInRange[0].marks.find( + (m) => m.type === "highlight", + )?.color; + if (!firstColor) return undefined; + + const allSameColor = runsInRange.every((run) => + run.marks.some((m) => m.type === "highlight" && m.color === firstColor), + ); + + return allSameColor ? firstColor : undefined; +} + export type { MarkType } from "./types"; // Re-export types for convenience export type { RichTextDocument, RichTextParagraph, TextMark, TextRun }; From 59e3d63fa003e55b8f6f3a6471193022aa10c0a6 Mon Sep 17 00:00:00 2001 From: jansaldo Date: Thu, 23 Jul 2026 21:42:11 -0300 Subject: [PATCH 55/83] fix(rich-text-editor): restore caret position after Enter split and Backspace merge --- .../rich-text-editor/RichTextEditor.test.tsx | 56 +++++++++++++++++++ .../rich-text-editor/RichTextEditor.tsx | 37 +++++++++++- src/utils/rich-text/selection.test.ts | 46 ++++++++++++++- src/utils/rich-text/selection.ts | 35 ++++++++++++ 4 files changed, 170 insertions(+), 4 deletions(-) diff --git a/src/components/rich-text-editor/RichTextEditor.test.tsx b/src/components/rich-text-editor/RichTextEditor.test.tsx index b9ba33d..dc68396 100644 --- a/src/components/rich-text-editor/RichTextEditor.test.tsx +++ b/src/components/rich-text-editor/RichTextEditor.test.tsx @@ -456,6 +456,62 @@ describe("RichTextEditor — structural editing", () => { ]); }); + it("restores the caret to the start of the new paragraph after pressing Enter", () => { + const onChange = vi.fn(); + const singleRunDoc: RichTextDocument = { + paragraphs: [{ id: "p1", runs: [{ text: "hello world", marks: [] }] }], + }; + const { rerender, container } = render( + , + ); + + const paragraphEl = screen.getByText("hello world").closest("p")!; + placeCaret(paragraphEl, 5); + + fireEvent.keyDown(paragraphEl, { key: "Enter" }); + + const nextDoc = onChange.mock.calls[0][0] as RichTextDocument; + rerender(); + + const selection = window.getSelection(); + expect(selection?.rangeCount).toBeGreaterThan(0); + const caretRange = selection!.getRangeAt(0); + const paragraphEls = container.querySelectorAll("p"); + expect(paragraphEls).toHaveLength(2); + const secondParagraphEl = paragraphEls[1]; + expect(secondParagraphEl.contains(caretRange.startContainer)).toBe(true); + expect(caretRange.startOffset).toBe(0); + }); + + it("restores the caret to the merge point after Backspace merges two paragraphs", () => { + const onChange = vi.fn(); + const twoParaDoc: RichTextDocument = { + paragraphs: [ + { id: "p1", runs: [{ text: "hello", marks: [] }] }, + { id: "p2", runs: [{ text: "world", marks: [] }] }, + ], + }; + const { rerender } = render( + , + ); + + const secondParagraphEl = screen.getByText("world").closest("p")!; + placeCaret(secondParagraphEl, 0); + + fireEvent.keyDown(secondParagraphEl, { key: "Backspace" }); + + const nextDoc = onChange.mock.calls[0][0] as RichTextDocument; + rerender(); + + const selection = window.getSelection(); + const caretRange = selection!.getRangeAt(0); + const mergedParagraphEl = screen + .getByText("helloworld", { exact: false }) + .closest("p")!; + expect(mergedParagraphEl.contains(caretRange.startContainer)).toBe(true); + expect(caretRange.startOffset).toBe(5); // end of the original "hello" + }); + it("does not merge on Backspace at the start of the first paragraph", () => { const onChange = vi.fn(); const twoParaDoc: RichTextDocument = { diff --git a/src/components/rich-text-editor/RichTextEditor.tsx b/src/components/rich-text-editor/RichTextEditor.tsx index 34ad650..ca1e1eb 100644 --- a/src/components/rich-text-editor/RichTextEditor.tsx +++ b/src/components/rich-text-editor/RichTextEditor.tsx @@ -12,6 +12,7 @@ import { type ReactNode, useCallback, useEffect, + useLayoutEffect, useRef, useState, } from "react"; @@ -29,7 +30,7 @@ import { toggleMark, } from "@/utils/rich-text/model"; import { reconcileParagraphText } from "@/utils/rich-text/reconcile"; -import { getRangeOffsets } from "@/utils/rich-text/selection"; +import { getRangeOffsets, setCaretOffset } from "@/utils/rich-text/selection"; import type { RichTextDocument, RichTextParagraph, @@ -295,6 +296,10 @@ export function RichTextEditor({ const [bodyEpoch, setBodyEpoch] = useState(0); const bodyRef = useRef(null); const activeSelectionRef = useRef(null); + const pendingCaretRef = useRef<{ + paragraphId: string; + offset: number; + } | null>(null); const [activeHighlightColor, setActiveHighlightColor] = useState< string | null >(null); @@ -370,6 +375,26 @@ export function RichTextEditor({ }; }, [readOnly, captureSelection]); + // After a structural edit (Enter split, Backspace merge) swaps the + // paragraph subtree for a new one, the browser's own caret tracking is + // lost — the old Range's anchor/focus nodes no longer exist. Once the DOM + // has been updated to reflect the new `doc`, explicitly restore the caret + // to wherever handleKeyDown recorded as the expected landing spot. + // biome-ignore lint/correctness/useExhaustiveDependencies: doc isn't read in the body, but re-running after each doc update is the signal the DOM has repainted + useLayoutEffect(() => { + const pending = pendingCaretRef.current; + const root = bodyRef.current; + if (!pending || !root) return; + const paragraphEl = root.querySelector( + `[data-paragraph-id="${pending.paragraphId}"]`, + ); + if (paragraphEl instanceof HTMLElement) { + root.focus(); + setCaretOffset(paragraphEl, pending.offset); + } + pendingCaretRef.current = null; + }, [doc]); + const applyMark = (mark: TextMark) => { const selection = activeSelectionRef.current; if (!selection) return; @@ -413,8 +438,9 @@ export function RichTextEditor({ // Structural edits contentEditable can't express through plain-text // reconciliation: Enter splits a paragraph, Backspace-at-start merges into - // the previous one. Caret restoration after these edits is a known - // limitation (out of scope) — only the document model is kept correct here. + // the previous one. Each branch records where the caret should land after + // the resulting re-render in `pendingCaretRef`, which the `useLayoutEffect` + // above applies once the new `doc` has been painted. const handleKeyDown = (event: React.KeyboardEvent) => { if (readOnly) return; @@ -453,6 +479,7 @@ export function RichTextEditor({ }; const nextParagraphs = [...doc.paragraphs]; nextParagraphs.splice(index, 1, first, second); + pendingCaretRef.current = { paragraphId: second.id, offset: 0 }; onChange?.({ paragraphs: nextParagraphs }); return; } @@ -472,6 +499,10 @@ export function RichTextEditor({ }; const nextParagraphs = [...doc.paragraphs]; nextParagraphs.splice(index - 1, 2, merged); + pendingCaretRef.current = { + paragraphId: prev.id, + offset: paragraphPlainText(prev).length, + }; onChange?.({ paragraphs: nextParagraphs }); } }; diff --git a/src/utils/rich-text/selection.test.ts b/src/utils/rich-text/selection.test.ts index ee88bc5..8d1ede8 100644 --- a/src/utils/rich-text/selection.test.ts +++ b/src/utils/rich-text/selection.test.ts @@ -1,6 +1,6 @@ // src/utils/rich-text/selection.test.ts import { describe, expect, it } from "vitest"; -import { getRangeOffsets } from "./selection"; +import { getRangeOffsets, setCaretOffset } from "./selection"; function makeParagraph(html: string): HTMLElement { const el = document.createElement("p"); @@ -36,3 +36,47 @@ describe("getRangeOffsets", () => { expect(getRangeOffsets(el, range)).toEqual({ start: 3, end: 9 }); }); }); + +describe("setCaretOffset", () => { + it("places a collapsed caret at the given offset within a single text node", () => { + const el = makeParagraph("hello world"); + document.body.appendChild(el); + setCaretOffset(el, 5); + + const selection = window.getSelection(); + expect(selection?.rangeCount).toBe(1); + const range = selection!.getRangeAt(0); + expect(range.collapsed).toBe(true); + expect(range.startContainer).toBe(el.firstChild); + expect(range.startOffset).toBe(5); + }); + + it("places the caret in the correct child node when the offset spans multiple nodes", () => { + const el = makeParagraph("hello world"); + document.body.appendChild(el); + setCaretOffset(el, 7); + + const selection = window.getSelection(); + const range = selection!.getRangeAt(0); + const plainTextNode = el.childNodes[1]; // " world" + expect(range.startContainer).toBe(plainTextNode); + expect(range.startOffset).toBe(2); // "hello" (5) + 2 into " world" = offset 7 + }); + + it("does not throw for an empty element (no text nodes)", () => { + const el = document.createElement("p"); + document.body.appendChild(el); + expect(() => setCaretOffset(el, 0)).not.toThrow(); + }); + + it("clamps to the end of the last text node when the offset exceeds the content length", () => { + const el = makeParagraph("hi"); + document.body.appendChild(el); + setCaretOffset(el, 100); + + const selection = window.getSelection(); + const range = selection!.getRangeAt(0); + expect(range.startContainer).toBe(el.firstChild); + expect(range.startOffset).toBe(2); + }); +}); diff --git a/src/utils/rich-text/selection.ts b/src/utils/rich-text/selection.ts index 75caadc..0c9a5f8 100644 --- a/src/utils/rich-text/selection.ts +++ b/src/utils/rich-text/selection.ts @@ -15,3 +15,38 @@ export function getRangeOffsets( return { start, end }; } + +export function setCaretOffset(root: HTMLElement, offset: number): void { + const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT); + let remaining = offset; + let targetNode: Text | null = null; + let targetOffset = 0; + let node = walker.nextNode(); + + while (node) { + const text = node as Text; + const length = text.textContent?.length ?? 0; + if (remaining <= length) { + targetNode = text; + targetOffset = remaining; + break; + } + remaining -= length; + targetNode = text; + targetOffset = length; + node = walker.nextNode(); + } + + const selection = window.getSelection(); + if (!selection) return; + + const range = document.createRange(); + if (targetNode) { + range.setStart(targetNode, targetOffset); + } else { + range.selectNodeContents(root); + } + range.collapse(true); + selection.removeAllRanges(); + selection.addRange(range); +} From f56355d8ac17c63c87f56c2bfe22334aa601f6a7 Mon Sep 17 00:00:00 2001 From: jansaldo Date: Thu, 23 Jul 2026 21:52:33 -0300 Subject: [PATCH 56/83] feat(rich-text-editor): continue lists on Enter, live-autoformat typed bullets --- .../rich-text-editor/RichTextEditor.test.tsx | 87 ++++++++++++++++++- .../rich-text-editor/RichTextEditor.tsx | 75 +++++++++++++--- src/utils/rich-text/model.test.ts | 30 +++++++ src/utils/rich-text/model.ts | 24 +++++ 4 files changed, 204 insertions(+), 12 deletions(-) diff --git a/src/components/rich-text-editor/RichTextEditor.test.tsx b/src/components/rich-text-editor/RichTextEditor.test.tsx index dc68396..31a1fba 100644 --- a/src/components/rich-text-editor/RichTextEditor.test.tsx +++ b/src/components/rich-text-editor/RichTextEditor.test.tsx @@ -1,7 +1,7 @@ import { fireEvent, render, screen } from "@testing-library/react"; import { describe, expect, it, vi } from "vitest"; import type { RichTextDocument } from "@/utils/rich-text/types"; -import { RichTextEditor } from "./RichTextEditor"; +import { paragraphPlainText, RichTextEditor } from "./RichTextEditor"; const doc: RichTextDocument = { paragraphs: [ @@ -596,3 +596,88 @@ describe("RichTextEditor — structural editing", () => { expect(next.paragraphs[1].runs).toEqual([{ text: "mundo", marks: [] }]); }); }); + +describe("RichTextEditor — lists", () => { + it("converts a typed '- ' prefix into a bullet marker as the user types", () => { + const onChange = vi.fn(); + const doc: RichTextDocument = { + paragraphs: [{ id: "p1", runs: [{ text: "", marks: [] }] }], + }; + render(); + const paragraphEl = document.querySelector( + '[data-paragraph-id="p1"]', + ) as HTMLElement; + paragraphEl.textContent = "- hola"; + fireEvent.input(paragraphEl); + + expect(onChange).toHaveBeenCalledWith({ + paragraphs: [{ id: "p1", runs: [{ text: "• hola", marks: [] }] }], + }); + }); + + it("continues a bullet list item when pressing Enter at the end of it", () => { + const onChange = vi.fn(); + const doc: RichTextDocument = { + paragraphs: [{ id: "p1", runs: [{ text: "• Primero", marks: [] }] }], + }; + render(); + const paragraphEl = document.querySelector( + '[data-paragraph-id="p1"]', + ) as HTMLElement; + const range = document.createRange(); + range.setStart(paragraphEl.firstChild as Text, 9); + range.collapse(true); + window.getSelection()?.removeAllRanges(); + window.getSelection()?.addRange(range); + + fireEvent.keyDown(paragraphEl, { key: "Enter" }); + + const next = onChange.mock.calls[0][0] as RichTextDocument; + expect(next.paragraphs).toHaveLength(2); + expect(paragraphPlainText(next.paragraphs[0])).toBe("• Primero"); + expect(paragraphPlainText(next.paragraphs[1])).toBe("• "); + }); + + it("continues a numbered list item, incrementing the number", () => { + const onChange = vi.fn(); + const doc: RichTextDocument = { + paragraphs: [{ id: "p1", runs: [{ text: "1. Primero", marks: [] }] }], + }; + render(); + const paragraphEl = document.querySelector( + '[data-paragraph-id="p1"]', + ) as HTMLElement; + const range = document.createRange(); + range.setStart(paragraphEl.firstChild as Text, 10); + range.collapse(true); + window.getSelection()?.removeAllRanges(); + window.getSelection()?.addRange(range); + + fireEvent.keyDown(paragraphEl, { key: "Enter" }); + + const next = onChange.mock.calls[0][0] as RichTextDocument; + expect(paragraphPlainText(next.paragraphs[1])).toBe("2. "); + }); + + it("exits the list when pressing Enter on an empty bullet item", () => { + const onChange = vi.fn(); + const doc: RichTextDocument = { + paragraphs: [{ id: "p1", runs: [{ text: "• ", marks: [] }] }], + }; + render(); + const paragraphEl = document.querySelector( + '[data-paragraph-id="p1"]', + ) as HTMLElement; + const range = document.createRange(); + range.setStart(paragraphEl.firstChild as Text, 2); + range.collapse(true); + window.getSelection()?.removeAllRanges(); + window.getSelection()?.addRange(range); + + fireEvent.keyDown(paragraphEl, { key: "Enter" }); + + const next = onChange.mock.calls[0][0] as RichTextDocument; + expect(next.paragraphs).toHaveLength(1); + expect(paragraphPlainText(next.paragraphs[0])).toBe(""); + }); +}); diff --git a/src/components/rich-text-editor/RichTextEditor.tsx b/src/components/rich-text-editor/RichTextEditor.tsx index ca1e1eb..9a1e1d1 100644 --- a/src/components/rich-text-editor/RichTextEditor.tsx +++ b/src/components/rich-text-editor/RichTextEditor.tsx @@ -25,6 +25,7 @@ import { getActiveHighlightColor, mergeAdjacentRuns, paragraphPlainText, + parseListMarker, serializeToPlainText, splitRunsAtOffsets, toggleMark, @@ -281,6 +282,22 @@ class EditableRecoveryBoundary extends Component< } } +function splitParagraphRuns( + paragraph: RichTextParagraph, + offset: number, +): { before: TextRun[]; after: TextRun[] } { + const splitRuns = splitRunsAtOffsets(paragraph.runs, [offset]); + const before: TextRun[] = []; + const after: TextRun[] = []; + let pos = 0; + for (const run of splitRuns) { + if (pos < offset) before.push(run); + else after.push(run); + pos += run.text.length; + } + return { before, after }; +} + export function RichTextEditor({ document: doc, onChange, @@ -428,10 +445,15 @@ export function RichTextEditor({ return; } + const LIST_TRIGGER_RE = /^[-*] /; const nextParagraphs = doc.paragraphs.map((paragraph) => { const el = root.querySelector(`[data-paragraph-id="${paragraph.id}"]`); if (!el) return paragraph; - return reconcileParagraphText(paragraph, el.textContent ?? ""); + let text = el.textContent ?? ""; + if (LIST_TRIGGER_RE.test(text) && !text.startsWith("• ")) { + text = `• ${text.slice(2)}`; + } + return reconcileParagraphText(paragraph, text); }); onChange?.({ paragraphs: nextParagraphs }); }; @@ -460,22 +482,53 @@ export function RichTextEditor({ if (event.key === "Enter" && !event.shiftKey) { event.preventDefault(); - const splitRuns = splitRunsAtOffsets(paragraph.runs, [start]); - const beforeRuns: TextRun[] = []; - const afterRuns: TextRun[] = []; - let pos = 0; - for (const run of splitRuns) { - if (pos < start) beforeRuns.push(run); - else afterRuns.push(run); - pos += run.text.length; + const fullText = paragraphPlainText(paragraph); + const listInfo = parseListMarker(fullText); + + if (listInfo && start >= listInfo.marker.length) { + const contentAfterMarker = fullText.slice(listInfo.marker.length); + if (contentAfterMarker.trim().length === 0) { + // Empty list item — exit the list rather than continuing it. + const emptyParagraph: RichTextParagraph = { ...paragraph, runs: [] }; + const nextParagraphs = [...doc.paragraphs]; + nextParagraphs.splice(index, 1, emptyParagraph); + pendingCaretRef.current = { paragraphId: paragraph.id, offset: 0 }; + onChange?.({ paragraphs: nextParagraphs }); + return; + } + + const { before, after } = splitParagraphRuns(paragraph, start); + const nextMarker = listInfo.ordered + ? `${(listInfo.number ?? 0) + 1}${ + listInfo.marker.trimEnd().endsWith(")") ? ")" : "." + } ` + : listInfo.marker; + const first: RichTextParagraph = { + ...paragraph, + runs: mergeAdjacentRuns(before), + }; + const second: RichTextParagraph = { + id: nextParagraphId(), + runs: mergeAdjacentRuns([{ text: nextMarker, marks: [] }, ...after]), + }; + const nextParagraphs = [...doc.paragraphs]; + nextParagraphs.splice(index, 1, first, second); + pendingCaretRef.current = { + paragraphId: second.id, + offset: nextMarker.length, + }; + onChange?.({ paragraphs: nextParagraphs }); + return; } + + const { before, after } = splitParagraphRuns(paragraph, start); const first: RichTextParagraph = { ...paragraph, - runs: mergeAdjacentRuns(beforeRuns), + runs: mergeAdjacentRuns(before), }; const second: RichTextParagraph = { id: nextParagraphId(), - runs: mergeAdjacentRuns(afterRuns), + runs: mergeAdjacentRuns(after), }; const nextParagraphs = [...doc.paragraphs]; nextParagraphs.splice(index, 1, first, second); diff --git a/src/utils/rich-text/model.test.ts b/src/utils/rich-text/model.test.ts index ca169c4..33c4c2b 100644 --- a/src/utils/rich-text/model.test.ts +++ b/src/utils/rich-text/model.test.ts @@ -6,6 +6,7 @@ import { getActiveHighlightColor, mergeAdjacentRuns, paragraphPlainText, + parseListMarker, sameMark, serializeToPlainText, splitRunsAtOffsets, @@ -292,3 +293,32 @@ describe("getActiveHighlightColor", () => { expect(getActiveHighlightColor(p, 2, 2)).toBeUndefined(); }); }); + +describe("parseListMarker", () => { + it("recognizes a bullet marker", () => { + expect(parseListMarker("• Hello")).toEqual({ + marker: "• ", + ordered: false, + }); + }); + + it("recognizes a numbered marker with a period", () => { + expect(parseListMarker("2. Hello")).toEqual({ + marker: "2. ", + ordered: true, + number: 2, + }); + }); + + it("recognizes a numbered marker with a closing parenthesis", () => { + expect(parseListMarker("3) Hello")).toEqual({ + marker: "3) ", + ordered: true, + number: 3, + }); + }); + + it("returns null for plain text with no marker", () => { + expect(parseListMarker("Hello world")).toBeNull(); + }); +}); diff --git a/src/utils/rich-text/model.ts b/src/utils/rich-text/model.ts index 4b449eb..6a2a50b 100644 --- a/src/utils/rich-text/model.ts +++ b/src/utils/rich-text/model.ts @@ -265,6 +265,30 @@ export function getActiveHighlightColor( return allSameColor ? firstColor : undefined; } +export interface ListMarkerInfo { + marker: string; + ordered: boolean; + number?: number; +} + +const BULLET_MARKER = "• "; +const ORDERED_MARKER_RE = /^(\d+)([.)]) /; + +export function parseListMarker(text: string): ListMarkerInfo | null { + if (text.startsWith(BULLET_MARKER)) { + return { marker: BULLET_MARKER, ordered: false }; + } + const match = text.match(ORDERED_MARKER_RE); + if (match) { + return { + marker: `${match[1]}${match[2]} `, + ordered: true, + number: Number(match[1]), + }; + } + return null; +} + export type { MarkType } from "./types"; // Re-export types for convenience export type { RichTextDocument, RichTextParagraph, TextMark, TextRun }; From 50631cbe8751a2523e4706537bc7c5febbccb31c Mon Sep 17 00:00:00 2001 From: jansaldo Date: Thu, 23 Jul 2026 22:12:09 -0300 Subject: [PATCH 57/83] feat(rich-text-editor): add Lists story, verify polish pass visually --- .../rich-text-editor/RichTextEditor.stories.tsx | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/src/components/rich-text-editor/RichTextEditor.stories.tsx b/src/components/rich-text-editor/RichTextEditor.stories.tsx index afb6194..a693519 100644 --- a/src/components/rich-text-editor/RichTextEditor.stories.tsx +++ b/src/components/rich-text-editor/RichTextEditor.stories.tsx @@ -67,6 +67,20 @@ export const Empty: Story = { }, }; +export const Lists: Story = { + render: () => { + const [doc, setDoc] = useState({ + paragraphs: [ + { id: "p1", runs: [{ text: "• Primer punto", marks: [] }] }, + { id: "p2", runs: [{ text: "• Segundo punto", marks: [] }] }, + { id: "p3", runs: [{ text: "1. Paso uno", marks: [] }] }, + { id: "p4", runs: [{ text: "2. Paso dos", marks: [] }] }, + ], + }); + return ; + }, +}; + export const FromMarkdown: Story = { render: () => { const [doc, setDoc] = useState( From 3f3ef7c18215cc0a16e64e54d70dda86f0692f82 Mon Sep 17 00:00:00 2001 From: jansaldo Date: Thu, 23 Jul 2026 22:20:59 -0300 Subject: [PATCH 58/83] fix(rich-text-editor): render caret-hostable empty paragraphs and guard no-op highlight clicks Empty-runs paragraphs (list-exit, all-text-deleted) now render a
fallback instead of a zero-height

, so contentEditable can host a caret there and native typing lands in the right paragraph. Highlight swatch clicks with no active selection no longer flip the swatch's active-border state when applyMark is a no-op. --- .../rich-text-editor/RichTextEditor.test.tsx | 33 +++++++++++++++++++ .../rich-text-editor/RichTextEditor.tsx | 20 ++++++++--- 2 files changed, 48 insertions(+), 5 deletions(-) diff --git a/src/components/rich-text-editor/RichTextEditor.test.tsx b/src/components/rich-text-editor/RichTextEditor.test.tsx index 31a1fba..b273785 100644 --- a/src/components/rich-text-editor/RichTextEditor.test.tsx +++ b/src/components/rich-text-editor/RichTextEditor.test.tsx @@ -92,6 +92,17 @@ describe("RichTextEditor", () => { const card = screen.getByTestId("rich-text-editor-card"); expect(card.style.maxHeight).toBe("800px"); }); + + it("renders a
fallback for a paragraph with no runs, instead of an empty

", () => { + const emptyParagraphDoc: RichTextDocument = { + paragraphs: [{ id: "p1", runs: [] }], + }; + const { container } = render( + , + ); + const paragraphEl = container.querySelector('[data-paragraph-id="p1"]'); + expect(paragraphEl?.querySelector("br")).toBeTruthy(); + }); }); describe("RichTextEditor — toolbar", () => { @@ -361,6 +372,28 @@ describe("RichTextEditor — highlight + copy", () => { fireEvent.click(screen.getByRole("button", { name: /copiar/i })); expect(writeText).toHaveBeenCalledWith("solo lectura"); }); + + it("does not apply a highlight or show a swatch as active when clicked with no active selection", () => { + const onChange = vi.fn(); + render( + , + ); + + // No selection is ever made — open the popover and click a swatch cold. + fireEvent.click(screen.getByRole("button", { name: /resaltar/i })); + const blueSwatch = screen.getByRole("button", { name: /^azul$/i }); + fireEvent.click(blueSwatch); + + expect(onChange).not.toHaveBeenCalled(); + expect(blueSwatch.className).not.toMatch( + /(?:^|\s)aym-bd_primary-alt(?:\s|$)/, + ); + }); }); describe("RichTextEditor — structural editing", () => { diff --git a/src/components/rich-text-editor/RichTextEditor.tsx b/src/components/rich-text-editor/RichTextEditor.tsx index 9a1e1d1..eed5071 100644 --- a/src/components/rich-text-editor/RichTextEditor.tsx +++ b/src/components/rich-text-editor/RichTextEditor.tsx @@ -203,11 +203,20 @@ function RunView({ run }: { run: TextRun }) { function ParagraphView({ paragraph }: { paragraph: RichTextParagraph }) { return (

- {paragraph.runs.map((run, index) => ( - // Runs are recreated on every edit — index is the only stable-enough - // key available (no persistent run ids in the model). - - ))} + {paragraph.runs.length === 0 ? ( + // A paragraph with no runs (list-exit, or all text deleted) renders + // with zero children and thus zero height without this fallback — + // contentEditable can't host a caret in an empty block, which + // misroutes native typing to the previous paragraph. +
+ ) : ( + paragraph.runs.map((run, index) => ( + // Runs are recreated on every edit — index is the only + // stable-enough key available (no persistent run ids in the + // model). + + )) + )}

); } @@ -625,6 +634,7 @@ export function RichTextEditor({ )} onMouseDown={(e) => e.preventDefault()} onClick={() => { + if (!activeSelectionRef.current) return; applyMark({ type: "highlight", color }); setActiveHighlightColor((prev) => prev === color ? null : color, From 5a0452effa20a1c777cef60408d7ae6610a14b04 Mon Sep 17 00:00:00 2001 From: jansaldo Date: Fri, 24 Jul 2026 15:14:23 -0300 Subject: [PATCH 59/83] chore(storybook): sort Showcase before Components in the sidebar --- .storybook/preview.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/.storybook/preview.ts b/.storybook/preview.ts index ce70a1b..93156b1 100644 --- a/.storybook/preview.ts +++ b/.storybook/preview.ts @@ -5,6 +5,11 @@ import "./preview.css"; const preview: Preview = { parameters: { + options: { + storySort: { + order: ["Overview", ["Showcase", "Showcase (EN)"], "Components"], + }, + }, controls: { matchers: { color: /(background|color)$/i, From 2a9d9c39ad765640833a4576ba92a66aac8c75bd Mon Sep 17 00:00:00 2001 From: jansaldo Date: Fri, 24 Jul 2026 15:14:23 -0300 Subject: [PATCH 60/83] feat(showcase): add missing components to the kitchen-sink gallery Adds AppFooter, Avatar, AvatarPill, ArchiveRow, CardTool, CategoryItem, FeaturesMenu, FeaturesMenuItem, FileDropZone, Option, PageTitle, Player, RichTextEditor, SidePanel, TranscriptBlock, TutorialDialog, TutorialGrid, and WorkflowStepLayout to the showcase page. --- src/showcase/Showcase.stories.tsx | 2091 ++++++++++++++++++++++++----- 1 file changed, 1769 insertions(+), 322 deletions(-) diff --git a/src/showcase/Showcase.stories.tsx b/src/showcase/Showcase.stories.tsx index 46bf4c6..0d638a0 100644 --- a/src/showcase/Showcase.stories.tsx +++ b/src/showcase/Showcase.stories.tsx @@ -1,17 +1,38 @@ -import { ArrowsClockwise, Plus, Trash } from "@phosphor-icons/react"; +import { + ArrowLeft, + ArrowsClockwise, + Article, + Database, + Detective, + File, + FileAudio, + Gear, + Info as InfoIcon, + Play, + Plus, + Trash, +} from "@phosphor-icons/react"; import type { Meta, StoryObj } from "@storybook/react"; -import { useState } from "react"; +import { type ReactNode, useState } from "react"; import { Toaster, toast } from "react-hot-toast"; +import { css, cva } from "@/styled/css"; +import type { RichTextDocument } from "@/utils/rich-text/types"; import { + AppFooter, AppHeader, ArchiveProgress, + ArchiveRow, ArchiveTabs, ArchiveView, + Avatar, + AvatarPill, BigIconButton, Button, ButtonLink, Callout, Card, + CardTool, + CategoryItem, Checkbox, CheckCircle, Dialog, @@ -22,13 +43,21 @@ import { DialogHeader, DialogTitle, DialogTrigger, + FeaturesMenu, + FeaturesMenuItem, + FileDropZone, Logo, + Option, + PageTitle, + Player, Popover, PopoverContent, PopoverTrigger, Radio, + RichTextEditor, Search, Select, + SidePanel, Spinner, StatusBar, Stepper, @@ -43,12 +72,12 @@ import { TooltipContent, TooltipProvider, TooltipTrigger, + TranscriptBlock, + TutorialDialog, + TutorialGrid, + WorkflowStepLayout, } from "../index"; -/** - * A single "kitchen-sink" page that renders every @aymurai/ui component grouped - * by category — the gallery/overview page UI libraries ship as a showroom. - */ const meta = { title: "Overview/Showcase", parameters: { @@ -60,362 +89,1780 @@ const meta = { export default meta; type Story = StoryObj; -function Section({ +type Locale = "es" | "en"; +type DemoSpan = "small" | "compact" | "medium" | "wide" | "full"; +type DemoAlign = "start" | "center" | "stretch"; + +const page = css({ + minH: "[100vh]", + bg: "bg.primary", + color: "text.default", + fontFamily: "primary", +}); + +const pageInner = css({ + boxSizing: "border-box", + w: "full", + maxW: "[1600px]", + mx: "auto", + px: { base: "4", sm: "6", lg: "10" }, + py: { base: "6", md: "10" }, +}); + +const hero = css({ + display: "flex", + flexDir: "column", + gap: "5", + mb: { base: "10", lg: "16" }, +}); + +const heroDescription = css({ + m: "0", + maxW: "[720px]", + color: "text.lighter", + textStyle: "paragraph.sm.default", +}); + +const stickyNav = css({ + position: "sticky", + top: "0", + zIndex: "20", + display: "flex", + flexDir: { base: "column", md: "row" }, + alignItems: { base: "flex-start", md: "center" }, + gap: "3", + mx: { base: "-4", sm: "-6", lg: "-10" }, + mb: "5", + px: { base: "4", sm: "6", lg: "10" }, + py: "3", + bg: "bg.primary", + borderBottom: "primary", +}); + +const stickyBrand = css({ + display: "inline-flex", + flexShrink: "0", +}); + +const sectionNav = css({ + display: "flex", + flexWrap: "nowrap", + flex: "1 1 auto", + w: "full", + minW: "[0px]", + gap: "2", + overflowX: "auto", + overflowY: "hidden", + pb: "1", +}); + +const sectionNavLink = css({ + display: "inline-flex", + alignItems: "center", + minH: "8", + px: "3", + border: "primary", + rounded: "full", + bg: "bg.secondary", + color: "text.default", + textStyle: "label.sm.default", + textDecoration: "none", + transitionProperty: "[border-color, background-color]", + transitionDuration: "fast", + flexShrink: "0", + "&:hover": { + border: "primary-alt", + bg: "bg.primary-alternative", + }, + "&:focus-visible": { + outline: "primary-alt", + outlineWidth: "[2px]", + }, +}); + +const sectionStyle = css({ + display: "flex", + flexDir: "column", + gap: "5", + mb: { base: "10", lg: "14" }, + scrollMarginTop: { base: "[132px]", md: "[84px]" }, +}); + +const sectionHeader = css({ + display: "flex", + flexDir: "column", + gap: "1", + pb: "3", + borderBottom: "primary", +}); + +const sectionTitle = css({ + m: "0", + textStyle: "subtitle.md.strong", +}); + +const sectionDescription = css({ + m: "0", + color: "text.lighter", + textStyle: "subtitle.sm.default", +}); + +const demoGrid = css({ + display: "grid", + gridTemplateColumns: { + base: "minmax(0, 1fr)", + md: "repeat(2, minmax(0, 1fr))", + xl: "repeat(12, minmax(0, 1fr))", + }, + gap: { base: "4", md: "5" }, + alignItems: "stretch", + minW: "[0px]", +}); + +const demoCardRecipe = cva({ + base: { + display: "flex", + flexDir: "column", + gap: "4", + minW: "[0px]", + p: { base: "4", md: "5" }, + bg: "bg.secondary", + border: "primary", + rounded: "md", + overflow: "hidden", + }, + variants: { + span: { + small: { + gridColumn: { md: "span 1", xl: "span 2" }, + }, + compact: { + gridColumn: { md: "span 1", xl: "span 3" }, + }, + medium: { + gridColumn: { md: "span 1", xl: "span 4" }, + }, + wide: { + gridColumn: { md: "1 / -1", xl: "span 6" }, + }, + full: { + gridColumn: "1 / -1", + }, + }, + }, + defaultVariants: { + span: "compact", + }, +}); + +const demoCardHeader = css({ + display: "flex", + alignItems: "center", + justifyContent: "space-between", + flexWrap: "wrap", + gap: "2", + minH: "6", +}); + +const demoCardTitle = css({ + m: "0", + color: "text.lighter", + textStyle: "label.sm.default", + fontWeight: "600", +}); + +const demoContentRecipe = cva({ + base: { + display: "flex", + gap: "3", + minW: "[0px]", + maxW: "full", + }, + variants: { + align: { + start: { + alignItems: "flex-start", + justifyContent: "flex-start", + }, + center: { + alignItems: "center", + justifyContent: "center", + }, + stretch: { + alignItems: "stretch", + justifyContent: "stretch", + }, + }, + scroll: { + true: { + overflowX: "auto", + overflowY: "hidden", + pb: "2", + }, + false: { + overflow: "visible", + }, + }, + }, + defaultVariants: { + align: "start", + scroll: false, + }, +}); + +const wrap = css({ + display: "flex", + alignItems: "center", + flexWrap: "wrap", + gap: "3", + minW: "[0px]", + maxW: "full", +}); + +const archiveViewMatrix = css({ + display: "flex", + alignItems: "flex-start", + flexWrap: "wrap", + gap: "3", + minW: "[0px]", + maxW: "full", +}); + +const stack = css({ + display: "flex", + flexDir: "column", + gap: "3", + minW: "[0px]", + w: "full", +}); + +const twoColumnGrid = css({ + display: "grid", + gridTemplateColumns: { base: "1fr", lg: "repeat(2, minmax(0, 1fr))" }, + gap: "4", + w: "full", + minW: "[0px]", +}); + +const threeColumnGrid = css({ + display: "grid", + gridTemplateColumns: { + base: "1fr", + md: "repeat(2, minmax(0, 1fr))", + xl: "repeat(3, minmax(0, 1fr))", + }, + gap: "4", + w: "full", + minW: "[0px]", +}); + +const control = css({ + w: "full", + maxW: "[360px]", + minW: "[0px]", +}); + +const wideControl = css({ + w: "full", + maxW: "[520px]", + minW: "[0px]", +}); + +const fullWidth = css({ + w: "full", + minW: "[0px]", +}); + +const headerDemoWidth = css({ + w: "full", + minW: "[1200px]", +}); + +const subtleSurface = css({ + boxSizing: "border-box", + w: "full", + minW: "[0px]", + p: "4", + rounded: "sm", + bg: "bg.primary", +}); + +const builtBy = css({ + display: "flex", + flexDir: "column", + gap: "1", +}); + +const builtByLabel = css({ + color: "text.lighter", + textStyle: "label.sm.default", +}); + +const builtByName = css({ + textStyle: "subtitle.md.strong", +}); + +const transcriptDemo = css({ + w: "full", + maxW: "[875px]", +}); + +const archiveRowWidth = css({ + w: "[366px]", + maxW: "full", +}); + +const largeArchiveComposition = css({ + display: "flex", + flexDir: "column", + alignItems: "center", + gap: "6", + w: "[367px]", + flexShrink: "0", +}); + +const sidePanelMatrix = css({ + display: "flex", + alignItems: "flex-start", + gap: "4", + w: "max-content", +}); + +const sidePanelColumn = css({ + display: "flex", + flexDir: "column", + gap: "2", + flexShrink: "0", +}); + +const matrixLabel = css({ + color: "text.lighter", + textStyle: "label.sm.default", +}); + +const workflowFrame = css({ + w: "full", + minW: "[1200px]", + border: "primary", + rounded: "sm", + overflow: "hidden", +}); + +const cardCopy = css({ + m: "0", + color: "text.lighter", + textStyle: "subtitle.sm.default", +}); + +const sectionLinks = [ + ["identidad-navegacion", "Identidad y navegación"], + ["acciones", "Acciones"], + ["formularios", "Formularios y selección"], + ["clasificacion", "Identidad y clasificación"], + ["feedback", "Feedback y overlays"], + ["superficies", "Superficies y carga"], + ["archivos", "Archivos"], + ["audio-edicion", "Audio y edición"], + ["workflow", "Workflow"], + ["chrome", "Chrome"], +] as const; + +const englishCopy: Record = { + "@aymurai/ui — todos los componentes de la biblioteca de Figma, en una sola página.": + "@aymurai/ui — every component from the Figma UI Library, in one page.", + "Secciones del Showcase": "Showcase sections", + "Identidad y navegación": "Identity and navigation", + Acciones: "Actions", + "Formularios y selección": "Forms and selection", + "Identidad y clasificación": "Identity and classification", + "Feedback y overlays": "Feedback and overlays", + "Superficies y carga": "Surfaces and uploads", + Archivos: "Files", + "Audio y edición": "Audio and editing", + Workflow: "Workflow", + Chrome: "Chrome", + "Marca, navegación global y estructura compartida entre productos.": + "Brand, global navigation, and structure shared across products.", + "Botones principales, enlaces y controles icónicos.": + "Primary buttons, links, and icon controls.", + "Entradas, sugerencias y controles de selección con estado real.": + "Inputs, suggestions, and selection controls with real state.", + "Representación visual de personas, entidades y categorías.": + "Visual representation of people, entities, and categories.", + "Estados, mensajes y superficies que aparecen sobre el contenido.": + "States, messages, and surfaces displayed over content.", + "Contenedores, accesos a herramientas y selección de archivos.": + "Containers, tool entry points, and file selection.", + "Carga, progreso, selección, preview y presentación horizontal.": + "Upload, progress, selection, preview, and horizontal presentation.", + "Herramientas de búsqueda, reproducción, transcripción y edición documental.": + "Search, playback, transcription, and document editing tools.", + "Composición de workflow": "Workflow composition", + "Primitivas de página reunidas en un flujo real de selección de archivo.": + "Page primitives combined in a real file-selection workflow.", + "Representación del marco de navegador utilizado en las referencias visuales.": + "Browser chrome used in the visual references.", + "Variantes de Logo": "Logo variants", + "AppHeader · wordmark de inicio": "AppHeader · home wordmark", + "AppHeader · slots, nombre largo y stepper centrado": + "AppHeader · slots, long name, and centered stepper", + "Secondary y tertiary": "Secondary and tertiary", + "TextField · controlado": "TextField · controlled", + "TextField · typed y suggestion": "TextField · typed and suggestion", + "TextField · error": "TextField · error", + "Select · autogestionado": "Select · uncontrolled", + "Select · valor y clear": "Select · value and clear", + "Callout · estados": "Callout · states", + "Callout · compact": "Callout · compact", + "Tooltip, Spinner y Check": "Tooltip, Spinner, and Check", + "Dialog · tamaños": "Dialog · sizes", + "FileDropZone · estados": "FileDropZone · states", + "ArchiveProgress · estados vigentes": "ArchiveProgress · current states", + "ArchiveView · tipos": "ArchiveView · types", + "Preview grande + ArchiveRow": "Large preview + ArchiveRow", + "Toolbar · tres contextos": "Toolbar · three contexts", + "SidePanel · sm, md y lg": "SidePanel · sm, md, and lg", + "RichTextEditor · editable y read-only": + "RichTextEditor · editable and read-only", + "Plataforma hecha por": "Platform built by", + "Eliminar archivo": "Delete file", + Cerrar: "Close", + Confirmar: "Confirm", + "Esta demo usa la variante de tamaño “{size}” y permanece acotada al viewport.": + "This demo uses the “{size}” size variant and remains constrained to the viewport.", + "Resumen de Documento": "Document Summary", + Selección: "Selection", + Procesamiento: "Processing", + Revisión: "Review", + Finalización: "Completion", + "Ir al inicio del Showcase": "Go to the start of the Showcase", + "Set de Datos": "Datasets", + Anonimizador: "Anonymizer", + "Voz a Texto": "Speech to Text", + Configuración: "Settings", + "¿Cómo funciona?": "How does it work?", + "Paso 1": "Step 1", + "Paso 2": "Step 2", + "Paso 3": "Step 3", + "Paso 4": "Step 4", + "Seleccioná un archivo": "Select a file", + "Elegí el documento que querés procesar desde tu equipo.": + "Choose the document you want to process from your device.", + "Revisá la vista previa": "Review the preview", + "Confirmá que el contenido se haya cargado correctamente.": + "Confirm that the content loaded correctly.", + "Procesá el documento": "Process the document", + "AymurAI analiza el archivo y prepara los resultados.": + "AymurAI analyzes the file and prepares the results.", + "Descargá el resultado": "Download the result", + "Guardá el archivo final en tu equipo.": + "Save the final file to your device.", + Resumen: "Summary", + Cargar: "Upload", + Procesar: "Process", + Revisar: "Review", + Exportar: "Export", + Volver: "Back", + Continuar: "Continue", + Anonimizar: "Anonymize", + Pequeño: "Small", + Cargando: "Loading", + Deshabilitado: "Disabled", + Secundario: "Secondary", + Terciario: "Tertiary", + "Ver más": "Learn more", + Alternativo: "Alternative", + Agregar: "Add", + Actualizar: "Refresh", + Eliminar: "Delete", + Nombre: "Name", + "Escribí un nombre": "Enter a name", + Sugerencia: "Suggestion", + "Campo con error": "Field with error", + "Campo inválido": "Invalid field", + "Buscar…": "Search…", + Tipo: "Type", + "Elegí una opción": "Choose an option", + "Tipo seleccionado": "Selected type", + Acepto: "I agree", + "Opción A": "Option A", + "Opción B": "Option B", + Activado: "On", + Desactivado: "Off", + "Aplicar sugerencia": "Apply suggestion", + Personas: "People", + Fechas: "Dates", + "Categoría deshabilitada": "Disabled category", + Persona: "Person", + Expediente: "Case file", + "Persona 1": "Person 1", + Jueza: "Judge", + Fiscal: "Prosecutor", + Defensor: "Defense Attorney", + "Información para el usuario.": "Information for the user.", + "Documento anonimizado.": "Document anonymized.", + "Revisá antes de continuar.": "Review before continuing.", + "Ocurrió un error.": "An error occurred.", + "Transcribiendo audio…": "Transcribing audio…", + "Pasá el cursor": "Hover over me", + "Abrir sm": "Open sm", + "Abrir md": "Open md", + "Abrir lg": "Open lg", + "Abrir full": "Open full", + Confirmación: "Confirmation", + Formulario: "Form", + Tutorial: "Tutorial", + "Pantalla compleja": "Complex screen", + "Abrir popover": "Open popover", + "Contenido contextual del popover.": "Contextual popover content.", + "Abrir tutorial": "Open tutorial", + "¡Guardado!": "Saved!", + "Lanzar toast": "Launch toast", + "Card estándar": "Standard card", + "Contenedor con borde y padding.": "Container with border and padding.", + "Card interactiva": "Interactive card", + "Acepta atributos HTML públicos.": "Accepts public HTML attributes.", + "Resumen de documentos": "Document summaries", + "Resumen automático de documentos": "Automatic document summaries", + Próximamente: "Coming soon", + "Herramienta todavía no disponible": "Tool not available yet", + "Seleccioná o arrastrá el archivo para\ntranscribir": + "Select or drag the file here\nto transcribe", + "Formatos válidos: .mp3, .wav, .m4a": "Supported formats: .mp3, .wav, .m4a", + "Soltá el archivo para cargarlo": "Drop the file to upload it", + "El estado dragging puede controlarse externamente": + "The dragging state can be controlled externally", + "Carga no disponible": "Upload unavailable", + "La superficie también contempla disabled": + "The surface also supports a disabled state", + "Seleccionable.doc": "Selectable.doc", + "Cargando.doc": "Loading.doc", + "Correcto.doc": "Successful.doc", + "Fallido.doc": "Failed.doc", + "11 pág. · 21,5 MB": "11 pages · 21.5 MB", + Reproducir: "Play", + "Modo edición": "Edit mode", + "Editor de resumen": "Summary editor", + "Vista previa del resumen": "Summary preview", + "1. Selección de archivo": "1. File selection", + "Revisá y validá la información extraída del documento": + "Review and validate the information extracted from the document", + Extracción: "Extraction", + Validación: "Validation", + "Seleccionar archivo": "Select file", + "Seleccioná o arrastrá el documento para anonimizar": + "Select or drag the document here to anonymize it", + "Formatos válidos: .docx, .pdf": "Supported formats: .docx, .pdf", + Finalizar: "Finish", +}; + +function translate(locale: Locale, value: string) { + return locale === "en" ? (englishCopy[value] ?? value) : value; +} + +function getSelectOptions(locale: Locale) { + const t = (value: string) => translate(locale, value); + return [ + { id: "persona", text: t("Persona") }, + { id: "cuij", text: "CUIJ" }, + { id: "expediente", text: t("Expediente") }, + ]; +} + +function getPeople(locale: Locale) { + const t = (value: string) => translate(locale, value); + return [ + { initials: "AB", name: t("Persona 1"), color: "violet" as const }, + { initials: "JU", name: t("Jueza"), color: "red" as const }, + { initials: "FI", name: t("Fiscal"), color: "yellow" as const }, + { initials: "DE", name: t("Defensor"), color: "pink" as const }, + ]; +} + +function getRichTextDocument(locale: Locale): RichTextDocument { + if (locale === "en") { + return { + paragraphs: [ + { + id: "p1", + runs: [ + { + text: "This case is before Criminal, ", + marks: [], + }, + { + text: "Misdemeanor and Offences Court", + marks: [{ type: "bold" }], + }, + { text: " No. 10.", marks: [] }, + ], + }, + { + id: "p2", + runs: [ + { + text: "Urgent protection measures were ordered.", + marks: [{ type: "highlight", color: "category.yellow-light" }], + }, + ], + }, + ], + }; + } + + return { + paragraphs: [ + { + id: "p1", + runs: [ + { + text: "El presente caso tramita ante el Juzgado en lo Penal, ", + marks: [], + }, + { + text: "Contravencional y de Faltas", + marks: [{ type: "bold" }], + }, + { text: " N.º 10.", marks: [] }, + ], + }, + { + id: "p2", + runs: [ + { + text: "Se dispusieron medidas de protección urgentes.", + marks: [{ type: "highlight", color: "category.yellow-light" }], + }, + ], + }, + ], + }; +} + +function tutorialPlaceholder(label: string) { + const svg = ` + + ${label} + `; + return `data:image/svg+xml,${encodeURIComponent(svg)}`; +} + +function getTutorialSteps(locale: Locale) { + const t = (value: string) => translate(locale, value); + return [ + { + image: tutorialPlaceholder(t("Paso 1")), + imageAlt: t("Seleccioná un archivo"), + title: t("Seleccioná un archivo"), + description: t("Elegí el documento que querés procesar desde tu equipo."), + }, + { + image: tutorialPlaceholder(t("Paso 2")), + imageAlt: t("Revisá la vista previa"), + title: t("Revisá la vista previa"), + description: t( + "Confirmá que el contenido se haya cargado correctamente.", + ), + }, + { + image: tutorialPlaceholder(t("Paso 3")), + imageAlt: t("Procesá el documento"), + title: t("Procesá el documento"), + description: t("AymurAI analiza el archivo y prepara los resultados."), + }, + { + image: tutorialPlaceholder(t("Paso 4")), + imageAlt: t("Descargá el resultado"), + title: t("Descargá el resultado"), + description: t("Guardá el archivo final en tu equipo."), + }, + ]; +} + +function ShowcaseSection({ + id, title, + description, children, }: { + id: string; title: string; - children: React.ReactNode; + description: string; + children: ReactNode; }) { return ( -
-

- {title} -

-
- {children} +
+
+

{title}

+

{description}

+
{children}
); } -function Tile({ - label, +function DemoCard({ + title, + span = "compact", + align = "start", + scroll = false, children, }: { - label: string; - children: React.ReactNode; + title: string; + span?: DemoSpan; + align?: DemoAlign; + scroll?: boolean; + children: ReactNode; }) { return ( -
- - {label} - -
- {children} +
+
+

{title}

+
{children}
+
+ ); +} + +function BuiltByPlaceholder({ locale }: { locale: Locale }) { + return ( +
+ + {translate(locale, "Plataforma hecha por")} + + datagénero
); } -function ShowcasePage() { +function TrashButton({ locale }: { locale: Locale }) { + return ( + + ); +} + +function DialogSizeDemo({ + size, + trigger, + title, + locale, +}: { + size: "sm" | "md" | "lg" | "full"; + trigger: string; + title: string; + locale: Locale; +}) { + const t = (value: string) => translate(locale, value); + return ( + + + + + + + {title} + + + {t( + "Esta demo usa la variante de tamaño “{size}” y permanece acotada al viewport.", + ).replace("{size}", size)} + + + + + + + + + + + + ); +} + +function HeaderComposition({ locale }: { locale: Locale }) { + const t = (value: string) => translate(locale, value); + const tutorialSteps = getTutorialSteps(locale); + return ( + + + ( + + {defaultMark} + + ), + help: (defaultHelp) => ( + {defaultHelp} + ), + apps: (defaultApps) => ( + {defaultApps} + ), + }} + /> + + + } + label={t("Set de Datos")} + /> + } + label={t("Anonimizador")} + /> + } + label={t("Voz a Texto")} + /> + } + label={t("Configuración")} + fullWidth + /> + + + + + {t("¿Cómo funciona?")} + + + + + + + + + ); +} + +function ShowcasePage({ locale }: { locale: Locale }) { + const t = (value: string) => translate(locale, value); + const selectOptions = getSelectOptions(locale); + const people = getPeople(locale); + const tutorialSteps = getTutorialSteps(locale); + const transcriptSample = + locale === "en" + ? "We are gathered here regarding case number 78274. The prosecution is conducting the investigation in preparation for the oral and public trial." + : "Estamos aquí reunidos en relación a un caso que tiene el número 78274. La fiscalía está trabajando la investigación para preparar el juicio oral y público."; const [checked, setChecked] = useState(true); const [radio, setRadio] = useState("a"); const [text, setText] = useState(""); const [search, setSearch] = useState("ano"); - const [step] = useState(1); + const [archiveSelected, setArchiveSelected] = useState(false); + const [selectedPerson, setSelectedPerson] = useState(0); + const [timestamp, setTimestamp] = useState("01:15"); + const [richTextDocument, setRichTextDocument] = useState( + getRichTextDocument(locale), + ); + const [richTextTitle, setRichTextTitle] = useState( + locale === "en" ? "Summary 04/10/2025" : "Resumen 10/04/2025", + ); return ( -
-
- -

- @aymurai/ui — every component from the Figma UI Library, in one - page. -

-
- -
- - - - - - - - - -
- -
- - - - - - - - - - - - - Ver más - - - Alternative - - - - - - - - - - - - - - - - - - - -
- -
- -
- setText(e.target.value)} - /> -
- - -
- - -
- - -
- setSearch(e.target.value)} - /> +
+
+
+
+
- - -
- +
+ + + +
+