torch-glare 2.4.1 → 2.4.2

package/apps/lib/components/SearchableSelect.tsx

@@ -38,6 +38,8 @@ interface Props {
   theme?: Themes;
   dir?: string;
   className?: string;
+  /** Transparent border/background so the trigger blends into a table cell. */
+  onTable?: boolean;
 
   // --- Async / backend pagination (all optional; static `options` still works) ---
   /**
@@ -105,6 +107,7 @@ export function SearchableSelect({
   theme,
   dir,
   className,
+  onTable,
   filterClientSide = true,
   onSearchChange,
   searchDebounceMs = 300,
@@ -175,11 +178,13 @@ export function SearchableSelect({
           data-theme={theme}
           variant={variant}
           size={size === "XS" ? "S" : size}
+          onTable={onTable}
           ref={groupRef as never}
           onFocus={(e: React.FocusEvent<HTMLDivElement>) =>
             setDropdownWidth(e.currentTarget.offsetWidth)
           }
-          className={cn("flex w-full items-center gap-1 p-1", className)}
+          // Trigger styling mirrors the `Select` component's trigger so the two read identically.
+          className={cn("flex w-full items-center gap-1 rounded-[6px] p-[4px]", className)}
         >
           {icon && <Icon>{icon}</Icon>}
           <Input
@@ -218,13 +223,14 @@ export function SearchableSelect({
               }
             }}
             className={cn(
-              "shrink-0 h-[32px] w-[32px] rounded-[4px]",
+              // Same box + open-state fill as the Select trigger's chevron.
+              "h-[32px] w-[32px] shrink-0",
               open && "bg-background-presentation-action-hover text-white",
             )}
           >
             <i
               className={cn(
-                "ri-arrow-down-s-line text-[20px] transition-all duration-100 ease-in-out",
+                "ri-arrow-down-s-line !text-[26px] transition-all duration-100 ease-in-out",
                 open && "rotate-180",
               )}
             />

package/apps/lib/components/SectionBlock.tsx

@@ -27,6 +27,8 @@ export interface SectionBlockProps extends Omit<HTMLAttributes<HTMLDivElement>,
   color?: SectionColor;
   title?: ReactNode;
   icon?: ReactNode;
+  /** Right-aligned content on the title row — e.g. action buttons. */
+  action?: ReactNode;
   containerClassName?: string;
   headerClassName?: string;
   bodyClassName?: string;
@@ -38,6 +40,7 @@ export const SectionBlock = forwardRef<HTMLDivElement, SectionBlockProps>(
       children,
       color,
       title,
+      action,
       className,
       containerClassName,
       headerClassName,
@@ -57,14 +60,19 @@ export const SectionBlock = forwardRef<HTMLDivElement, SectionBlockProps>(
         )}
         {...props}
       >
-        {title && (
-          <div className={cn("flex px-[6px] flex-col gap-[10px]", headerClassName)}>
-            <div className={cn(titleBadge({ color }))}>
-              <span className="flex items-center gap-1.5">
-                {icon}
-                {title}
-              </span>
-            </div>
+        {(title || action) && (
+          <div className={cn("flex px-[6px] items-center justify-between gap-3", headerClassName)}>
+            {title ? (
+              <div className={cn(titleBadge({ color }))}>
+                <span className="flex items-center gap-1.5">
+                  {icon}
+                  {title}
+                </span>
+              </div>
+            ) : (
+              <span />
+            )}
+            {action && <div className="flex shrink-0 items-center gap-2">{action}</div>}
           </div>
         )}
         <div className={cn("flex px-[42px] flex-col gap-[2px] px-[42px]", bodyClassName)}>

package/apps/lib/components/Select.tsx

@@ -5,6 +5,7 @@ import { cn } from "../utils/cn";
 import { cva, VariantProps } from "class-variance-authority";
 import { Button } from "./Button";
 import { Tooltip } from "./Tooltip";
+import { MenuItemStyles } from "./DropdownMenu";
 import { Themes } from "../utils/types";
 
 const Select = SelectPrimitive.Root;
@@ -31,6 +32,7 @@ const SelectTrigger = React.forwardRef<
       errors,
       theme,
       icon,
+      onTable,
       ...props
     },
     ref,
@@ -45,6 +47,7 @@ const SelectTrigger = React.forwardRef<
               size,
               variant,
               error: errors !== undefined,
+              onTable,
             }),
             className,
           )}
@@ -61,6 +64,7 @@ const SelectTrigger = React.forwardRef<
           <Button
             as={"span"}
             buttonType="icon"
+            size={"L"}
             className={cn([
               "group-aria-expanded:bg-background-presentation-action-hover",
               "group-aria-expanded:text-white",
@@ -137,7 +141,10 @@ const SelectContent = React.forwardRef<
         position={position}
         {...props}
       >
-        <SelectPrimitive.Viewport>{children}</SelectPrimitive.Viewport>
+        {/* Dedicated scroll viewport + boxed group, matching SearchableSelect's menu surface. */}
+        <SelectPrimitive.Viewport className="overflow-y-auto overflow-x-hidden rounded-[10px] scrollbar-hide">
+          <div className="flex flex-col gap-[1px] overflow-hidden rounded-[10px]">{children}</div>
+        </SelectPrimitive.Viewport>
       </SelectPrimitive.Content>
     </SelectPrimitive.Portal>
   ),
@@ -158,22 +165,21 @@ SelectLabel.displayName = "SelectLabel";
 
 const SelectItem = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> &
-    VariantProps<typeof SelectItemStyles>
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> & VariantProps<typeof MenuItemStyles>
 >(({ className, children, size = "M", variant = "Default", active, ...props }, ref) => (
+  // Same structure as DropdownMenuItem / SearchableSelect: MenuItemStyles on the element
+  // + a single inner <div> the styles target via [&>div], and a check on the selected row.
   <SelectPrimitive.Item
     ref={ref}
-    className={cn(
-      SelectItemStyles({
-        variant,
-        active,
-        size,
-      }),
-      className,
-    )}
+    className={cn(MenuItemStyles({ variant, active, size }), "shrink-0", className)}
     {...props}
   >
-    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    <div>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+      <SelectPrimitive.ItemIndicator className="ml-auto flex shrink-0">
+        <i className="ri-check-line text-[16px]" />
+      </SelectPrimitive.ItemIndicator>
+    </div>
   </SelectPrimitive.Item>
 ));
 
@@ -206,34 +212,36 @@ export {
 
 // NOTE: radix select as DropDownButton
 
+// Panel surface mirrors SearchableSelect's `menuContentStyles` (translucent, backdrop-blurred,
+// borderless, rounded-14). `min-w`/`z-index` are kept for the Radix Select portal.
 const SelectContentStyles = cva(
   [
     "p-1",
-    "rounded-[8px]",
+    "rounded-[14px]",
+    // Match the dropdown to the trigger's width (Radix popper exposes it as a CSS var),
+    // but never narrower than 240px.
+    "w-[var(--radix-select-trigger-width)]",
     "min-w-[240px]",
-    "border",
+    "border-0",
     "outline-none",
-    "overflow-scroll",
+    "overflow-hidden",
+    "backdrop-blur-[21px]",
+    "flex flex-col gap-1",
     "data-[state=open]:animate-in",
-    "data-[state=closed]:animate-out",
-    "data-[state=closed]:fade-out-0",
     "data-[state=open]:fade-in-0",
-    "overflow-x-hidden",
-    "scrollbar-hide",
     "z-[1000]",
+    "max-h-[368px]",
   ],
   {
     variants: {
       variant: {
         SystemStyle: [
-          "border-border-system-global-secondary",
           "bg-background-system-body-primary",
           "shadow-[0px_0px_18px_0px_rgba(0,0,0,0.75)]",
         ],
         PresentationStyle: [
-          "border-border-presentation-global-primary",
-          "bg-background-presentation-form-base",
-          "shadow-[0px_0px_10px_0px_rgba(0,0,0,0.4),0px_4px_4px_0px_rgba(0,0,0,0.2)]",
+          "bg-[rgba(61,64,69,0.72)]",
+          "shadow-[0_0_32px_2px_rgba(0,0,0,0.20),0_0_48px_2px_rgba(0,0,0,0.05)]",
         ],
       },
       defaultVariants: {
@@ -243,102 +251,9 @@ const SelectContentStyles = cva(
   },
 );
 
-const SelectItemStyles = cva(
-  [
-    "text-content-presentation-action-light-primary",
-    "outline-none",
-    "border",
-    "border-transparent",
-    "flex",
-    "gap-[8px]",
-    "items-center",
-    "justify-start",
-    "text-overflow",
-    "overflow-hidden",
-    "px-[12px]",
-    "rounded-[4px]",
-    "transition-all",
-    "ease-in-out",
-    "duration-300",
-  ],
-  {
-    variants: {
-      variant: {
-        Default: [
-          "text-content-presentation-action-light-primary",
-          "bg-background-presentation-action-dropdown-primary",
-          "hover:bg-background-presentation-action-hover",
-          "hover:text-content-presentation-global-primary-inverse",
-          "focus:bg-background-presentation-action-hover",
-          "focus:text-content-presentation-global-primary-inverse",
-          "disabled:text-content-presentation-state-disabled",
-          "disabled:bg-white-00",
-        ],
-        Warning: [
-          "text-content-presentation-state-information",
-          "hover:bg-background-presentation-state-information-primary",
-          "focus:bg-background-presentation-state-information-primary",
-          "focus:text-content-presentation-global-primary-inverse",
-          "hover:text-content-presentation-global-primary-inverse",
-        ],
-        Negative: [
-          "text-content-presentation-state-negative",
-          "hover:bg-background-presentation-state-negative-primary",
-          "hover:text-content-presentation-global-primary-inverse",
-          "focus:bg-background-presentation-state-negative-primary",
-          "focus:text-content-presentation-global-primary-inverse",
-          "active:text-content-presentation-state-negative",
-        ],
-        SystemStyle: [
-          "bg-background-system-body-primary",
-          "text-content-system-global-primary",
-          "hover:bg-background-system-action-secondary-hover",
-          "hover:text-content-system-action-primary-hover",
-          "hover:border-border-system-action-primary-hover",
-          "focus:bg-background-system-action-secondary-hover",
-          "focus:text-content-system-action-primary-hover",
-          "focus:border-border-system-action-primary-hover",
-          "disabled:bg-background-system-body-secondary",
-          "disabled:text-content-system-global-disabled",
-        ],
-      },
-      size: {
-        S: ["typography-body-small-regular", "h-[24px]"],
-        M: ["typography-body-medium-regular", "h-[32px]"],
-      },
-
-      disabled: {
-        true: ["text-content-presentation-state-disabled", "bg-white-00"],
-      },
-
-      active: {
-        true: [
-          "bg-background-presentation-action-selected",
-          "text-content-presentation-action-light-primary",
-        ],
-      },
-
-      defaultVariants: {
-        variant: "Default",
-        size: "M",
-        active: false,
-        disabled: false,
-      },
-    },
-    compoundVariants: [
-      {
-        active: true,
-        variant: "Warning",
-        className: ["text-content-presentation-state-negative"],
-      },
-    ],
-  },
-);
-
 const PopoverTriggerStyles = cva(
   [
-    "flex flex-row rounded-[4px] justify-between items-center outline-none",
-    "rounded-[4px]",
+    "flex flex-row rounded-[8px] justify-between items-center outline-none",
     "[&_span]:text-content-presentation-action-light-primary",
     "typography-body-small-regular",
     "[&_p]:px-[10px] [&_p]:whitespace-nowrap",
@@ -354,9 +269,11 @@ const PopoverTriggerStyles = cva(
       variant: {
         PresentationStyle: [
           "bg-background-presentation-form-field-primary",
+          "border-border-presentation-action-primary",
           "hover:bg-background-presentation-form-field-hover",
+          "hover:border-border-presentation-action-hover",
           "focus:bg-background-presentation-form-field-hover",
-          "border-none",
+          "focus:border-border-presentation-state-focus",
         ],
         SystemStyle: [
           "bg-black-alpha-20",
@@ -376,12 +293,16 @@ const PopoverTriggerStyles = cva(
           "hover:caret-border-presentation-state-negative",
         ],
       },
+      // Transparent border/background so the trigger blends into a table cell.
+      onTable: {
+        true: ["border-transparent", "bg-transparent"],
+      },
       size: {
-        S: ["[&_span]:h-[22px] [&_span]:w-[22px] [&_p]:typography-body-small-medium"],
+        S: ["rounded-[6px] [&_span]:h-[22px] [&_span]:w-[22px] [&_p]:typography-body-small-medium"],
         M: ["[&_span]:h-[26px] [&_span]:w-[26px] [&_p]:typography-body-medium-medium"],
         L: ["[&_span]:h-[28px] [&_span]:w-[28px] [&_p]:typography-body-large-medium"],
         XL: [
-          "h-[40px] p-[4px] rounded-[6px] [&_span]:h-[32px] [&_span]:w-[32px] [&_p]:typography-body-large-regular [&_p]:px-[4px]",
+          "h-[40px] p-[4px] rounded-[8px] [&_span]:h-[32px] [&_span]:w-[32px] [&_p]:typography-body-large-regular [&_p]:px-[4px]",
         ],
       },
     },

package/apps/lib/components/TextEditor/RichTextField.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { lazy, Suspense, useEffect, useState } from "react";
+import type { OutputData } from "@editorjs/editorjs";
+
+/**
+ * Client-only, lazily-loaded wrapper around the EditorJS `TextEditor`.
+ *
+ * EditorJS references DOM globals (`Element`) at module-load time, which crashes
+ * server-side rendering. Statically importing `TextEditor` in the field registry
+ * would pull it into the SSR bundle; loading it lazily + only after mount keeps
+ * the builder SSR-safe — the editor is imported on the client, on demand.
+ */
+const TextEditorLazy = lazy(() => import("./TextEditor").then((m) => ({ default: m.TextEditor })));
+
+export interface RichTextFieldProps {
+  data?: OutputData;
+  onChange?: (data: OutputData) => void;
+  readOnly?: boolean;
+  placeholder?: string;
+  /** Editor size — controls min-height + padding (the toolbar gutter). Default "M". */
+  size?: "S" | "M" | "L" | "XL";
+}
+
+const placeholderBox = (
+  <div className="min-h-[200px] w-full rounded-[6px] border border-border-presentation-action-primary bg-background-presentation-form-field-primary" />
+);
+
+export function RichTextField({ size = "M", ...props }: RichTextFieldProps) {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+
+  if (!mounted) return placeholderBox;
+
+  return (
+    <Suspense fallback={placeholderBox}>
+      <TextEditorLazy
+        size={size}
+        className="border border-border-presentation-action-primary"
+        {...props}
+      />
+    </Suspense>
+  );
+}
+
+RichTextField.displayName = "RichTextField";

package/apps/lib/components/{TextEditor.tsx → TextEditor/TextEditor.tsx}

@@ -10,10 +10,10 @@ import React, {
   useState,
 } from "react";
 import { cva, type VariantProps } from "class-variance-authority";
-import { cn } from "../utils/cn";
-import { Themes } from "../utils/types";
+import { cn } from "../../utils/cn";
+import { Themes } from "../../utils/types";
 import EditorJS, { type OutputData } from "@editorjs/editorjs";
-import { isMarkdown, parseMarkdownToBlocks } from "../utils/markdownParser";
+import { isMarkdown, parseMarkdownToBlocks } from "./markdownParser";
 
 // ─── Tool Imports ────────────────────────────────────────────────────────────
 import Header from "@editorjs/header";
@@ -34,7 +34,14 @@ import Marker from "@editorjs/marker";
 import InlineCode from "@editorjs/inline-code";
 import Underline from "@editorjs/underline";
 import TextVariantTune from "@editorjs/text-variant-tune";
+// `editorjs-undo` touches DOM globals at module-eval, so it is imported dynamically
+// (browser-only) in `onReady`; keep only the type here.
+import type Undo from "editorjs-undo";
 import ChartBlockTool from "./ChartBlockTool";
+import StrikethroughInlineTool from "./editor-tools/StrikethroughInlineTool";
+import ColorInlineTool from "./editor-tools/ColorInlineTool";
+import AlignmentTune from "./editor-tools/AlignmentTune";
+import { TextEditorToolbar } from "./TextEditorToolbar";
 
 // ─── RTL Detection ───────────────────────────────────────────────────────────
 const RTL_REGEX = /[\u0591-\u07FF\u200F\u202B\u202E\uFB1D-\uFDFD\uFE70-\uFEFC]/;
@@ -172,11 +179,21 @@ const getDefaultTools = (): Record<string, any> => ({
   marker: { class: Marker, shortcut: "CMD+SHIFT+M" },
   inlineCode: { class: InlineCode, shortcut: "CMD+SHIFT+I" },
   underline: { class: Underline },
+  // Registered so their `sanitize` unions into every block's save config (strike/color
+  // markup persists) and they appear in the inline toolbar; the fixed toolbar drives them too.
+  strikethrough: { class: StrikethroughInlineTool, shortcut: "CMD+SHIFT+X" },
+  color: { class: ColorInlineTool },
   textVariant: { class: TextVariantTune },
+  // Per-block text alignment; wired into `tunes` below so every block gets it.
+  align: { class: AlignmentTune },
 });
 
 // ─── Auto-direction CSS ──────────────────────────────────────────────────────
 const AUTO_DIR_STYLES = `
+  /* Block alignment (AlignmentTune sets data-align on the block content wrapper). */
+  .torch-text-editor .cdx-align-wrap[data-align="center"] { text-align: center; }
+  .torch-text-editor .cdx-align-wrap[data-align="right"] { text-align: right; }
+  .torch-text-editor .cdx-align-wrap[data-align="left"] { text-align: left; }
   .torch-text-editor [contenteditable="true"][dir="rtl"] {
     unicode-bidi: plaintext;
   }
@@ -691,7 +708,8 @@ const textEditorStyles = cva(
     "relative w-full rounded-[6px]",
     "border-0 transition-all duration-200 ease-in-out",
     "[&_.codex-editor]:min-h-[inherit]",
-    "[&_.codex-editor__redactor]:min-h-[inherit] [&_.codex-editor__redactor]:pb-[100px]",
+    // Content padding lives on the redactor (not the container) so the toolbar stays full-bleed.
+    "[&_.codex-editor__redactor]:min-h-[inherit] [&_.codex-editor__redactor]:px-[16px] [&_.codex-editor__redactor]:pt-[12px] [&_.codex-editor__redactor]:pb-[100px]",
     "[&_.ce-paragraph]:typography-body-medium-regular",
   ],
   {
@@ -727,11 +745,13 @@ const textEditorStyles = cva(
           "[&_.ce-delimiter]:border-border-presentation-action-primary",
         ],
       },
+      // No padding on the container — the fixed toolbar must go edge-to-edge. Content
+      // padding is applied to the EditorJS redactor below instead.
       size: {
-        S: "min-h-[200px] p-2",
-        M: "min-h-[300px] p-3",
-        L: "min-h-[400px] p-4",
-        XL: "min-h-[500px] p-5",
+        S: "min-h-[200px]",
+        M: "min-h-[300px]",
+        L: "min-h-[400px]",
+        XL: "min-h-[500px]",
       },
       disabled: {
         true: "cursor-not-allowed opacity-60 pointer-events-none",
@@ -764,6 +784,8 @@ interface TextEditorProps
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   tools?: Record<string, any>;
   minHeight?: number;
+  /** Show the fixed formatting toolbar (default `true`; hidden when `readOnly`/`disabled`). */
+  toolbar?: boolean;
 }
 
 // ─── Component ───────────────────────────────────────────────────────────────
@@ -783,11 +805,14 @@ export const TextEditor = forwardRef<TextEditorRef, TextEditorProps>(
       autofocus = false,
       tools,
       minHeight,
+      toolbar = true,
       ...props
     },
     ref,
   ) => {
     const editorRef = useRef<EditorJS | null>(null);
+    const undoRef = useRef<Undo | null>(null);
+    const [toolbarReady, setToolbarReady] = useState(false);
     const holderRef = useRef<HTMLDivElement>(null);
     const observerRef = useRef<MutationObserver | null>(null);
     const [holderId] = useState(() => `torch-editor-${Math.random().toString(36).substring(2, 9)}`);
@@ -981,10 +1006,13 @@ export const TextEditor = forwardRef<TextEditorRef, TextEditorProps>(
       if (isInitializing.current || editorRef.current) return;
       isInitializing.current = true;
 
+      // Only enable the `align` tune when using the default tools (a caller-supplied `tools`
+      // map may not register it).
+      const usingDefaultTools = !toolsRef.current;
       const editor = new EditorJS({
         holder: holderId,
         tools: toolsRef.current ?? getDefaultTools(),
-        tunes: ["textVariant"],
+        tunes: usingDefaultTools ? ["textVariant", "align"] : ["textVariant"],
         data: initialDataRef.current || undefined,
         readOnly: readOnlyRef.current,
         placeholder: placeholderRef.current,
@@ -999,6 +1027,21 @@ export const TextEditor = forwardRef<TextEditorRef, TextEditorProps>(
             setupMarkdownPaste(holderEl);
           }
 
+          // History (undo/redo) for the fixed toolbar + Ctrl+Z/Y. Not for readOnly.
+          // Dynamically imported because the package evaluates DOM globals at module load.
+          if (!readOnlyRef.current) {
+            import("editorjs-undo")
+              .then(({ default: UndoCls }) => {
+                if (!editorRef.current) return;
+                undoRef.current = new UndoCls({ editor: editorRef.current });
+                if (initialDataRef.current) undoRef.current.initialize(initialDataRef.current);
+              })
+              .catch(() => {
+                undoRef.current = null;
+              });
+          }
+          setToolbarReady(true);
+
           onReadyRef.current?.();
         },
         onChange: () => {
@@ -1048,6 +1091,8 @@ export const TextEditor = forwardRef<TextEditorRef, TextEditorProps>(
           editorRef.current.destroy();
           editorRef.current = null;
         }
+        undoRef.current = null;
+        setToolbarReady(false);
         isInitializing.current = false;
       };
     }, [initEditor]);
@@ -1098,6 +1143,15 @@ export const TextEditor = forwardRef<TextEditorRef, TextEditorProps>(
           style={minHeight ? { minHeight: `${minHeight}px` } : undefined}
           {...props}
         >
+          {toolbar && !readOnly && !disabled && (
+            <TextEditorToolbar
+              editorRef={editorRef}
+              undoRef={undoRef}
+              holderRef={holderRef}
+              ready={toolbarReady}
+              theme={theme}
+            />
+          )}
           <div id={holderId} />
         </div>
       </>