@lindaui/blocks 0.0.3 → 0.1.0

package/dist/document-panel.d.ts

@@ -3,6 +3,12 @@ export interface DocumentPanelProps {
     title: string;
     subtitle?: ReactNode;
     meta?: ReactNode;
+    /**
+     * `block` (default) stacks subtitle and meta on their own lines. `inline`
+     * flows them on one wrapping row (subtitle · meta) so a date sits next to the
+     * subtitle instead of forcing a new line.
+     */
+    metaPlacement?: "block" | "inline";
     statusBadge?: ReactNode;
     state: "empty" | "loading" | "ready";
     emptyContent?: ReactNode;
@@ -11,5 +17,5 @@ export interface DocumentPanelProps {
     children?: ReactNode;
     footer?: ReactNode;
 }
-export declare function DocumentPanel({ title, subtitle, meta, statusBadge, state, emptyContent, loadingLabel, notices, children, footer, }: DocumentPanelProps): import("react").JSX.Element;
+export declare function DocumentPanel({ title, subtitle, meta, metaPlacement, statusBadge, state, emptyContent, loadingLabel, notices, children, footer, }: DocumentPanelProps): import("react").JSX.Element;
 //# sourceMappingURL=document-panel.d.ts.map

package/dist/document-panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"document-panel.d.ts","sourceRoot":"","sources":["../src/document-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,KAAK,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;IACrC,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAED,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,WAAW,EACX,KAAK,EACL,YAAY,EACZ,YAA0B,EAC1B,OAAO,EACP,QAAQ,EACR,MAAM,GACP,EAAE,kBAAkB,+BAqDpB"}
+{"version":3,"file":"document-panel.d.ts","sourceRoot":"","sources":["../src/document-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IACnC,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,KAAK,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;IACrC,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAED,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,aAAuB,EACvB,WAAW,EACX,KAAK,EACL,YAAY,EACZ,YAA0B,EAC1B,OAAO,EACP,QAAQ,EACR,MAAM,GACP,EAAE,kBAAkB,+BAuEpB"}

package/dist/document-panel.js

@@ -2,7 +2,7 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { Divider } from '@lindaui/ui/divider';
 import { Skeleton } from '@lindaui/ui/skeleton';
 
-function DocumentPanel({ title, subtitle, meta, statusBadge, state, emptyContent, loadingLabel = "Cargando…", notices, children, footer }) {
+function DocumentPanel({ title, subtitle, meta, metaPlacement = "block", statusBadge, state, emptyContent, loadingLabel = "Cargando…", notices, children, footer }) {
     return /*#__PURE__*/ jsxs("div", {
         className: "flex flex-col h-full",
         children: [
@@ -16,13 +16,31 @@ function DocumentPanel({ title, subtitle, meta, statusBadge, state, emptyContent
                                 className: "truncate text-lg font-bold leading-tight tracking-tight sm:text-xl",
                                 children: title
                             }),
-                            subtitle && /*#__PURE__*/ jsx("p", {
-                                className: "mt-0.5 text-sm text-muted-foreground",
-                                children: subtitle
-                            }),
-                            meta && /*#__PURE__*/ jsx("p", {
-                                className: "mt-0.5 text-xs text-muted-foreground tabular-nums",
-                                children: meta
+                            metaPlacement === "inline" ? (subtitle || meta) && /*#__PURE__*/ jsxs("div", {
+                                className: "mt-0.5 flex flex-wrap items-center gap-x-2 text-sm text-muted-foreground",
+                                children: [
+                                    subtitle && /*#__PURE__*/ jsx("span", {
+                                        children: subtitle
+                                    }),
+                                    meta && /*#__PURE__*/ jsxs("span", {
+                                        className: "text-xs tabular-nums",
+                                        children: [
+                                            subtitle ? "· " : "",
+                                            meta
+                                        ]
+                                    })
+                                ]
+                            }) : /*#__PURE__*/ jsxs(Fragment, {
+                                children: [
+                                    subtitle && /*#__PURE__*/ jsx("p", {
+                                        className: "mt-0.5 text-sm text-muted-foreground",
+                                        children: subtitle
+                                    }),
+                                    meta && /*#__PURE__*/ jsx("p", {
+                                        className: "mt-0.5 text-xs text-muted-foreground tabular-nums",
+                                        children: meta
+                                    })
+                                ]
                             })
                         ]
                     }),

package/dist/field-array-form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"field-array-form.d.ts","sourceRoot":"","sources":["../src/field-array-form.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAOvC,MAAM,WAAW,oBAAoB;IACnC,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;CAC3C;AAED,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,CAAC,MAAM,EAAE,oBAAoB,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACjE,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC5C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC,CAAC;CAC/C;AAED,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,OAAO,EACP,aAA2B,EAC3B,SAAoB,EACpB,eAAe,EACf,YAAyB,EACzB,QAA4B,EAC5B,WAAgC,EAChC,cAAwB,EACxB,gBAA0B,EAC1B,SAAS,EACT,WAAuB,EACvB,OAAe,EACf,aAAa,GACd,EAAE,mBAAmB,+BAmHrB"}
+{"version":3,"file":"field-array-form.d.ts","sourceRoot":"","sources":["../src/field-array-form.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAOvC,MAAM,WAAW,oBAAoB;IACnC,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;CAC3C;AAED,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,CAAC,MAAM,EAAE,oBAAoB,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACjE,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC5C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC,CAAC;CAC/C;AAED,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,OAAO,EACP,aAA2B,EAC3B,SAAoB,EACpB,eAAe,EACf,YAAyB,EACzB,QAA4B,EAC5B,WAAgC,EAChC,cAAwB,EACxB,gBAA0B,EAC1B,SAAS,EACT,WAAuB,EACvB,OAAe,EACf,aAAa,GACd,EAAE,mBAAmB,+BAuHrB"}

package/dist/field-array-form.js

@@ -70,27 +70,33 @@ function FieldArrayForm({ onSubmit, options, categoryLabel = "Categoría", nameL
                                     /*#__PURE__*/ jsx(Controller, {
                                         control: control,
                                         name: `entries.${index}.key`,
-                                        render: ({ field: f })=>/*#__PURE__*/ jsx(Input, {
-                                                placeholder: keyPlaceholder,
-                                                "aria-label": `${keyPlaceholder} ${index + 1}`,
-                                                value: f.value,
-                                                onChange: f.onChange,
-                                                onBlur: f.onBlur,
-                                                name: f.name,
-                                                className: "min-w-0 w-full"
+                                        render: ({ field: f })=>/*#__PURE__*/ jsx("div", {
+                                                className: "min-w-0 w-full",
+                                                children: /*#__PURE__*/ jsx(Input, {
+                                                    placeholder: keyPlaceholder,
+                                                    "aria-label": `${keyPlaceholder} ${index + 1}`,
+                                                    value: f.value,
+                                                    onChange: f.onChange,
+                                                    onBlur: f.onBlur,
+                                                    name: f.name,
+                                                    fullWidth: true
+                                                })
                                             })
                                     }),
                                     /*#__PURE__*/ jsx(Controller, {
                                         control: control,
                                         name: `entries.${index}.value`,
-                                        render: ({ field: f })=>/*#__PURE__*/ jsx(Input, {
-                                                placeholder: valuePlaceholder,
-                                                "aria-label": `${valuePlaceholder} ${index + 1}`,
-                                                value: f.value,
-                                                onChange: f.onChange,
-                                                onBlur: f.onBlur,
-                                                name: f.name,
-                                                className: "min-w-0 w-full"
+                                        render: ({ field: f })=>/*#__PURE__*/ jsx("div", {
+                                                className: "min-w-0 w-full",
+                                                children: /*#__PURE__*/ jsx(Input, {
+                                                    placeholder: valuePlaceholder,
+                                                    "aria-label": `${valuePlaceholder} ${index + 1}`,
+                                                    value: f.value,
+                                                    onChange: f.onChange,
+                                                    onBlur: f.onBlur,
+                                                    name: f.name,
+                                                    fullWidth: true
+                                                })
                                             })
                                     }),
                                     /*#__PURE__*/ jsx(Button, {

package/dist/list-pane.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"list-pane.d.ts","sourceRoot":"","sources":["../src/list-pane.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAM9C,MAAM,WAAW,cAAc;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,aAAa;IAC5B,OAAO,CAAC,EAAE,cAAc,EAAE,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,wBAAgB,QAAQ,CAAC,EACvB,OAAO,EACP,YAAY,EACZ,cAAc,EACd,WAAgB,EAChB,cAAc,EACd,iBAA4B,EAC5B,WAAsB,EACtB,OAAe,EACf,KAAY,EACZ,OAAO,EACP,UAA8C,EAC9C,UAAyB,EACzB,OAAO,EACP,UAA6B,EAC7B,gBAAgB,EAChB,SAAS,EACT,QAAQ,GACT,EAAE,aAAa,qBAgGf"}
+{"version":3,"file":"list-pane.d.ts","sourceRoot":"","sources":["../src/list-pane.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAM9C,MAAM,WAAW,cAAc;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,aAAa;IAC5B,OAAO,CAAC,EAAE,cAAc,EAAE,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,wBAAgB,QAAQ,CAAC,EACvB,OAAO,EACP,YAAY,EACZ,cAAc,EACd,WAAgB,EAChB,cAAc,EACd,iBAA4B,EAC5B,WAAsB,EACtB,OAAe,EACf,KAAY,EACZ,OAAO,EACP,UAA8C,EAC9C,UAAyB,EACzB,OAAO,EACP,UAA6B,EAC7B,gBAAgB,EAChB,SAAS,EACT,QAAQ,GACT,EAAE,aAAa,qBA2Ff"}

package/dist/list-pane.js

@@ -1,9 +1,9 @@
 'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React from 'react';
-import { Search, AlertCircle, RotateCcw, FileText } from 'lucide-react';
+import { AlertCircle, RotateCcw, FileText } from 'lucide-react';
 import { Button } from '@lindaui/ui/button';
-import { Input } from '@lindaui/ui/input';
+import { SearchField } from '@lindaui/ui/search-field';
 import { Skeleton } from '@lindaui/ui/skeleton';
 
 function ListPane({ filters, activeFilter, onFilterChange, searchValue = "", onSearchChange, searchPlaceholder = "Buscar", searchLabel = "Buscar", loading = false, error = null, onRetry, errorTitle = "No se pudieron cargar los datos", retryLabel = "Reintentar", isEmpty, emptyTitle = "Sin resultados", emptyDescription, emptyIcon, children }) {
@@ -30,21 +30,11 @@ function ListPane({ filters, activeFilter, onFilterChange, searchValue = "", onS
                                 ]
                             }, f.key))
                     }),
-                    /*#__PURE__*/ jsxs("div", {
-                        className: "relative",
-                        children: [
-                            /*#__PURE__*/ jsx(Search, {
-                                className: "pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground z-10"
-                            }),
-                            /*#__PURE__*/ jsx(Input, {
-                                type: "search",
-                                value: searchValue,
-                                onChange: onSearchChange ?? (()=>{}),
-                                placeholder: searchPlaceholder,
-                                "aria-label": searchLabel,
-                                className: "h-9 pl-8"
-                            })
-                        ]
+                    /*#__PURE__*/ jsx(SearchField, {
+                        value: searchValue,
+                        onChange: onSearchChange ?? (()=>{}),
+                        placeholder: searchPlaceholder,
+                        "aria-label": searchLabel
                     })
                 ]
             }),

package/dist/recording-overlay.d.ts

@@ -8,6 +8,14 @@ export interface RecordingOverlayProps {
     stopLabel?: string;
     errorTitle?: string;
     backLabel?: string;
+    /**
+     * `overlay` (default) covers its container on a fixed dark surface (`viewer-*`
+     * tokens) — for use over media. `inline` drops the absolute positioning and the
+     * forced dark background, filling its container and inheriting the panel's
+     * surface; its text is token-driven so it stays legible on a light or dark
+     * panel. Content is otherwise identical.
+     */
+    variant?: "overlay" | "inline";
 }
-export declare function RecordingOverlay({ label, description, elapsed, error, onStop, onCancel, stopLabel, errorTitle, backLabel, }: RecordingOverlayProps): import("react").JSX.Element;
+export declare function RecordingOverlay({ label, description, elapsed, error, onStop, onCancel, stopLabel, errorTitle, backLabel, variant, }: RecordingOverlayProps): import("react").JSX.Element;
 //# sourceMappingURL=recording-overlay.d.ts.map

package/dist/recording-overlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"recording-overlay.d.ts","sourceRoot":"","sources":["../src/recording-overlay.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAmCD,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,WAAW,EACX,OAAO,EACP,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAqB,EACrB,UAA8C,EAC9C,SAAoB,GACrB,EAAE,qBAAqB,+BAiEvB"}
+{"version":3,"file":"recording-overlay.d.ts","sourceRoot":"","sources":["../src/recording-overlay.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;CAChC;AAsDD,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,WAAW,EACX,OAAO,EACP,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAqB,EACrB,UAA8C,EAC9C,SAAoB,EACpB,OAAmB,GACpB,EAAE,qBAAqB,+BAuEvB"}

package/dist/recording-overlay.js

@@ -2,6 +2,23 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { AlertCircle, Mic } from 'lucide-react';
 
+/** Per-variant surface/text tokens so both read on their respective background. */ function variantTokens(variant) {
+    if (variant === "inline") {
+        return {
+            root: "ti-fade flex h-full flex-col items-center justify-center gap-5 p-6 sm:gap-7",
+            text: "text-foreground",
+            muted: "text-muted-foreground",
+            // solid action button on an adaptive panel
+            solid: "bg-foreground text-background"
+        };
+    }
+    return {
+        root: "ti-fade absolute inset-0 z-[60] flex flex-col items-center justify-center gap-5 bg-viewer-bg p-8 text-viewer-foreground sm:gap-7",
+        text: "text-viewer-foreground",
+        muted: "text-viewer-foreground/70",
+        solid: "bg-white text-[oklch(0.16_0.02_240)]"
+    };
+}
 function fmtTime(sec) {
     const m = Math.floor(sec / 60);
     const s = sec % 60;
@@ -30,10 +47,11 @@ function Waveform() {
         })
     });
 }
-function RecordingOverlay({ label, description, elapsed, error, onStop, onCancel, stopLabel = "Detener", errorTitle = "No se pudo acceder al micrófono", backLabel = "Volver" }) {
+function RecordingOverlay({ label, description, elapsed, error, onStop, onCancel, stopLabel = "Detener", errorTitle = "No se pudo acceder al micrófono", backLabel = "Volver", variant = "overlay" }) {
+    const t = variantTokens(variant);
     if (error) {
         return /*#__PURE__*/ jsxs("div", {
-            className: "absolute inset-0 z-[60] flex flex-col items-center justify-center gap-5 bg-[oklch(0.16_0.02_240)] p-8 text-center",
+            className: `${t.root} text-center`,
             children: [
                 /*#__PURE__*/ jsx("div", {
                     className: "grid h-16 w-16 place-items-center rounded-full bg-destructive/15 text-destructive",
@@ -45,11 +63,11 @@ function RecordingOverlay({ label, description, elapsed, error, onStop, onCancel
                     className: "max-w-[280px]",
                     children: [
                         /*#__PURE__*/ jsx("p", {
-                            className: "text-base font-semibold text-white",
+                            className: `text-base font-semibold ${t.text}`,
                             children: errorTitle
                         }),
                         /*#__PURE__*/ jsx("p", {
-                            className: "mt-2 text-sm text-white/65",
+                            className: `mt-2 text-sm ${t.muted}`,
                             children: error
                         })
                     ]
@@ -57,14 +75,14 @@ function RecordingOverlay({ label, description, elapsed, error, onStop, onCancel
                 /*#__PURE__*/ jsx("button", {
                     type: "button",
                     onClick: onCancel,
-                    className: "h-12 rounded-2xl bg-white px-6 text-[15px] font-semibold text-[oklch(0.16_0.02_240)]",
+                    className: `h-12 rounded-2xl px-6 text-[15px] font-semibold ${t.solid}`,
                     children: backLabel
                 })
             ]
         });
     }
     return /*#__PURE__*/ jsxs("div", {
-        className: "absolute inset-0 z-[60] flex flex-col items-center justify-center gap-5 bg-[oklch(0.16_0.02_240)] text-[oklch(0.9_0.01_220)] sm:gap-7",
+        className: t.root,
         children: [
             /*#__PURE__*/ jsxs("div", {
                 className: "relative grid h-[132px] w-[132px] place-items-center sm:h-[168px] sm:w-[168px]",
@@ -96,26 +114,26 @@ function RecordingOverlay({ label, description, elapsed, error, onStop, onCancel
                                 className: "ti-rec-blink h-2.5 w-2.5 rounded-full bg-destructive"
                             }),
                             /*#__PURE__*/ jsx("span", {
-                                className: "text-sm font-semibold tracking-wide text-[oklch(0.72_0.16_18)]",
+                                className: "text-sm font-semibold tracking-wide text-destructive",
                                 children: label
                             })
                         ]
                     }),
                     /*#__PURE__*/ jsx("div", {
-                        className: "mt-2 font-mono text-4xl font-medium tabular-nums text-white sm:text-[46px]",
+                        className: `mt-2 font-mono text-4xl font-medium tabular-nums ${t.text} sm:text-[46px]`,
                         children: fmtTime(elapsed)
                     })
                 ]
             }),
             /*#__PURE__*/ jsx(Waveform, {}),
             description && /*#__PURE__*/ jsx("p", {
-                className: "max-w-[270px] text-center text-sm leading-relaxed text-white/70",
+                className: `max-w-[270px] text-center text-sm leading-relaxed ${t.muted}`,
                 children: description
             }),
             /*#__PURE__*/ jsx("button", {
                 type: "button",
                 onClick: onStop,
-                className: "mt-1.5 grid h-16 w-16 place-items-center rounded-full bg-white shadow-[0_6px_20px_-4px_rgba(0,0,0,0.5)]",
+                className: `mt-1.5 grid h-16 w-16 place-items-center rounded-full ${t.solid} shadow-[0_6px_20px_-4px_rgba(0,0,0,0.5)]`,
                 "aria-label": stopLabel,
                 children: /*#__PURE__*/ jsx("span", {
                     className: "h-6 w-6 rounded-md bg-destructive"

package/dist/split-workspace.d.ts

@@ -3,7 +3,14 @@ export interface SplitWorkspaceProps {
     media: ReactNode;
     panel: ReactNode;
     overlay?: ReactNode;
+    /**
+     * Custom back control (escape hatch). Wins over `backHref`/`backLabel`.
+     * Prefer `backHref`/`backLabel` — the default renders a legible pill over
+     * any media without the consumer having to guarantee contrast.
+     */
     back?: ReactNode;
+    backHref?: string;
+    backLabel?: ReactNode;
 }
-export declare function SplitWorkspace({ media, panel, overlay, back, }: SplitWorkspaceProps): import("react").JSX.Element;
+export declare function SplitWorkspace({ media, panel, overlay, back, backHref, backLabel, }: SplitWorkspaceProps): import("react").JSX.Element;
 //# sourceMappingURL=split-workspace.d.ts.map

package/dist/split-workspace.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"split-workspace.d.ts","sourceRoot":"","sources":["../src/split-workspace.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,KAAK,EACL,OAAO,EACP,IAAI,GACL,EAAE,mBAAmB,+BAuCrB"}
+{"version":3,"file":"split-workspace.d.ts","sourceRoot":"","sources":["../src/split-workspace.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAED,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,KAAK,EACL,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,SAAoB,GACrB,EAAE,mBAAmB,+BA8CrB"}

package/dist/split-workspace.js

@@ -1,9 +1,14 @@
 'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useIsDesktop } from '@lindaui/ui/use-media-query';
+import { WorkspaceBackButton } from './workspace-back-button.js';
 
-function SplitWorkspace({ media, panel, overlay, back }) {
+function SplitWorkspace({ media, panel, overlay, back, backHref, backLabel = "Volver" }) {
     const isDesktop = useIsDesktop();
+    const backNode = back ?? (backHref != null ? /*#__PURE__*/ jsx(WorkspaceBackButton, {
+        href: backHref,
+        label: backLabel
+    }) : null);
     return /*#__PURE__*/ jsxs("div", {
         className: "relative flex-1 min-h-0 overflow-hidden",
         children: [
@@ -35,9 +40,12 @@ function SplitWorkspace({ media, panel, overlay, back }) {
                     })
                 ]
             }),
-            back && /*#__PURE__*/ jsx("div", {
-                className: "absolute left-3.5 top-3 z-40",
-                children: back
+            backNode && /*#__PURE__*/ jsx("div", {
+                className: "pointer-events-none absolute inset-x-0 top-0 z-40 bg-linear-to-b from-black/25 to-transparent p-3 pt-[max(0.75rem,env(safe-area-inset-top))] pl-[max(0.875rem,env(safe-area-inset-left))]",
+                children: /*#__PURE__*/ jsx("div", {
+                    className: "pointer-events-auto inline-block",
+                    children: backNode
+                })
             }),
             overlay && /*#__PURE__*/ jsx("div", {
                 className: "absolute inset-0 z-[60]",

package/dist/workspace-back-button.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from "react";
+/**
+ * Legible back pill for media overlays. `SplitWorkspace` renders it by default
+ * from `backHref`/`backLabel` so a consumer never has to hand-build a readable
+ * control over dark/bright media. Token-driven surface (`bg-secondary` +
+ * `border-border`) so it reads on any background.
+ */
+export interface WorkspaceBackButtonProps {
+    href: string;
+    label: ReactNode;
+    /** Leading icon; defaults to a chevron. Rendered `aria-hidden` — the label names the link. */
+    icon?: ReactNode;
+}
+export declare function WorkspaceBackButton({ href, label, icon, }: WorkspaceBackButtonProps): import("react").JSX.Element;
+//# sourceMappingURL=workspace-back-button.d.ts.map

package/dist/workspace-back-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"workspace-back-button.d.ts","sourceRoot":"","sources":["../src/workspace-back-button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC;;;;;GAKG;AACH,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,SAAS,CAAC;IACjB,8FAA8F;IAC9F,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,wBAAgB,mBAAmB,CAAC,EAClC,IAAI,EACJ,KAAK,EACL,IAA4C,GAC7C,EAAE,wBAAwB,+BAU1B"}

package/dist/workspace-back-button.js

@@ -0,0 +1,19 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { ChevronLeft } from 'lucide-react';
+
+function WorkspaceBackButton({ href, label, icon = /*#__PURE__*/ jsx(ChevronLeft, {
+    size: 18,
+    "aria-hidden": true
+}) }) {
+    return /*#__PURE__*/ jsxs("a", {
+        href: href,
+        className: "inline-flex h-9 items-center gap-1 rounded-full border border-border bg-secondary pl-2 pr-3 text-sm font-medium text-secondary-foreground shadow-sm transition-colors hover:bg-border",
+        children: [
+            icon,
+            label
+        ]
+    });
+}
+
+export { WorkspaceBackButton };

package/llms.txt

@@ -60,7 +60,15 @@ Master-detail right side: empty state + header + meta card + CTA. Controlled.
 
 ### @lindaui/blocks/split-workspace
 Responsive split `media | panel` (controlled). Props: `media`, `panel`, `overlay?`,
-`back?`. Two-column on desktop, stacked on mobile (uses `useIsDesktop`).
+`backHref?`, `backLabel?` (default `"Volver"`), `back?`. Two-column on desktop,
+stacked on mobile (uses `useIsDesktop`). Pass `backHref`/`backLabel` to get a
+legible default back pill over any media (readability scrim + safe-area, styled
+with `WorkspaceBackButton`); `back` is an escape hatch that wins over the pair.
+
+### @lindaui/blocks/workspace-back-button
+`<WorkspaceBackButton href label icon? />` — legible back pill (`<a>`, token-driven
+`bg-secondary`/`border-border`) that reads over dark or bright media. Used by
+`split-workspace`'s default; usable standalone. `icon` defaults to a chevron.
 
 ## Dialogs & overlays
 
@@ -73,12 +81,19 @@ box; `identity` → actor chip under the description.
 Full-bleed media viewer with zoom (uses `viewer-*` tokens).
 
 ### @lindaui/blocks/recording-overlay
-Voice-recording overlay: timer / waveform / stop.
+Voice-recording UI: mic / timer / waveform / stop / cancel / error. Props include
+`variant?: "overlay" | "inline"` (default `overlay`). `overlay` covers its container
+on a fixed dark `viewer-*` surface (for use over media); `inline` drops the absolute
+positioning + forced dark bg, fills its container and inherits the panel surface with
+token-driven (legible) text. Content is identical across variants.
 
 ## Documents
 
 ### @lindaui/blocks/document-panel
-Header + per-state body + footer. Controlled.
+Header + per-state body + footer. Controlled. Props: `title`, `subtitle?`, `meta?`,
+`metaPlacement?: "block"|"inline"` (default `block`), `statusBadge?`, `state`,
+`emptyContent?`, `loadingLabel?`, `notices?`, `footer?`. `metaPlacement="inline"`
+flows subtitle + meta on one wrapping row (`subtitle · meta`) instead of stacking.
 
 ### @lindaui/blocks/document-reader
 Sectioned text reader.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lindaui/blocks",
-  "version": "0.0.3",
+  "version": "0.1.0",
   "description": "Composed UI sections (auth, lists, master-detail, charts) built on @lindaui/ui — importable npm package, not a copy-paste registry.",
   "author": "Franco Carballar <francocarballar@gmail.com>",
   "license": "MIT",
@@ -102,6 +102,10 @@
     "./stats-grid": {
       "types": "./dist/stats-grid.d.ts",
       "import": "./dist/stats-grid.js"
+    },
+    "./workspace-back-button": {
+      "types": "./dist/workspace-back-button.d.ts",
+      "import": "./dist/workspace-back-button.js"
     }
   },
   "files": [
@@ -138,8 +142,8 @@
     "zod": "^3.23.0",
     "@hookform/resolvers": "^3.9.0",
     "typescript": "^6.0.3",
-    "@lindaui/tokens": "0.0.3",
-    "@lindaui/ui": "0.0.3"
+    "@lindaui/ui": "0.1.0",
+    "@lindaui/tokens": "0.2.1"
   },
   "scripts": {
     "build": "bunchee --no-dts && tsc -p tsconfig.build.json",