@trycourier/react-designer 0.1.0 → 0.2.0

package/dist/cjs/styles.css

@@ -1534,6 +1534,11 @@ body {
 .courier-overflow-y-auto {
   overflow-y: auto;
 }
+.courier-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .courier-whitespace-nowrap {
   white-space: nowrap;
 }
@@ -1635,6 +1640,10 @@ body {
   --tw-border-opacity: 1;
   border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
 }
+.courier-border-\[\#BFDBFE\] {
+  --tw-border-opacity: 1;
+  border-color: rgb(191 219 254 / var(--tw-border-opacity, 1));
+}
 .courier-border-accent-foreground {
   border-color: var(--accent-foreground);
 }
@@ -1658,10 +1667,6 @@ body {
   --tw-border-opacity: 1;
   border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
 }
-.courier-border-gray-400 {
-  --tw-border-opacity: 1;
-  border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));
-}
 .courier-border-input {
   border-color: var(--input);
 }
@@ -1738,6 +1743,10 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(229 229 229 / var(--tw-bg-opacity, 1));
 }
+.courier-bg-\[\#EFF6FF\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
+}
 .courier-bg-\[\#F5F5F5\] {
   --tw-bg-opacity: 1;
   background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1));
@@ -1995,6 +2004,9 @@ body {
 .courier-pb-6 {
   padding-bottom: 1.5rem;
 }
+.courier-pl-1 {
+  padding-left: 0.25rem;
+}
 .courier-pl-2 {
   padding-left: 0.5rem;
 }
@@ -2013,9 +2025,6 @@ body {
 .courier-pr-2 {
   padding-right: 0.5rem;
 }
-.courier-pr-3 {
-  padding-right: 0.75rem;
-}
 .courier-pr-4 {
   padding-right: 1rem;
 }
@@ -2046,6 +2055,9 @@ body {
 .courier-text-center {
   text-align: center;
 }
+.courier-font-mono {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+}
 .courier-font-sans {
   font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
@@ -2110,6 +2122,9 @@ body {
 .courier-leading-relaxed {
   line-height: 1.625;
 }
+.courier-tracking-\[0\.64px\] {
+  letter-spacing: 0.64px;
+}
 .courier-tracking-widest {
   letter-spacing: 0.1em;
 }
@@ -3584,17 +3599,9 @@ body {
 .read-only\:courier-border-transparent:read-only {
   border-color: transparent;
 }
-.hover\:courier-border-\[\#3B82F6\]:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
-}
 .hover\:courier-border-accent-foreground:hover {
   border-color: var(--accent-foreground);
 }
-.hover\:courier-bg-\[\#3B82F6\]:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
-}
 .hover\:courier-bg-accent:hover {
   background-color: var(--accent);
 }
@@ -3633,10 +3640,6 @@ body {
 .hover\:courier-bg-opacity-20:hover {
   --tw-bg-opacity: 0.2;
 }
-.hover\:courier-text-\[\#ffffff\]:hover {
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
-}
 .hover\:courier-text-accent-foreground:hover {
   color: var(--accent-foreground);
 }
@@ -3718,9 +3721,6 @@ body {
 .disabled\:courier-opacity-50:disabled {
   opacity: 0.5;
 }
-.courier-group:hover .group-hover\:courier-stroke-primary {
-  stroke: var(--primary);
-}
 .courier-group.toaster .group-\[\.toaster\]\:courier-border-border {
   border-color: var(--border);
 }

package/dist/components/Providers/store.d.ts

@@ -1,5 +1,6 @@
 import type { ElementalContent } from "@/types/elemental.types";
 import type { TemplateError } from "@/lib/utils/errors";
+import type { ContentTransformer } from "../TemplateEditor/store";
 export type MessageRoutingMethod = "all" | "single";
 export type MessageRoutingChannel = string | MessageRouting;
 export interface MessageRouting {
@@ -122,4 +123,8 @@ export interface TemplateActions {
     setTemplateEditorContent: (content: ElementalContent | null) => void;
     createCustomError: (message: string, details?: Record<string, unknown>) => TemplateError;
     convertLegacyError: (error: string | TemplateError) => TemplateError;
+    /** @internal Experimental API - subject to change */
+    contentTransformer: ContentTransformer | null;
+    /** @internal Experimental API - subject to change */
+    setContentTransformer: (transformer: ContentTransformer | null) => void;
 }

package/dist/components/Providers/useTemplateActions.d.ts

@@ -1,4 +1,6 @@
+import { type ContentTransformer } from "../TemplateEditor/store";
 import { type TemplateError } from "@/lib/utils/errors";
+export type { ContentTransformer };
 export declare function useTemplateActions(): {
     getTemplate: (options?: {
         includeBrand?: boolean;
@@ -16,7 +18,25 @@ export declare function useTemplateActions(): {
     templateData: import("./store").TenantData | null;
     setTemplateData: (args_0: import("./store").TenantData | ((prev: import("./store").TenantData | null) => import("./store").TenantData | null) | null) => void;
     templateEditorContent: import("../TemplateEditor").ElementalContent | null | undefined;
-    setTemplateEditorContent: (args_0: import("../TemplateEditor").ElementalContent | ((prev: import("../TemplateEditor").ElementalContent | null | undefined) => import("../TemplateEditor").ElementalContent | null | undefined) | null | undefined) => void;
+    setTemplateEditorContent: (content: import("../TemplateEditor").ElementalContent | null | undefined) => void;
     createCustomError: (message: string, toastProps?: import("sonner").ExternalToast) => TemplateError;
     convertLegacyError: (error: string | TemplateError) => TemplateError;
+    /**
+     * @internal Experimental API - subject to change
+     * Synchronous function to transform content before it's stored in the atom.
+     * Useful for adding metadata (e.g., locales) that shouldn't affect editor display.
+     *
+     * @example
+     * ```ts
+     * setContentTransformer((content) => ({
+     *   ...content,
+     *   elements: content.elements?.map(el => ({
+     *     ...el,
+     *     locales: { 'fr': { content: translateToFrench(el.content) } }
+     *   }))
+     * }));
+     * ```
+     */
+    contentTransformer: ContentTransformer | null;
+    setContentTransformer: (args_0: ContentTransformer | ((prev: ContentTransformer | null) => ContentTransformer | null) | null) => void;
 };

package/dist/components/TemplateEditor/Channels/Email/Email.d.ts

@@ -28,6 +28,7 @@ export interface EmailProps extends Pick<TemplateEditorProps, "hidePublish" | "b
         channels?: ChannelType[];
         routing?: MessageRouting;
     }) => React.ReactNode;
+    hidePreviewPanelExitButton?: boolean;
     render?: ({ subject, handleSubjectChange, selectedNode, setSelectedNode, previewMode, templateEditor, ref, isBrandApply, brandSettings, items, content, strategy, syncEditorItems, brandEditorContent, templateData, togglePreviewMode, }: {
         subject: string | null;
         handleSubjectChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
@@ -45,6 +46,7 @@ export interface EmailProps extends Pick<TemplateEditorProps, "hidePublish" | "b
         brandEditorContent: string | null;
         templateData: TenantData | null;
         togglePreviewMode: (mode: "desktop" | "mobile" | undefined) => void;
+        hidePreviewPanelExitButton?: boolean;
     }) => React.ReactNode;
 }
 interface Items {

package/dist/components/TemplateEditor/Channels/MSTeams/MSTeamsEditor.d.ts

@@ -1,4 +1,5 @@
 import type { MSTeamsRenderProps } from "./MSTeams";
 export interface MSTeamsEditorProps extends MSTeamsRenderProps {
+    readOnly?: boolean;
 }
-export declare const MSTeamsEditor: ({ content, extensions, editable, autofocus, onUpdate, items, }: MSTeamsEditorProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const MSTeamsEditor: ({ content, extensions, editable, autofocus, onUpdate, items, readOnly, }: MSTeamsEditorProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/TemplateEditor/Channels/Slack/SlackEditor.d.ts

@@ -1,4 +1,5 @@
 import type { SlackRenderProps } from "./Slack";
 export interface SlackEditorProps extends SlackRenderProps {
+    readOnly?: boolean;
 }
-export declare const SlackEditor: ({ content, extensions, editable, autofocus, onUpdate, items, }: SlackEditorProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const SlackEditor: ({ content, extensions, editable, autofocus, onUpdate, items, readOnly, }: SlackEditorProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/TemplateEditor/ReadOnlyEditorContent.d.ts

@@ -0,0 +1,7 @@
+import type { TiptapDoc } from "@/lib/utils";
+import type { ElementalNode } from "@/types/elemental.types";
+export interface ReadOnlyEditorContentProps {
+    value?: TiptapDoc;
+    defaultValue: ElementalNode[];
+}
+export declare const ReadOnlyEditorContent: ({ value, defaultValue }: ReadOnlyEditorContentProps) => null;

package/dist/components/TemplateEditor/store.d.ts

@@ -3,9 +3,11 @@ import type { Editor } from "@tiptap/react";
 export declare const subjectAtom: import("jotai").PrimitiveAtom<string | null> & {
     init: string | null;
 };
-export declare const templateEditorContentAtom: import("jotai").PrimitiveAtom<ElementalContent | null | undefined> & {
-    init: ElementalContent | null | undefined;
+export type ContentTransformer = (content: ElementalContent) => ElementalContent;
+export declare const contentTransformerAtom: import("jotai").PrimitiveAtom<ContentTransformer | null> & {
+    init: ContentTransformer | null;
 };
+export declare const templateEditorContentAtom: import("jotai").WritableAtom<ElementalContent | null | undefined, [content: ElementalContent | null | undefined], void>;
 export declare const templateEditorPublishedAtAtom: import("jotai").PrimitiveAtom<string | null | undefined> & {
     init: string | null | undefined;
 };

package/dist/components/extensions/Variable/VariableIcon.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const VariableIcon: React.FC;

package/dist/components/ui/PreviewPanel/PreviewPanel.d.ts

@@ -3,6 +3,7 @@ interface PreviewPanelProps extends HTMLAttributes<HTMLDivElement> {
     previewMode: "desktop" | "mobile" | undefined;
     togglePreviewMode: (mode?: "desktop" | "mobile" | undefined) => void;
     hideMobileToggle?: boolean;
+    hideExitButton?: boolean;
 }
-export declare const PreviewPanel: ({ previewMode, togglePreviewMode, hideMobileToggle, ...props }: PreviewPanelProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PreviewPanel: ({ previewMode, togglePreviewMode, hideMobileToggle, hideExitButton, ...props }: PreviewPanelProps) => import("react/jsx-runtime").JSX.Element;
 export {};