@sesionario/blocks 1.20.0 → 1.22.0

package/README.md

@@ -6,6 +6,81 @@ This package is the Sesionario-specific successor to `@algenium/blocks`. It ship
 
 Shared feedback patterns include `ConfirmDestructiveDialog` (confirm before delete/mute and similar irreversible actions).
 
+### Read-first editable sections (`EditableSection`, `DataList`, `FieldMessage`)
+
+Settings and profile data should be readable by default, then turn into a real `<form>` when the person chooses Edit. The primitives are chrome-free — no Card, border, or title — so you place actions in your own layout (`CardAction`, page header, dialog, or a bare section).
+
+```tsx
+import {
+	EditableSection,
+	DataList,
+	DataListItem,
+	FieldMessage,
+} from "@sesionario/blocks";
+
+<EditableSection
+	labelledBy="fiscal-title"
+	isDirty={dirty}
+	onDiscard={() => reset()}
+	onSave={async () => {
+		/* throw on validation/API failure so edit mode stays open */
+		await save();
+	}}
+	labels={{
+		edit: t("edit"),
+		save: t("save"),
+		saving: t("saving"),
+		cancel: t("cancel"),
+		saved: t("saved"),
+	}}
+	readView={() => (
+		<DataList>
+			<DataListItem label="RFC">{rfc}</DataListItem>
+		</DataList>
+	)}
+	editView={() => (
+		<div className="flex flex-col gap-1.5">
+			<label htmlFor="rfc">RFC</label>
+			<input id="rfc" value={rfc} onChange={...} aria-invalid={!!error} aria-describedby="rfc-err" />
+			<FieldMessage id="rfc-err">{error}</FieldMessage>
+		</div>
+	)}
+>
+	{({ actions, content, status }) => (
+		<Card>
+			<CardHeader>
+				<CardTitle id="fiscal-title">Datos fiscales</CardTitle>
+				<CardAction>{actions}</CardAction>
+			</CardHeader>
+			<CardContent>
+				{content}
+				{status}
+			</CardContent>
+		</Card>
+	)}
+</EditableSection>
+```
+
+Headless alternative: `useEditableSection` for card-less surfaces (dialogs, table rows, page headers).
+
+Optional progressive-enhancement CSS for a smoother height change (Chromium 129+; no-op elsewhere). Honor reduced motion:
+
+```css
+@supports (interpolate-size: allow-keywords) {
+	.sesionario-editable-section-content {
+		interpolate-size: allow-keywords;
+		transition: min-height 200ms ease;
+	}
+}
+@media (prefers-reduced-motion: reduce) {
+	.sesionario-editable-section-content {
+		transition: none;
+	}
+}
+```
+
+Pass `stableHeight` for small (1–2 field) sections if you want later toggles to keep a cached `min-height`.
+
 ## Install
 
 ```bash

package/dist/index.cjs

@@ -456,6 +456,348 @@ function ConfirmDestructiveDialog({
     ] })
   ] }) });
 }
+
+// src/components/editable/types.ts
+var DEFAULT_EDITABLE_SECTION_LABELS = {
+  edit: "Editar",
+  save: "Guardar",
+  saving: "Guardando\u2026",
+  cancel: "Cancelar",
+  saved: "Guardado",
+  discardTitle: "\xBFDescartar cambios?",
+  discardDescription: "Si sales ahora, se perder\xE1n los cambios que no hayas guardado.",
+  discardConfirm: "Descartar",
+  discardCancel: "Seguir editando"
+};
+
+// src/components/editable/useEditableSection.ts
+function focusFirstField(container) {
+  if (!container) return;
+  const target = container.querySelector(
+    "[data-autofocus], input:not([type='hidden']):not([disabled]), select:not([disabled]), textarea:not([disabled]), [contenteditable='true']"
+  );
+  target?.focus();
+}
+function useEditableSection({
+  onSave,
+  onDiscard,
+  isDirty = false,
+  labelledBy,
+  title,
+  labels,
+  stableHeight = false
+}) {
+  const resolvedLabels = {
+    ...DEFAULT_EDITABLE_SECTION_LABELS,
+    ...labels
+  };
+  const [mode, setMode] = React7.useState("reading");
+  const [status, setStatus] = React7.useState(null);
+  const [confirmOpen, setConfirmOpen] = React7.useState(false);
+  const [minHeightPx, setMinHeightPx] = React7.useState(void 0);
+  const contentRef = React7.useRef(null);
+  const editButtonRef = React7.useRef(null);
+  const measuredHeightRef = React7.useRef(0);
+  const shouldFocusEditRef = React7.useRef(false);
+  const shouldFocusFirstFieldRef = React7.useRef(false);
+  const editButtonId = React7.useId();
+  const contentFormId = React7.useId();
+  const isEditing = mode === "editing" || mode === "saving";
+  const isSaving = mode === "saving";
+  React7.useEffect(() => {
+    if (mode === "reading" && shouldFocusEditRef.current) {
+      shouldFocusEditRef.current = false;
+      editButtonRef.current?.focus();
+      return;
+    }
+    if (mode === "editing" && shouldFocusFirstFieldRef.current) {
+      shouldFocusFirstFieldRef.current = false;
+      const invalid = contentRef.current?.querySelector(
+        "[aria-invalid='true']"
+      );
+      if (invalid) {
+        invalid.focus();
+        return;
+      }
+      focusFirstField(contentRef.current);
+    }
+  }, [mode]);
+  const exitToReading = React7.useCallback(() => {
+    setConfirmOpen(false);
+    shouldFocusEditRef.current = true;
+    setMode("reading");
+    onDiscard?.();
+  }, [onDiscard]);
+  const startEdit = React7.useCallback(() => {
+    setStatus(null);
+    shouldFocusFirstFieldRef.current = true;
+    setMode("editing");
+  }, []);
+  const requestCancel = React7.useCallback(() => {
+    if (isSaving) return;
+    if (isDirty) {
+      setConfirmOpen(true);
+      return;
+    }
+    exitToReading();
+  }, [exitToReading, isDirty, isSaving]);
+  const handleSubmit = React7.useCallback(
+    (event) => {
+      event.preventDefault();
+      if (isSaving) return;
+      void (async () => {
+        setMode("saving");
+        setStatus(null);
+        try {
+          await onSave();
+          setStatus(resolvedLabels.saved);
+          shouldFocusEditRef.current = true;
+          setMode("reading");
+        } catch {
+          shouldFocusFirstFieldRef.current = true;
+          setMode("editing");
+        }
+      })();
+    },
+    [isSaving, onSave, resolvedLabels.saved]
+  );
+  const handleFormKeyDown = React7.useCallback(
+    (event) => {
+      if (event.key !== "Escape") return;
+      event.preventDefault();
+      requestCancel();
+    },
+    [requestCancel]
+  );
+  React7.useEffect(() => {
+    if (!stableHeight || !isEditing) return;
+    const el = contentRef.current;
+    if (!el) return;
+    const measure = () => {
+      const height = el.getBoundingClientRect().height;
+      if (height > measuredHeightRef.current) {
+        measuredHeightRef.current = height;
+        setMinHeightPx(height);
+      }
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [isEditing, stableHeight]);
+  const editButtonNameProps = labelledBy != null ? { "aria-labelledby": `${labelledBy} ${editButtonId}` } : title != null && title.length > 0 ? { "aria-label": `${resolvedLabels.edit} ${title}` } : { "aria-label": resolvedLabels.edit };
+  return {
+    mode,
+    isEditing,
+    isSaving,
+    startEdit,
+    requestCancel,
+    formProps: {
+      onSubmit: handleSubmit,
+      onKeyDown: handleFormKeyDown,
+      noValidate: true
+    },
+    contentRef,
+    editButtonRef,
+    contentFormId,
+    editButtonProps: {
+      type: "button",
+      id: editButtonId,
+      onClick: startEdit,
+      ref: editButtonRef,
+      ...editButtonNameProps
+    },
+    saveButtonProps: {
+      type: "submit",
+      disabled: isSaving
+    },
+    cancelButtonProps: {
+      type: "button",
+      onClick: requestCancel,
+      disabled: isSaving
+    },
+    status,
+    statusProps: {
+      role: "status",
+      "aria-live": "polite",
+      className: "sr-only"
+    },
+    confirmDiscard: {
+      open: confirmOpen,
+      onOpenChange: setConfirmOpen,
+      title: resolvedLabels.discardTitle,
+      description: resolvedLabels.discardDescription,
+      confirmLabel: resolvedLabels.discardConfirm,
+      cancelLabel: resolvedLabels.discardCancel,
+      onConfirm: exitToReading
+    },
+    resolvedLabels,
+    contentStyle: stableHeight && minHeightPx != null ? { minHeight: minHeightPx } : void 0,
+    actionsClassName: "flex min-h-9 min-w-[11rem] flex-wrap items-center justify-end gap-2"
+  };
+}
+function EditableSection({
+  readView,
+  editView,
+  children,
+  className,
+  ...options
+}) {
+  const section = useEditableSection(options);
+  const {
+    isEditing,
+    isSaving,
+    formProps,
+    contentRef,
+    contentFormId,
+    editButtonProps,
+    saveButtonProps,
+    cancelButtonProps,
+    status,
+    statusProps,
+    confirmDiscard,
+    resolvedLabels,
+    contentStyle,
+    actionsClassName,
+    mode
+  } = section;
+  const actionButtons = !isEditing ? /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", size: "sm", ...editButtonProps, children: resolvedLabels.edit }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", size: "sm", ...cancelButtonProps, children: resolvedLabels.cancel }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Button,
+      {
+        size: "sm",
+        type: "submit",
+        form: contentFormId,
+        disabled: saveButtonProps.disabled,
+        children: isSaving ? resolvedLabels.saving : resolvedLabels.save
+      }
+    )
+  ] });
+  const actions = /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "editable-section-actions", className: actionsClassName, children: actionButtons });
+  const content = isEditing ? /* @__PURE__ */ jsxRuntime.jsx(
+    "form",
+    {
+      id: contentFormId,
+      ref: contentRef,
+      "data-slot": "editable-section-content",
+      className: cn("sesionario-editable-section-content space-y-4"),
+      style: contentStyle,
+      ...formProps,
+      children: editView()
+    }
+  ) : /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: contentRef,
+      "data-slot": "editable-section-content",
+      className: "sesionario-editable-section-content",
+      style: contentStyle,
+      children: readView()
+    }
+  );
+  const statusNode = /* @__PURE__ */ jsxRuntime.jsx("span", { ...statusProps, "data-slot": "editable-section-status", children: status });
+  const dialog = /* @__PURE__ */ jsxRuntime.jsx(
+    ConfirmDestructiveDialog,
+    {
+      open: confirmDiscard.open,
+      onOpenChange: confirmDiscard.onOpenChange,
+      title: confirmDiscard.title,
+      description: confirmDiscard.description,
+      confirmLabel: confirmDiscard.confirmLabel,
+      cancelLabel: confirmDiscard.cancelLabel,
+      onConfirm: confirmDiscard.onConfirm
+    }
+  );
+  if (children) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      children({
+        actions,
+        content,
+        status: statusNode,
+        mode,
+        isSaving,
+        isEditing
+      }),
+      dialog
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-slot": "editable-section", className: cn("space-y-4", className), children: [
+    actions,
+    content,
+    statusNode,
+    dialog
+  ] });
+}
+function DataList({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "dl",
+    {
+      "data-slot": "data-list",
+      className: cn("grid gap-4 sm:grid-cols-2", className),
+      ...props
+    }
+  );
+}
+function DataListItem({
+  label,
+  children,
+  empty = "\u2014",
+  className,
+  labelClassName,
+  valueClassName
+}) {
+  const isEmpty = children == null || children === false || typeof children === "string" && children.trim().length === 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-slot": "data-list-item",
+      className: cn("flex flex-col gap-1.5", className),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "dt",
+          {
+            className: cn(
+              "text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+              labelClassName
+            ),
+            children: label
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "dd",
+          {
+            className: cn(
+              "text-sm wrap-break-word",
+              isEmpty && "text-muted-foreground",
+              valueClassName
+            ),
+            children: isEmpty ? empty : children
+          }
+        )
+      ]
+    }
+  );
+}
+function FieldMessage({
+  id,
+  children,
+  className,
+  ...props
+}) {
+  const hasMessage = children != null && children !== false && !(typeof children === "string" && children.trim().length === 0);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "p",
+    {
+      id,
+      role: hasMessage ? "alert" : void 0,
+      "data-slot": "field-message",
+      className: cn("min-h-5 text-xs text-destructive", className),
+      ...props,
+      children: hasMessage ? children : "\xA0"
+    }
+  );
+}
 var COLLAPSED_MAX_HEIGHT_REM = 11;
 function ExpandableText({
   children,
@@ -1344,13 +1686,13 @@ function TenantAvatar({
   logo,
   size = "md"
 }) {
-  const sizeClass = size === "sm" ? "size-6 rounded-md" : "size-8 rounded-lg";
+  const sizeClass = size === "sm" ? "size-6" : "size-8";
   const textClass = size === "sm" ? "text-xs" : "text-sm";
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       className: cn(
-        "flex shrink-0 items-center justify-center overflow-hidden font-medium",
+        "flex shrink-0 items-center justify-center overflow-hidden rounded-full font-medium",
         sizeClass
       ),
       style: logo ? void 0 : avatarFallbackStyle(name),
@@ -1371,7 +1713,7 @@ function SwitcherSkeleton({
           "pointer-events-none flex size-8 items-center justify-center rounded-md",
           className
         ),
-        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-8 shrink-0 animate-pulse rounded-lg bg-muted" })
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-8 shrink-0 animate-pulse rounded-full bg-muted" })
       }
     );
   }
@@ -1384,7 +1726,7 @@ function SwitcherSkeleton({
         className
       ),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-8 shrink-0 animate-pulse rounded-lg bg-muted" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-8 shrink-0 animate-pulse rounded-full bg-muted" }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 w-24 animate-pulse rounded bg-muted" }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-3 w-16 animate-pulse rounded bg-muted" })
@@ -1427,7 +1769,7 @@ function OrgSwitcher({
             triggerClassNameProp
           ),
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-8 items-center justify-center rounded-lg bg-muted", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Building2, { className: "size-4 text-muted-foreground" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-8 items-center justify-center rounded-full bg-muted", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Building2, { className: "size-4 text-muted-foreground" }) }),
             !collapsed ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid min-w-0 flex-1 text-left leading-tight", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate font-medium", children: labels.empty }) }) : null
           ]
         }
@@ -1444,7 +1786,7 @@ function OrgSwitcher({
           className
         ),
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-8 items-center justify-center rounded-lg bg-muted", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Building2, { className: "size-4 text-muted-foreground" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-8 items-center justify-center rounded-full bg-muted", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Building2, { className: "size-4 text-muted-foreground" }) }),
           !collapsed ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid min-w-0 flex-1 text-left leading-tight", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate font-medium text-muted-foreground", children: labels.empty }) }) : null
         ]
       }
@@ -2330,8 +2672,6 @@ function AvatarEditor({
     canvas.width = displaySize;
     canvas.height = displaySize;
     ctx.clearRect(0, 0, displaySize, displaySize);
-    ctx.fillStyle = "#1a1a2e";
-    ctx.fillRect(0, 0, displaySize, displaySize);
     ctx.save();
     ctx.translate(displaySize / 2, displaySize / 2);
     ctx.rotate(rotation * Math.PI / 180);
@@ -2353,28 +2693,6 @@ function AvatarEditor({
       drawHeight
     );
     ctx.restore();
-    ctx.globalCompositeOperation = "destination-in";
-    ctx.beginPath();
-    ctx.arc(
-      displaySize / 2,
-      displaySize / 2,
-      displaySize / 2 - 4,
-      0,
-      Math.PI * 2
-    );
-    ctx.fill();
-    ctx.globalCompositeOperation = "source-over";
-    ctx.strokeStyle = "hsl(var(--primary))";
-    ctx.lineWidth = 3;
-    ctx.beginPath();
-    ctx.arc(
-      displaySize / 2,
-      displaySize / 2,
-      displaySize / 2 - 2,
-      0,
-      Math.PI * 2
-    );
-    ctx.stroke();
     const dataUrl = generateOutput();
     if (dataUrl) {
       onChange?.(dataUrl);
@@ -2480,6 +2798,8 @@ function AvatarEditor({
   const gapSize = isLarge ? "gap-6" : "gap-4";
   const controlGap = isLarge ? "gap-3" : "gap-2";
   const sliderHeight = isLarge ? "[&_[role=slider]]:h-6 [&_[role=slider]]:w-6" : "";
+  const guideRadius = size / 2 - 2;
+  const guideCenter = size / 2;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -2543,6 +2863,36 @@ function AvatarEditor({
                   onTouchEnd: handleMouseUp
                 }
               ),
+              imageLoaded && /* @__PURE__ */ jsxRuntime.jsxs(
+                "svg",
+                {
+                  width: size,
+                  height: size,
+                  className: "pointer-events-none absolute inset-0",
+                  "aria-hidden": "true",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "path",
+                      {
+                        d: `M0 0H${size}V${size}H0Z M${guideCenter - guideRadius} ${guideCenter}a${guideRadius} ${guideRadius} 0 1 0 ${guideRadius * 2} 0a${guideRadius} ${guideRadius} 0 1 0 ${-guideRadius * 2} 0`,
+                        fill: "rgb(0 0 0 / 0.45)",
+                        fillRule: "evenodd"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "circle",
+                      {
+                        cx: guideCenter,
+                        cy: guideCenter,
+                        r: guideRadius,
+                        fill: "none",
+                        stroke: "hsl(var(--primary))",
+                        strokeWidth: "3"
+                      }
+                    )
+                  ]
+                }
+              ),
               showGrid && imageLoaded && /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
                 {
@@ -6990,6 +7340,32 @@ function PaymentIcon({
     }
   );
 }
+var BrandX = React7.forwardRef(function BrandX2({
+  className,
+  size = 24,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby,
+  ...props
+}, ref) {
+  const labelled = Boolean(ariaLabel || ariaLabelledby);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      ref,
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      ...props,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledby,
+      "aria-hidden": labelled ? void 0 : true,
+      width: size,
+      height: size,
+      className: cn("shrink-0", className),
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z" })
+    }
+  );
+});
 function MessageGroup({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -8334,14 +8710,19 @@ Object.defineProperty(exports, "useMessageScrollerVisibility", {
 });
 exports.AvatarEditor = AvatarEditor;
 exports.AvatarEditorDialog = AvatarEditorDialog;
+exports.BrandX = BrandX;
 exports.Bubble = Bubble;
 exports.BubbleContent = BubbleContent;
 exports.BubbleGroup = BubbleGroup;
 exports.BubbleReactions = BubbleReactions;
 exports.ChatMessageList = ChatMessageList;
 exports.ConfirmDestructiveDialog = ConfirmDestructiveDialog;
+exports.DEFAULT_EDITABLE_SECTION_LABELS = DEFAULT_EDITABLE_SECTION_LABELS;
+exports.DataList = DataList;
+exports.DataListItem = DataListItem;
 exports.DropdownMenuItem = DropdownMenuItem;
 exports.DropdownMenuSeparator = DropdownMenuSeparator;
+exports.EditableSection = EditableSection;
 exports.EmojiInput = EmojiInput;
 exports.EmojiPicker = EmojiPicker;
 exports.EmojiPickerPopover = EmojiPickerPopover;
@@ -8356,6 +8737,7 @@ exports.EmptyTitle = EmptyTitle;
 exports.ErrorState = ErrorState;
 exports.ExpandableText = ExpandableText;
 exports.FeedVideoPlayer = FeedVideoPlayer;
+exports.FieldMessage = FieldMessage;
 exports.ImageLightbox = ImageLightbox;
 exports.LanguageContext = LanguageContext;
 exports.LanguageSwitcher = LanguageSwitcher;
@@ -8414,6 +8796,7 @@ exports.paymentTypeFromStripeBrand = paymentTypeFromStripeBrand;
 exports.shouldRetryLiveEdge404 = shouldRetryLiveEdge404;
 exports.useDebouncedValue = useDebouncedValue;
 exports.useDebouncedValueStrict = useDebouncedValueStrict;
+exports.useEditableSection = useEditableSection;
 exports.useFeedExclusivePlayback = useFeedExclusivePlayback;
 exports.useHlsPlayback = useHlsPlayback;
 exports.useLanguageContext = useLanguageContext;