arxatec-ui 0.1.68 → 0.1.72

package/README.md

@@ -87,16 +87,293 @@ Patterns follow **shadcn**-style APIs (compound components with named exports).
 
 ## Package exports
 
+Import general components, hooks, prop types and utilities with named imports
+from `arxatec-ui`. The grouped component entries are optional. The library
+preserves modules and declares side effects so compatible bundlers can discard
+unused exports in production builds.
+
 ### Components (overview)
 
 - **Forms & text:** `Button`, `Input`, `Textarea`, `Label`, `Checkbox`, `RadioGroup`, `Select`, `Slider`, `Toggle`, `InputOTP`, `FileDropZone`, `LocationInput`, `DateRangePicker`, `Calendar`, `AsyncSelect`, `DescriptionMarkdownEditor`, `RichTextEditor`, and more.
 - **Surfaces & navigation:** `Card`, `Dialog`, `Sheet`, `Drawer`, `Popover`, `Tooltip`, `DropdownMenu`, `ContextMenu`, `Tabs`, `Breadcrumb`, `Pagination`, `PaginationController`, `Sidebar`, `Command`, `Collapsible`, and more.
 - **Data & feedback:** `Table`, `Badge`, `Skeleton`, `Progress`, `StatusMessage`, `AsyncBoundary`, `AsyncCommandList`, `Chart`, `Carousel`, and more.
 - **Maps:** `MapView`, `MapPicker`.
-- **Extras:** `Toaster` (Sonner), `IconPicker`, `EmojiPicker`, brand icons, animated icons, etc.
+- **Extras:** `Toaster` (Sonner), `Logo`, `IconPicker`, `EmojiPicker`, brand icons, animated icons, etc.
+
+`Logo` accepts `variant="arxatec" | "academy" | "management"` starting with
+`0.1.71`. Omitting `variant` renders the original Arxatec logo. All three inline
+SVGs preserve their proportions and inherit their color through `currentColor`:
+
+```tsx
+import { Logo } from "arxatec-ui";
+
+<Logo className="h-8 w-auto text-foreground" />;
+<Logo variant="academy" className="h-8 w-auto text-foreground" />;
+<Logo variant="management" className="h-8 w-auto text-foreground" />;
+```
+
+`AppleIsotype` is an inline SVG with a transparent background. It inherits its
+color through `currentColor` and accepts SVG props, including `className` and
+ARIA attributes:
+
+```tsx
+import { AppleIsotype } from "arxatec-ui";
+
+<AppleIsotype className="size-4 text-foreground" aria-hidden="true" />;
+```
 
 The full list matches the `export *` entries in [`src/index.ts`](./src/index.ts).
 
+### Editable fields (0.1.72)
+
+Import property rows, inline editing, table cells, color selection and save
+feedback from `arxatec-ui`. The optional `/editable-fields` entry groups the same
+APIs. These components receive values and callbacks; the application owns
+validation, persistence and retry logic.
+
+| Component               | Source                                                                                                                                       |
+| ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
+| `PropertyRow`           | [`src/components/property_row/index.tsx`](./src/components/property_row/index.tsx)                                                           |
+| `InlineEditableText`    | [`src/components/inline_editable_text/index.tsx`](./src/components/inline_editable_text/index.tsx)                                           |
+| `InlineOptionField`     | [`src/components/inline_option_field/index.tsx`](./src/components/inline_option_field/index.tsx)                                             |
+| `InlineDateField`       | [`src/components/inline_date_field/index.tsx`](./src/components/inline_date_field/index.tsx)                                                 |
+| `InlineMarkdownField`   | [`src/components/inline_markdown_field/index.tsx`](./src/components/inline_markdown_field/index.tsx)                                         |
+| `InlineDurationField`   | [`src/components/inline_duration_field/index.tsx`](./src/components/inline_duration_field/index.tsx)                                         |
+| `TableDateField`        | [`src/components/table_date_field/index.tsx`](./src/components/table_date_field/index.tsx)                                                   |
+| `TableOptionField`      | [`src/components/table_option_field/index.tsx`](./src/components/table_option_field/index.tsx)                                               |
+| `AutosaveStatus`        | [`src/components/autosave_status/index.tsx`](./src/components/autosave_status/index.tsx)                                                     |
+| `AutosaveFieldStatus`   | [`src/components/autosave_field_status/index.tsx`](./src/components/autosave_field_status/index.tsx)                                         |
+| `SelectTableHeader`     | [`src/components/select_table_header/index.tsx`](./src/components/select_table_header/index.tsx)                                             |
+| `HexColorPickerContent` | [`src/components/hex_color_picker/hex_color_picker_content/index.tsx`](./src/components/hex_color_picker/hex_color_picker_content/index.tsx) |
+| `HexColorPickerPopover` | [`src/components/hex_color_picker/hex_color_picker_popover/index.tsx`](./src/components/hex_color_picker/hex_color_picker_popover/index.tsx) |
+
+Configure shared copy, date-fns locale, date formats and swatches with
+`EditableFieldsProvider`. A partial configuration inherits the nearest provider;
+the default copy and date locale are Spanish. Supply all shared labels when
+switching the whole interface to another language. Field-specific labels such as
+`ariaLabel`, `emptyText` and `clearLabel` remain component props.
+
+```tsx
+import { useState } from "react";
+import { enUS } from "date-fns/locale";
+import { FileText } from "lucide-react";
+import {
+  EditableFieldsProvider,
+  InlineEditableText,
+  PropertyRow,
+} from "arxatec-ui";
+
+export function DocumentName() {
+  const [name, setName] = useState("Shared document");
+  return (
+    <EditableFieldsProvider
+      locale={enUS}
+      dateFormat="MMMM d, yyyy"
+      tableDateFormat="MMM d, yyyy"
+      labels={{
+        empty: "Add…",
+        hint: "Enter to save · Esc to cancel",
+        hours: "Hours",
+        minutes: "Minutes",
+        saving: "Saving…",
+        saved: "Saved",
+        savedAgo: "Saved a moment ago",
+        offline: "Offline · changes will save when connected",
+        genericError: "Could not save. Check your connection.",
+        retry: "Retry",
+        acceptColor: "Accept",
+        clearColor: "Clear color",
+        selectColor: "Select color",
+        changeColor: "Change color",
+        currentColor: "current",
+      }}
+    >
+      <PropertyRow icon={FileText} label="Name">
+        <InlineEditableText
+          value={name}
+          onCommit={setName}
+          ariaLabel="Document name"
+        />
+      </PropertyRow>
+    </EditableFieldsProvider>
+  );
+}
+```
+
+`InlineEditableText` commits on Enter or blur, cancels with Escape and accepts a
+`validate` callback. Multiline text commits with Ctrl/⌘ + Enter.
+`InlineDurationField` receives seconds; `InlineDateField` receives `Date` values;
+`TableDateField` receives and emits ISO strings or `null`. Table fields preserve
+focus and stop click/key events inside their popovers from activating their row.
+
+`InlineFieldTrigger` supplies the shared button style for application-specific
+selectors and forwards its ref. `useEditableFields`, configuration and component
+prop types, `AutosaveFieldState`, `AutosaveStatusValue`, `normalizeHexColor`,
+`hexColorOrFallback`, `HEX_COLOR_SWATCHES` and `HEX_COLOR_PICKER_FALLBACK` are also
+exported from `arxatec-ui` and the optional `/editable-fields` entry.
+
+### Provider icons (0.1.72)
+
+Import the multicolor integration SVGs from `arxatec-ui`. The optional
+`/provider-icons` entry exposes the same components:
+
+| Component                | Source                                                                                                                                       |
+| ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------- |
+| `GoogleCalendarIsotype`  | [`src/components/icons/components/google_calendar_isotype/index.tsx`](./src/components/icons/components/google_calendar_isotype/index.tsx)   |
+| `GoogleDriveIsotype`     | [`src/components/icons/components/google_drive_isotype/index.tsx`](./src/components/icons/components/google_drive_isotype/index.tsx)         |
+| `OneDriveIsotype`        | [`src/components/icons/components/onedrive_isotype/index.tsx`](./src/components/icons/components/onedrive_isotype/index.tsx)                 |
+| `OutlookCalendarIsotype` | [`src/components/icons/components/outlook_calendar_isotype/index.tsx`](./src/components/icons/components/outlook_calendar_isotype/index.tsx) |
+
+```tsx
+import { GoogleDriveIsotype } from "arxatec-ui";
+
+<GoogleDriveIsotype className="size-5" aria-hidden="true" />;
+```
+
+The icons accept standard SVG props and namespace their internal definitions per
+instance. The existing `GoogleDriveIcon` and `OneDriveIcon` keep their outline
+appearance.
+
+### Animated text, connectivity and icon/emoji selection (0.1.72)
+
+Use named imports from `arxatec-ui` for these components. Individual entries are
+also available as optional APIs:
+
+| Optional entry                 | Components                                    | Source                                                                                     |
+| ------------------------------ | --------------------------------------------- | ------------------------------------------------------------------------------------------ |
+| `arxatec-ui/shiny-text`        | `ShinyText`                                   | [`src/components/shiny_text/index.tsx`](./src/components/shiny_text/index.tsx)             |
+| `arxatec-ui/offline-banner`    | `OfflineBanner`                               | [`src/components/offline_banner/index.tsx`](./src/components/offline_banner/index.tsx)     |
+| `arxatec-ui/icon-emoji-picker` | `IconEmoji`, `IconEmojiPicker`, `isEmojiIcon` | [`src/components/icon_emoji_picker/index.ts`](./src/components/icon_emoji_picker/index.ts) |
+
+`ShinyText` accepts children, `className` for its wrapper and `textClassName` for
+its visible text. Its animated overlay is hidden from assistive technology.
+The animation CSS is included in the existing `arxatec-ui/styles.css` import.
+
+```tsx
+import { OfflineBanner, ShinyText } from "arxatec-ui";
+
+<ShinyText>Preparing response…</ShinyText>;
+<OfflineBanner
+  isOnline={isOnline}
+  labels={{
+    offline: "You have no internet connection",
+    reconnected: "You're back online",
+    close: "Close",
+  }}
+/>;
+```
+
+`OfflineBanner` receives connectivity from the application. It renders offline
+feedback with a dismiss button, then shows a reconnect message for three seconds
+after an offline-to-online transition. `reconnectedDurationMs` adjusts that time.
+Translated copy and `className` are optional; defaults preserve the Spanish UI.
+
+`IconEmoji` renders either a Lucide name or an emoji glyph, with `folder` as the
+empty-value fallback. `IconEmojiPicker` is a controlled picker with a custom
+trigger, icon/emoji tabs, searchable icon pagination and `onValueChange`:
+
+```tsx
+import { IconEmoji, IconEmojiPicker } from "arxatec-ui";
+
+<IconEmojiPicker
+  value={icon}
+  onValueChange={setIcon}
+  locale="en"
+  labels={{
+    icons: "Icons",
+    emojis: "Emojis",
+    searchIcons: "Search an icon…",
+    searchEmojis: "Search an emoji…",
+    emptyIcons: "No icon found.",
+    emptyEmojis: "No emoji found.",
+    emojiHint: "Select an emoji…",
+  }}
+>
+  <button type="button" aria-label="Choose icon or emoji">
+    <IconEmoji value={icon} className="size-5" />
+  </button>
+</IconEmojiPicker>;
+```
+
+It also accepts `align`, `modal` and `disabled`. Copy and emoji-data locale default
+to Spanish and can be configured independently. Prop, label and locale types are
+exported with the components. The panel width follows text size to accommodate
+its twelve columns, padding, scrollbar and borders. Existing `EmojiPickerContent` and
+`EmojiPickerFooter` now accept `emptyLabel` to translate their empty state and
+selection hint while keeping their previous defaults.
+The emoji viewport's scrollbar styling is included in `arxatec-ui/styles.css`,
+alongside the animated-text and connectivity-banner styles.
+
+### Files, folders and explorer presentation (0.1.72)
+
+Import these components by name from `arxatec-ui`:
+
+```tsx
+import {
+  FileTypeIcon,
+  FolderIcon,
+  FileThumbnail,
+  ExplorerGridCard,
+} from "arxatec-ui";
+
+<FileTypeIcon
+  mimeType="application/pdf"
+  fileName="Report.pdf"
+  className="size-6"
+/>;
+<FolderIcon variant="shared" className="size-6" />;
+<FileThumbnail
+  source={thumbnailUrl}
+  isLoading={isLoading}
+  isError={isError}
+  fallback={<FileTypeIcon mimeType="application/pdf" className="size-14" />}
+/>;
+```
+
+`FileTypeIcon` is the file-shaped SVG previously named `IconType` in Lawyer
+Platform. Its color follows the MIME family; its visible label prefers the
+filename extension, then the MIME extension, then a family label such as `FILE`.
+Labels are uppercase and limited to four characters. It covers PDF, office
+documents, images, video, audio, archives, code, JSON, XML, fonts, databases,
+binary files and native Google Workspace formats. Both it and `FolderIcon`
+accept standard SVG props and are decorative by default. Pass accessible SVG
+props when using an icon without adjacent text.
+
+`FolderIcon` accepts `default`, `shared` and `drive` variants. `FOLDER_VARIANT`,
+`FolderVariant`, `getFileKindStyle`, `getFileTypeLabel`, `FILE_KIND_STYLES`,
+`FileKind` and `FileKindStyle` are exported from the main package too.
+
+| Components                                                         | Source                                                                                                                       |
+| ------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------- |
+| `FileTypeIcon`                                                     | [`src/components/file_type_icon/file_type_icon.tsx`](./src/components/file_type_icon/file_type_icon.tsx)                     |
+| `FolderIcon`                                                       | [`src/components/folder_icon/index.tsx`](./src/components/folder_icon/index.tsx)                                             |
+| `FileThumbnail`                                                    | [`src/components/file_thumbnail/index.tsx`](./src/components/file_thumbnail/index.tsx)                                       |
+| `ExplorerGridCard`, `ExplorerRow`, `ExplorerNameCell`              | [`src/components/file_explorer/index.ts`](./src/components/file_explorer/index.ts)                                           |
+| `ExplorerGrid`, `ExplorerTable`, `ExplorerPanel`                   | [`src/components/file_explorer/index.ts`](./src/components/file_explorer/index.ts)                                           |
+| `ExplorerBreadcrumb`                                               | [`src/components/file_explorer/explorer_breadcrumb/index.tsx`](./src/components/file_explorer/explorer_breadcrumb/index.tsx) |
+| `ExplorerEmptyState`, `ExplorerLoadingState`, `ExplorerErrorState` | [`src/components/file_explorer/index.ts`](./src/components/file_explorer/index.ts)                                           |
+| `ItemActionsDropdown`, `ItemActionsContextContent`                 | [`src/components/file_explorer/item_actions/index.ts`](./src/components/file_explorer/item_actions/index.ts)                 |
+
+`FileThumbnail` receives a thumbnail URL, loading/error state and a fallback. It
+forwards its container ref, displays a skeleton while loading and falls back if
+the image fails. A new source resets the image failure state. Fetching signed
+URLs, generating PDF previews, cloud permissions and object-URL cleanup belong
+to the consumer. These exports do not load PDF or office viewer engines.
+
+Explorer rows and cards receive `id`, `type` (`file` or `folder`), `selected`,
+`actions` and their content. `ExplorerAction` supplies the action key, translated
+label, icon and callback; hidden actions are omitted. Cards also receive `name`,
+`icon`, `preview`, optional path/metadata and pointer or drag handlers. Pass
+`actionsLabel` to localize the action-menu trigger. Selection, opening, moving,
+deleting and downloading are controlled by consumer callbacks.
+
+`ExplorerBreadcrumb` receives `{ id, name }` items and `onNavigate`; its buttons
+support keyboard navigation. `ExplorerTable` receives `ExplorerColumn` entries
+and accepts `flow` for content-height tables. Grid, panel and table containers
+retain selection/viewport refs, overlay and footer slots. `className` controls
+container height and spacing. All component prop types and `EXPLORER_GRID_CLASS`
+are also exported from `arxatec-ui`.
+
 ### Hooks
 
 - **`useDebounce`**
@@ -123,16 +400,82 @@ import "leaflet/dist/leaflet.css";
 
 ## Developing this repo
 
-| Command             | Description                    |
-| ------------------- | ------------------------------ |
-| `npm run dev`       | Vite playground (style guide). |
-| `npm run storybook` | Storybook on port 6006.        |
-| `npm run build:lib` | Build `dist/` for npm.         |
-| `npm run build`     | Playground production build.   |
-| `npm run lint`      | ESLint.                        |
+| Command                | Description                    |
+| ---------------------- | ------------------------------ |
+| `npm run dev`          | Vite playground (style guide). |
+| `npm run storybook`    | Storybook on port 6006.        |
+| `npm run build:lib`    | Build `dist/` for npm.         |
+| `npm run build`        | Playground production build.   |
+| `npm run lint`         | ESLint.                        |
+| `pnpm test:components` | Component unit tests.          |
+
+For local development with `arxatec-lawyer-platform`, build this library first and
+run `pnpm update arxatec-ui --ignore-scripts` in the platform. Its local migration
+uses `file:../../arxatec-ui`, so rebuilding this repository requires refreshing the
+consumer package. React, React Hook Form and Tiptap continue to resolve through
+the consumer's peer dependencies.
+
+Release status on 2026-10-12: npm reports `0.1.71`; this source prepares `0.1.72`.
+The new entries become available from npm after publication. Before shipping the
+platform, replace its local `file:` dependency with the published `0.1.72` range
+and run `pnpm update arxatec-ui`.
 
 Publishing to npm requires **2FA**; use `npm publish --otp=...` when prompted.
 
 ## License
 
 MIT. See [LICENSE](./LICENSE).
+
+## File-view engines on demand (0.1.69)
+
+Existing `arxatec-ui/file-view` exports remain compatible. Applications that need
+bounded startup downloads should use the lightweight shell and lazy engines:
+
+```tsx
+import {
+  FileViewSheet,
+  configureFileViewPdfWorker,
+} from "arxatec-ui/file-view/core";
+import { lazyFileViewer } from "arxatec-ui/file-view/lazy";
+import type { FilePdfViewerProps } from "arxatec-ui/file-view/pdf";
+
+configureFileViewPdfWorker(localHashedWorkerUrl);
+const PdfViewer = lazyFileViewer<FilePdfViewerProps>(() =>
+  import("arxatec-ui/file-view/pdf").then(({ FilePdfViewer }) => ({
+    default: FilePdfViewer,
+  })),
+);
+```
+
+Engine entries under `/file-view/` are `pdf`, `image`, `office`, `code`, `template`,
+`docx`, `xlsx`, `audio`, `video`, `summary` and `transcription`. The core does not
+import PDF or another engine. HEIC conversion loads `heic2any` only for HEIC.
+The wrapper loads without adding loading, error or retry controls. Loading
+callbacks reach the existing parent sheet; a failed load ends its pending state.
+Closing and reopening the sheet allows another load attempt.
+
+`FileViewSheet` accepts `lazyPanels?: boolean`, default `false`. Set it to `true`
+to mount only the initial panel and mount each other panel on its first visit.
+Visited panels remain mounted, preserving edits, annotations and zoom, until
+close or `fileKey` changes. `onActiveTabChange` reports the active panel. Render
+callbacks receive `isActive`; query consumers should use it to pause summary and
+transcription reads. Hidden-panel loading must not replace the active panel.
+
+Configure a local hashed PDF worker before opening PDF. Configuration itself is
+lightweight; deferred setup respects it and later configuration updates it. Match
+the worker version exactly to `pdfjs-dist` resolved by this package's `react-pdf`.
+The worker URL can use web/PWA origin or Electron `app://arxatec`. Build consumers
+with the package's worker setup marked as a side effect. PDF and image viewers
+forward `onLoadingChange` until their content is ready.
+
+Import `arxatec-ui/styles.css` once. Font faces retain ArxatecSans,
+Cormorant Garamond (300–700, normal/italic) and JetBrains Mono (100–800,
+normal/italic), with local licensed assets and `font-display: swap`. They download
+only when matching content uses them; omit fonts from PWA precache and cache
+requested faces at runtime. Consumers share `react-hook-form`, `@tiptap/core` and
+`@tiptap/react` as peers alongside React and React Query.
+
+Publication requires owner PR merge and clean-main publish. The platform applies
+a seven-day minimum release age to external dependencies and explicitly exempts
+all versions of `arxatec-ui`; validate a tarball in isolation before a registry
+consumer update.

package/dist/arxatec-ui.css

@@ -1,2 +1,2 @@
-._wrapper_yldl5_1{min-height:2.5rem;font-family:var(--font-sans);font-size:var(--font-size-sm);line-height:var(--font-line-height-sm)}._wrapper_yldl5_1 .ProseMirror{max-width:none;min-height:0;font-family:var(--font-sans);font-size:var(--font-size-sm);line-height:var(--font-line-height-sm);background:0 0;outline:none;margin:0;padding:.375rem .75rem}._wrapper_yldl5_1 .ProseMirror p,._wrapper_yldl5_1 .ProseMirror li,._wrapper_yldl5_1 .ProseMirror blockquote,._wrapper_yldl5_1 .ProseMirror strong,._wrapper_yldl5_1 .ProseMirror em,._wrapper_yldl5_1 .ProseMirror u{font-family:var(--font-sans);font-size:var(--font-size-sm);line-height:var(--font-line-height-sm);margin:.5rem 0}._wrapper_yldl5_1 .ProseMirror h1{font-family:var(--font-sans);font-size:var(--font-size-lg);font-weight:600;line-height:var(--font-line-height-lg);margin:.375rem 0 .25rem}._wrapper_yldl5_1 .ProseMirror h2{font-family:var(--font-sans);font-size:var(--font-size-base);font-weight:600;line-height:var(--font-line-height-base);margin:.375rem 0 .25rem}._wrapper_yldl5_1 .ProseMirror h3{font-family:var(--font-sans);font-size:var(--font-size-sm);font-weight:600;line-height:var(--font-line-height-sm);margin:.35rem 0 .2rem}._wrapper_yldl5_1 .ProseMirror h4{font-family:var(--font-sans);font-size:var(--font-size-xs);font-weight:600;line-height:var(--font-line-height-xs);margin:.3rem 0 .15rem}._wrapper_yldl5_1 .ProseMirror h5,._wrapper_yldl5_1 .ProseMirror h6{font-family:var(--font-sans);font-size:var(--font-size-xs);font-weight:600;line-height:var(--font-line-height-xs);margin:.25rem 0}._wrapper_yldl5_1 .ProseMirror p{margin:.125rem 0}._wrapper_yldl5_1 .ProseMirror ul,._wrapper_yldl5_1 .ProseMirror ol{margin:.25rem 0;padding-left:1.25rem}._wrapper_yldl5_1 .ProseMirror li{margin:0}._wrapper_yldl5_1 .ProseMirror blockquote{border-left-width:2px;margin:.25rem 0;padding-left:.75rem}._wrapper_yldl5_1 .ProseMirror code{font-family:var(--font-mono);font-size:var(--font-size-xs)}._wrapper_yldl5_1 .ProseMirror .is-description-editor-empty:before{content:attr(data-placeholder);float:left;pointer-events:none;height:0;color:var(--color-muted-foreground);font-family:var(--font-sans);font-size:var(--font-size-sm);line-height:var(--font-line-height-sm)}._shimmer_17ewq_1{opacity:var(--loader-shimmer-opacity,1);animation:2.4s ease-in-out infinite _loader-diagonal_17ewq_1;position:absolute;inset:0;-webkit-mask-image:linear-gradient(135deg,#0000 35%,#000 50%,#0000 65%);mask-image:linear-gradient(135deg,#0000 35%,#000 50%,#0000 65%);-webkit-mask-size:250% 250%;mask-size:250% 250%}@keyframes _loader-diagonal_17ewq_1{0%{-webkit-mask-position:100% 100%;mask-position:100% 100%}to{-webkit-mask-position:0 0;mask-position:0 0}}@media (prefers-reduced-motion:reduce){._shimmer_17ewq_1{animation:none}}
+._wrapper_yldl5_1{min-height:2.5rem;font-family:var(--font-sans);font-size:var(--font-size-sm);line-height:var(--font-line-height-sm)}._wrapper_yldl5_1 .ProseMirror{max-width:none;min-height:0;font-family:var(--font-sans);font-size:var(--font-size-sm);line-height:var(--font-line-height-sm);background:0 0;outline:none;margin:0;padding:.375rem .75rem}._wrapper_yldl5_1 .ProseMirror p,._wrapper_yldl5_1 .ProseMirror li,._wrapper_yldl5_1 .ProseMirror blockquote,._wrapper_yldl5_1 .ProseMirror strong,._wrapper_yldl5_1 .ProseMirror em,._wrapper_yldl5_1 .ProseMirror u{font-family:var(--font-sans);font-size:var(--font-size-sm);line-height:var(--font-line-height-sm);margin:.5rem 0}._wrapper_yldl5_1 .ProseMirror h1{font-family:var(--font-sans);font-size:var(--font-size-lg);font-weight:600;line-height:var(--font-line-height-lg);margin:.375rem 0 .25rem}._wrapper_yldl5_1 .ProseMirror h2{font-family:var(--font-sans);font-size:var(--font-size-base);font-weight:600;line-height:var(--font-line-height-base);margin:.375rem 0 .25rem}._wrapper_yldl5_1 .ProseMirror h3{font-family:var(--font-sans);font-size:var(--font-size-sm);font-weight:600;line-height:var(--font-line-height-sm);margin:.35rem 0 .2rem}._wrapper_yldl5_1 .ProseMirror h4{font-family:var(--font-sans);font-size:var(--font-size-xs);font-weight:600;line-height:var(--font-line-height-xs);margin:.3rem 0 .15rem}._wrapper_yldl5_1 .ProseMirror h5,._wrapper_yldl5_1 .ProseMirror h6{font-family:var(--font-sans);font-size:var(--font-size-xs);font-weight:600;line-height:var(--font-line-height-xs);margin:.25rem 0}._wrapper_yldl5_1 .ProseMirror p{margin:.125rem 0}._wrapper_yldl5_1 .ProseMirror ul,._wrapper_yldl5_1 .ProseMirror ol{margin:.25rem 0;padding-left:1.25rem}._wrapper_yldl5_1 .ProseMirror li{margin:0}._wrapper_yldl5_1 .ProseMirror blockquote{border-left-width:2px;margin:.25rem 0;padding-left:.75rem}._wrapper_yldl5_1 .ProseMirror code{font-family:var(--font-mono);font-size:var(--font-size-xs)}._wrapper_yldl5_1 .ProseMirror .is-description-editor-empty:before{content:attr(data-placeholder);float:left;pointer-events:none;height:0;color:var(--color-muted-foreground);font-family:var(--font-sans);font-size:var(--font-size-sm);line-height:var(--font-line-height-sm)}._shimmer_17ewq_1{opacity:var(--loader-shimmer-opacity,1);animation:2.4s ease-in-out infinite _loader-diagonal_17ewq_1;position:absolute;inset:0;-webkit-mask-image:linear-gradient(135deg,#0000 35%,#000 50%,#0000 65%);mask-image:linear-gradient(135deg,#0000 35%,#000 50%,#0000 65%);-webkit-mask-size:250% 250%;mask-size:250% 250%}@keyframes _loader-diagonal_17ewq_1{0%{-webkit-mask-position:100% 100%;mask-position:100% 100%}to{-webkit-mask-position:0 0;mask-position:0 0}}@media (prefers-reduced-motion:reduce){._shimmer_17ewq_1{animation:none}}.arxatec-offline-banner[data-state=open]{animation:.3s ease-out arxatec-offline-banner-enter}@keyframes arxatec-offline-banner-enter{0%{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}.shiny-text-overlay{background-size:200% 100%;background-image:linear-gradient(120deg, transparent 40%, color-mix(in oklch, var(--color-foreground) 80%, transparent) 50%, transparent 60%);-webkit-text-fill-color:transparent;color:#0000;-webkit-background-clip:text;background-clip:text;animation:3s linear infinite shiny-text-shine}@keyframes shiny-text-shine{0%{background-position:100%}to{background-position:-100%}}
 /*$vite$:1*/

package/dist/components/autosave_field_status/index.d.ts

@@ -0,0 +1,5 @@
+import { AutosaveFieldState } from '../autosave_status/types';
+export interface AutosaveFieldStatusProps {
+    state?: AutosaveFieldState;
+}
+export declare const AutosaveFieldStatus: ({ state }: AutosaveFieldStatusProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/autosave_field_status/index.js

@@ -0,0 +1,12 @@
+import { Fragment as e, jsx as t, jsxs as n } from "react/jsx-runtime";
+import { AlertCircle as r, Check as i, Loader2 as a } from "lucide-react";
+//#region src/components/autosave_field_status/index.tsx
+var o = ({ state: o }) => /* @__PURE__ */ n(e, { children: [
+	o === "saving" ? /* @__PURE__ */ t(a, { className: "size-3.5 animate-spin" }) : null,
+	o === "saved" ? /* @__PURE__ */ t(i, { className: "size-3.5" }) : null,
+	o === "error" ? /* @__PURE__ */ t(r, { className: "size-3.5 text-destructive" }) : null
+] });
+//#endregion
+export { o as AutosaveFieldStatus };
+
+//# sourceMappingURL=index.js.map

package/dist/components/autosave_field_status/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/autosave_field_status/index.tsx"],"sourcesContent":["import { AlertCircle, Check, Loader2 } from \"lucide-react\";\nimport type { AutosaveFieldState } from \"../autosave_status/types\";\n\nexport interface AutosaveFieldStatusProps {\n  state?: AutosaveFieldState;\n}\n\nexport const AutosaveFieldStatus = ({ state }: AutosaveFieldStatusProps) => (\n  <>\n    {state === \"saving\" ? <Loader2 className=\"size-3.5 animate-spin\" /> : null}\n    {state === \"saved\" ? <Check className=\"size-3.5\" /> : null}\n    {state === \"error\" ? (\n      <AlertCircle className=\"size-3.5 text-destructive\" />\n    ) : null}\n  </>\n);\n"],"mappings":";;;AAOA,IAAa,KAAuB,EAAE,eACpC,kBAAA,GAAA,EAAA,UAAA;CACG,MAAU,WAAW,kBAAC,GAAD,EAAS,WAAU,yBAA0B,CAAA,GAAG;CACrE,MAAU,UAAU,kBAAC,GAAD,EAAO,WAAU,YAAa,CAAA,GAAG;CACrD,MAAU,UACT,kBAAC,GAAD,EAAa,WAAU,6BAA8B,CAAA,GACnD;CACH,EAAA,CAAA"}

package/dist/components/autosave_status/constants/index.d.ts

@@ -0,0 +1 @@
+export declare const SAVED_LINGER_MS = 4000;

package/dist/components/autosave_status/constants/index.js

@@ -0,0 +1,6 @@
+//#region src/components/autosave_status/constants/index.ts
+var e = 4e3;
+//#endregion
+export { e as SAVED_LINGER_MS };
+
+//# sourceMappingURL=index.js.map

package/dist/components/autosave_status/constants/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/autosave_status/constants/index.ts"],"sourcesContent":["export const SAVED_LINGER_MS = 4000;\n"],"mappings":";AAAA,IAAa,IAAkB"}

package/dist/components/autosave_status/index.d.ts

@@ -0,0 +1,9 @@
+import { AutosaveStatusValue } from './types';
+export interface AutosaveStatusProps {
+    status: AutosaveStatusValue;
+    errorMessage: string | null;
+    isRetryable: boolean;
+    onRetry: () => void;
+    className?: string;
+}
+export declare const AutosaveStatus: ({ status, errorMessage, isRetryable, onRetry, className, }: AutosaveStatusProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/autosave_status/index.js

@@ -0,0 +1,46 @@
+import { cn as e } from "../../utilities/class/index.js";
+import { Button as t } from "../button/index.js";
+import { useEditableFields as n } from "../editable_fields/hooks/index.js";
+import { SAVED_LINGER_MS as r } from "./constants/index.js";
+import { useEffect as i, useState as a } from "react";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+import { AlertCircle as l, Check as u, CloudOff as d, Loader2 as f } from "lucide-react";
+//#region src/components/autosave_status/index.tsx
+var p = () => {
+	let { labels: e } = n(), [t, c] = a(!1);
+	return i(() => {
+		let e = setTimeout(() => c(!0), r);
+		return () => clearTimeout(e);
+	}, []), /* @__PURE__ */ s(o, { children: t ? e.savedAgo : e.saved });
+}, m = ({ status: r, errorMessage: i, isRetryable: a, onRetry: m, className: h }) => {
+	let { labels: g } = n();
+	return /* @__PURE__ */ c("p", {
+		role: "status",
+		"aria-live": "polite",
+		className: e("flex min-h-5 max-w-[55%] items-center gap-1.5 text-xs text-muted-foreground", r === "error" && "text-destructive", h),
+		children: [
+			r === "saving" ? /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s(f, { className: "size-3.5 shrink-0 animate-spin" }), g.saving] }) : null,
+			r === "saved" ? /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s(u, { className: "size-3.5 shrink-0" }), /* @__PURE__ */ s(p, {})] }) : null,
+			r === "offline" ? /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s(d, { className: "size-3.5 shrink-0" }), g.offline] }) : null,
+			r === "error" ? /* @__PURE__ */ c(o, { children: [
+				/* @__PURE__ */ s(l, { className: "size-3.5 shrink-0" }),
+				/* @__PURE__ */ s("span", {
+					className: "truncate",
+					children: i || g.genericError
+				}),
+				a ? /* @__PURE__ */ s(t, {
+					type: "button",
+					variant: "link",
+					size: "sm",
+					className: "h-auto p-0 text-xs text-destructive underline",
+					onClick: m,
+					children: g.retry
+				}) : null
+			] }) : null
+		]
+	});
+};
+//#endregion
+export { m as AutosaveStatus };
+
+//# sourceMappingURL=index.js.map

package/dist/components/autosave_status/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/autosave_status/index.tsx"],"sourcesContent":["import { useEditableFields } from \"@/components/editable_fields/hooks\";\nimport { Button } from \"@/components/button\";\nimport { AlertCircle, Check, CloudOff, Loader2 } from \"lucide-react\";\nimport { useEffect, useState } from \"react\";\nimport { cn } from \"@/utilities/class\";\nimport { SAVED_LINGER_MS } from \"./constants\";\nimport type { AutosaveStatusValue } from \"./types\";\n\nexport interface AutosaveStatusProps {\n  status: AutosaveStatusValue;\n  errorMessage: string | null;\n  isRetryable: boolean;\n  onRetry: () => void;\n  className?: string;\n}\n\nconst SavedStatusCopy = () => {\n  const { labels } = useEditableFields();\n  const [hasLingered, setHasLingered] = useState(false);\n  useEffect(() => {\n    const timer = setTimeout(() => setHasLingered(true), SAVED_LINGER_MS);\n    return () => clearTimeout(timer);\n  }, []);\n  return <>{hasLingered ? labels.savedAgo : labels.saved}</>;\n};\n\nexport const AutosaveStatus = ({\n  status,\n  errorMessage,\n  isRetryable,\n  onRetry,\n  className,\n}: AutosaveStatusProps) => {\n  const { labels } = useEditableFields();\n\n  return (\n    <p\n      role=\"status\"\n      aria-live=\"polite\"\n      className={cn(\n        \"flex min-h-5 max-w-[55%] items-center gap-1.5 text-xs text-muted-foreground\",\n        status === \"error\" && \"text-destructive\",\n        className,\n      )}\n    >\n      {status === \"saving\" ? (\n        <>\n          <Loader2 className=\"size-3.5 shrink-0 animate-spin\" />\n          {labels.saving}\n        </>\n      ) : null}\n\n      {status === \"saved\" ? (\n        <>\n          <Check className=\"size-3.5 shrink-0\" />\n          <SavedStatusCopy />\n        </>\n      ) : null}\n\n      {status === \"offline\" ? (\n        <>\n          <CloudOff className=\"size-3.5 shrink-0\" />\n          {labels.offline}\n        </>\n      ) : null}\n\n      {status === \"error\" ? (\n        <>\n          <AlertCircle className=\"size-3.5 shrink-0\" />\n          <span className=\"truncate\">\n            {errorMessage || labels.genericError}\n          </span>\n          {isRetryable ? (\n            <Button\n              type=\"button\"\n              variant=\"link\"\n              size=\"sm\"\n              className=\"h-auto p-0 text-xs text-destructive underline\"\n              onClick={onRetry}\n            >\n              {labels.retry}\n            </Button>\n          ) : null}\n        </>\n      ) : null}\n    </p>\n  );\n};\n"],"mappings":";;;;;;;;AAgBA,IAAM,UAAwB;CAC5B,IAAM,EAAE,cAAW,GAAmB,EAChC,CAAC,GAAa,KAAkB,EAAS,GAAM;AAKrD,QAJA,QAAgB;EACd,IAAM,IAAQ,iBAAiB,EAAe,GAAK,EAAE,EAAgB;AACrE,eAAa,aAAa,EAAM;IAC/B,EAAE,CAAC,EACC,kBAAA,GAAA,EAAA,UAAG,IAAc,EAAO,WAAW,EAAO,OAAS,CAAA;GAG/C,KAAkB,EAC7B,WACA,iBACA,gBACA,YACA,mBACyB;CACzB,IAAM,EAAE,cAAW,GAAmB;AAEtC,QACE,kBAAC,KAAD;EACE,MAAK;EACL,aAAU;EACV,WAAW,EACT,+EACA,MAAW,WAAW,oBACtB,EACD;YAPH;GASG,MAAW,WACV,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD,EAAS,WAAU,kCAAmC,CAAA,EACrD,EAAO,OACP,EAAA,CAAA,GACD;GAEH,MAAW,UACV,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD,EAAO,WAAU,qBAAsB,CAAA,EACvC,kBAAC,GAAD,EAAmB,CAAA,CAClB,EAAA,CAAA,GACD;GAEH,MAAW,YACV,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD,EAAU,WAAU,qBAAsB,CAAA,EACzC,EAAO,QACP,EAAA,CAAA,GACD;GAEH,MAAW,UACV,kBAAA,GAAA,EAAA,UAAA;IACE,kBAAC,GAAD,EAAa,WAAU,qBAAsB,CAAA;IAC7C,kBAAC,QAAD;KAAM,WAAU;eACb,KAAgB,EAAO;KACnB,CAAA;IACN,IACC,kBAAC,GAAD;KACE,MAAK;KACL,SAAQ;KACR,MAAK;KACL,WAAU;KACV,SAAS;eAER,EAAO;KACD,CAAA,GACP;IACH,EAAA,CAAA,GACD;GACF"}

package/dist/components/autosave_status/types/index.d.ts

@@ -0,0 +1,2 @@
+export type AutosaveFieldState = "idle" | "dirty" | "saving" | "saved" | "error";
+export type AutosaveStatusValue = AutosaveFieldState | "offline";

package/dist/components/editable_fields/context/index.d.ts

@@ -0,0 +1,31 @@
+import { Locale } from 'date-fns';
+import { ReactNode } from 'react';
+export interface EditableFieldLabels {
+    empty: string;
+    hint: string;
+    hours: string;
+    minutes: string;
+    saving: string;
+    saved: string;
+    savedAgo: string;
+    offline: string;
+    genericError: string;
+    retry: string;
+    acceptColor: string;
+    clearColor: string;
+    selectColor: string;
+    changeColor: string;
+    currentColor: string;
+}
+export interface EditableFieldsConfig {
+    labels: EditableFieldLabels;
+    locale: Locale;
+    dateFormat: string;
+    tableDateFormat: string;
+    swatches: readonly string[];
+}
+export interface EditableFieldsProviderProps extends Partial<Omit<EditableFieldsConfig, "labels">> {
+    labels?: Partial<EditableFieldLabels>;
+    children: ReactNode;
+}
+export declare const EditableFieldsContext: import('react').Context<EditableFieldsConfig>;

package/dist/components/editable_fields/context/index.js

@@ -0,0 +1,30 @@
+import { HEX_COLOR_SWATCHES as e } from "../../hex_color_picker/utils/index.js";
+import { createContext as t } from "react";
+import { es as n } from "date-fns/locale";
+var r = t({
+	labels: {
+		empty: "Añadir…",
+		hint: "Enter para guardar · Esc para descartar",
+		hours: "Horas",
+		minutes: "Minutos",
+		saving: "Guardando…",
+		saved: "Guardado",
+		savedAgo: "Guardado hace un momento",
+		offline: "Sin conexión · se guardará al reconectar",
+		genericError: "No se pudo guardar el cambio. Revisa tu conexión.",
+		retry: "Reintentar",
+		acceptColor: "Aceptar",
+		clearColor: "Quitar color",
+		selectColor: "Seleccionar color",
+		changeColor: "Cambiar color",
+		currentColor: "actual"
+	},
+	locale: n,
+	dateFormat: "dd 'de' MMMM 'del' yyyy",
+	tableDateFormat: "dd MMM yyyy",
+	swatches: e
+});
+//#endregion
+export { r as EditableFieldsContext };
+
+//# sourceMappingURL=index.js.map

package/dist/components/editable_fields/context/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/editable_fields/context/index.ts"],"sourcesContent":["import { es } from \"date-fns/locale\";\nimport type { Locale } from \"date-fns\";\nimport { createContext, type ReactNode } from \"react\";\nimport { HEX_COLOR_SWATCHES } from \"../../hex_color_picker/utils\";\n\nexport interface EditableFieldLabels {\n  empty: string;\n  hint: string;\n  hours: string;\n  minutes: string;\n  saving: string;\n  saved: string;\n  savedAgo: string;\n  offline: string;\n  genericError: string;\n  retry: string;\n  acceptColor: string;\n  clearColor: string;\n  selectColor: string;\n  changeColor: string;\n  currentColor: string;\n}\n\nexport interface EditableFieldsConfig {\n  labels: EditableFieldLabels;\n  locale: Locale;\n  dateFormat: string;\n  tableDateFormat: string;\n  swatches: readonly string[];\n}\n\nexport interface EditableFieldsProviderProps extends Partial<\n  Omit<EditableFieldsConfig, \"labels\">\n> {\n  labels?: Partial<EditableFieldLabels>;\n  children: ReactNode;\n}\n\nconst defaults: EditableFieldsConfig = {\n  labels: {\n    empty: \"Añadir…\",\n    hint: \"Enter para guardar · Esc para descartar\",\n    hours: \"Horas\",\n    minutes: \"Minutos\",\n    saving: \"Guardando…\",\n    saved: \"Guardado\",\n    savedAgo: \"Guardado hace un momento\",\n    offline: \"Sin conexión · se guardará al reconectar\",\n    genericError: \"No se pudo guardar el cambio. Revisa tu conexión.\",\n    retry: \"Reintentar\",\n    acceptColor: \"Aceptar\",\n    clearColor: \"Quitar color\",\n    selectColor: \"Seleccionar color\",\n    changeColor: \"Cambiar color\",\n    currentColor: \"actual\",\n  },\n  locale: es,\n  dateFormat: \"dd 'de' MMMM 'del' yyyy\",\n  tableDateFormat: \"dd MMM yyyy\",\n  swatches: HEX_COLOR_SWATCHES,\n};\n\nexport const EditableFieldsContext =\n  createContext<EditableFieldsConfig>(defaults);\n"],"mappings":";;;AA8DA,IAAa,IACX,EAzBqC;CACrC,QAAQ;EACN,OAAO;EACP,MAAM;EACN,OAAO;EACP,SAAS;EACT,QAAQ;EACR,OAAO;EACP,UAAU;EACV,SAAS;EACT,cAAc;EACd,OAAO;EACP,aAAa;EACb,YAAY;EACZ,aAAa;EACb,aAAa;EACb,cAAc;EACf;CACD,QAAQ;CACR,YAAY;CACZ,iBAAiB;CACjB,UAAU;CACX,CAG8C"}

package/dist/components/editable_fields/hooks/index.d.ts

@@ -0,0 +1 @@
+export declare const useEditableFields: () => import('../context').EditableFieldsConfig;

package/dist/components/editable_fields/hooks/index.js

@@ -0,0 +1,8 @@
+import { EditableFieldsContext as e } from "../context/index.js";
+import { useContext as t } from "react";
+//#region src/components/editable_fields/hooks/index.ts
+var n = () => t(e);
+//#endregion
+export { n as useEditableFields };
+
+//# sourceMappingURL=index.js.map

package/dist/components/editable_fields/hooks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/editable_fields/hooks/index.ts"],"sourcesContent":["import { useContext } from \"react\";\nimport { EditableFieldsContext } from \"../context\";\nexport const useEditableFields = () => useContext(EditableFieldsContext);\n"],"mappings":";;;AAEA,IAAa,UAA0B,EAAW,EAAsB"}

package/dist/components/editable_fields/index.d.ts

@@ -0,0 +1,3 @@
+import { EditableFieldsProviderProps } from './context';
+export type { EditableFieldsProviderProps } from './context';
+export declare const EditableFieldsProvider: ({ children, labels, locale, dateFormat, tableDateFormat, swatches, }: EditableFieldsProviderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/editable_fields/index.js

@@ -0,0 +1,32 @@
+import { EditableFieldsContext as e } from "./context/index.js";
+import { useEditableFields as t } from "./hooks/index.js";
+import { useMemo as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/editable_fields/index.tsx
+var i = ({ children: i, labels: a, locale: o, dateFormat: s, tableDateFormat: c, swatches: l }) => {
+	let u = t(), d = n(() => ({
+		labels: {
+			...u.labels,
+			...a
+		},
+		locale: o ?? u.locale,
+		dateFormat: s ?? u.dateFormat,
+		tableDateFormat: c ?? u.tableDateFormat,
+		swatches: l ?? u.swatches
+	}), [
+		u,
+		a,
+		o,
+		s,
+		c,
+		l
+	]);
+	return /* @__PURE__ */ r(e.Provider, {
+		value: d,
+		children: i
+	});
+};
+//#endregion
+export { i as EditableFieldsProvider };
+
+//# sourceMappingURL=index.js.map