@trycourier/react-designer 0.0.0-canary-20251210083502 → 0.0.0-canary-20251210115724

package/dist/cjs/styles.css

@@ -922,6 +922,9 @@ body {
 .courier-left-0 {
   left: 0px;
 }
+.courier-left-1 {
+  left: 0.25rem;
+}
 .courier-left-2 {
   left: 0.5rem;
 }
@@ -1024,6 +1027,10 @@ body {
   margin-left: -1rem;
   margin-right: -1rem;
 }
+.courier-mx-0\.5 {
+  margin-left: 0.125rem;
+  margin-right: 0.125rem;
+}
 .courier-mx-1 {
   margin-left: 0.25rem;
   margin-right: 0.25rem;
@@ -1269,9 +1276,6 @@ body {
 .courier-h-px {
   height: 1px;
 }
-.courier-max-h-60 {
-  max-height: 15rem;
-}
 .courier-max-h-\[88px\] {
   max-height: 88px;
 }
@@ -1395,6 +1399,9 @@ body {
 .courier-min-w-\[16rem\] {
   min-width: 16rem;
 }
+.courier-min-w-\[1ch\] {
+  min-width: 1ch;
+}
 .courier-min-w-\[2rem\] {
   min-width: 2rem;
 }
@@ -2143,6 +2150,9 @@ body {
 .courier-text-center {
   text-align: center;
 }
+.courier-align-middle {
+  vertical-align: middle;
+}
 .courier-font-mono {
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
@@ -2241,10 +2251,6 @@ body {
 .courier-text-accent-foreground {
   color: var(--accent-foreground);
 }
-.courier-text-amber-800 {
-  --tw-text-opacity: 1;
-  color: rgb(146 64 14 / var(--tw-text-opacity, 1));
-}
 .courier-text-blue-700 {
   --tw-text-opacity: 1;
   color: rgb(29 78 216 / var(--tw-text-opacity, 1));
@@ -4512,10 +4518,6 @@ body {
 .hover\:courier-bg-card:hover {
   background-color: var(--card);
 }
-.hover\:courier-bg-gray-100:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
-}
 .hover\:courier-bg-neutral-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1));
@@ -4557,20 +4559,12 @@ body {
 .focus\:courier-bg-accent:focus {
   background-color: var(--accent);
 }
-.focus\:courier-bg-gray-100:focus {
-  --tw-bg-opacity: 1;
-  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
-}
 .focus\:courier-text-accent-foreground:focus {
   color: var(--accent-foreground);
 }
 .focus\:courier-text-foreground:focus {
   color: var(--foreground);
 }
-.focus\:courier-outline-none:focus {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-}
 .focus-visible\:courier-outline-none:focus-visible {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -4977,9 +4971,6 @@ body {
 .\[\&\>svg\]\:courier-shrink-0>svg {
   flex-shrink: 0;
 }
-.\[\&_\.ProseMirror\]\:courier-flex .ProseMirror {
-  display: flex;
-}
 .\[\&_\.ProseMirror\]\:courier-h-\[25px\] .ProseMirror {
   height: 25px;
 }
@@ -4989,9 +4980,6 @@ body {
 .\[\&_\.ProseMirror\]\:courier-flex-1 .ProseMirror {
   flex: 1 1 0%;
 }
-.\[\&_\.ProseMirror\]\:courier-items-end .ProseMirror {
-  align-items: flex-end;
-}
 .\[\&_\.ProseMirror\]\:courier-border-none .ProseMirror {
   border-style: none;
 }

package/dist/components/BrandEditor/BrandEditor.d.ts

@@ -1,6 +1,6 @@
 import type { Theme } from "../ui-kit/ThemeProvider/ThemeProvider.types";
 import { type EditorProps } from "./Editor";
-export interface BrandEditorProps extends Omit<EditorProps, "disableVariableAutocomplete"> {
+export interface BrandEditorProps extends EditorProps {
     theme?: Theme | string;
     colorScheme?: "light" | "dark";
 }

package/dist/components/BrandEditor/Editor/BrandFooter/BrandFooter.d.ts

@@ -14,5 +14,5 @@ interface BrandFooterProps {
         transaction: Transaction;
     }) => void;
 }
-export declare const BrandFooter: import("react").MemoExoticComponent<({ variables, facebookLink, linkedinLink, instagramLink, mediumLink, xLink, readOnly, value, onUpdate, }: BrandFooterProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const BrandFooter: import("react").MemoExoticComponent<({ facebookLink, linkedinLink, instagramLink, mediumLink, xLink, readOnly, value, onUpdate, }: BrandFooterProps) => import("react/jsx-runtime").JSX.Element>;
 export {};

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

@@ -8,5 +8,5 @@ export interface EmailEditorProps {
     onDestroy?: () => void;
     onUpdate?: (editor: Editor) => void;
 }
-declare const EmailEditor: ({ value, readOnly, variables, onDestroy, onUpdate, subject: propSubject, }: EmailEditorProps) => import("react/jsx-runtime").JSX.Element;
+declare const EmailEditor: ({ value, readOnly, onDestroy, onUpdate, subject: propSubject, }: EmailEditorProps) => import("react/jsx-runtime").JSX.Element;
 export default EmailEditor;

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

@@ -3,7 +3,5 @@ import type { Editor } from "@tiptap/react";
 export interface SideBarItemDetailsProps {
     element?: ProseMirrorNode;
     editor: Editor | null;
-    /** Whether to disable variable autocomplete suggestions in sidebar inputs */
-    disableVariableAutocomplete?: boolean;
 }
-export declare const SideBarItemDetails: ({ element, editor, disableVariableAutocomplete, }: SideBarItemDetailsProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const SideBarItemDetails: ({ element, editor }: SideBarItemDetailsProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/extensions/Button/ButtonForm.d.ts

@@ -3,8 +3,6 @@ import type { Editor } from "@tiptap/react";
 interface ButtonFormProps {
     element?: ProseMirrorNode;
     editor: Editor | null;
-    /** Whether to disable variable autocomplete suggestions */
-    disableVariableAutocomplete?: boolean;
 }
-export declare const ButtonForm: ({ element, editor, disableVariableAutocomplete, }: ButtonFormProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const ButtonForm: ({ element, editor }: ButtonFormProps) => import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/components/extensions/ImageBlock/components/ImageBlockForm.d.ts

@@ -3,7 +3,5 @@ import type { Editor } from "@tiptap/react";
 export interface ImageBlockFormProps {
     element?: ProseMirrorNode;
     editor: Editor | null;
-    /** Whether to disable variable autocomplete suggestions */
-    disableVariableAutocomplete?: boolean;
 }
-export declare const ImageBlockForm: ({ element, editor, disableVariableAutocomplete, }: ImageBlockFormProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const ImageBlockForm: ({ element, editor }: ImageBlockFormProps) => import("react/jsx-runtime").JSX.Element | null;

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

@@ -1,4 +1,7 @@
 import { Extension, Node } from "@tiptap/core";
-import type { VariableNodeOptions, VariableOptions } from "./Variable.types";
+import type { VariableNodeOptions } from "./Variable.types";
 export declare const VariableNode: Node<VariableNodeOptions, any>;
-export declare const Variable: Extension<VariableOptions, any>;
+/**
+ * Extension that inserts an empty variable chip when user types {{
+ */
+export declare const VariableInputRule: Extension<any, any>;

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

@@ -1,30 +1,3 @@
-import type { Editor, Range } from "@tiptap/core";
-import type { SuggestionOptions, SuggestionProps } from "@tiptap/suggestion";
-interface Props {
-    editor: Editor;
-    range: Range;
-    clientRect: () => DOMRect | null;
-    items: string[];
-    command: (props: {
-        editor: Editor;
-        range: Range;
-        props: string;
-    }) => void;
-}
-export interface VariableOptions {
-    HTMLAttributes?: Record<string, unknown>;
-    suggestion?: Partial<SuggestionOptions>;
-    variables?: Record<string, unknown>;
-    disableSuggestions?: boolean;
-}
-export interface VariableCommandProps {
-    editor: Editor;
-    range: Range;
-    props: string;
-}
-export interface VariableSuggestionProps extends Props {
-    selected: number;
-}
 export interface VariableNodeOptions {
     HTMLAttributes?: Record<string, unknown>;
 }
@@ -32,11 +5,3 @@ export interface VariableNodeAttributes {
     id: string;
     isInvalid: boolean;
 }
-export interface VariableSuggestionsProps extends SuggestionProps {
-    items: string[];
-    command: (item: string) => void;
-    editor: Editor;
-    query: string;
-    selected: number;
-}
-export {};

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

@@ -1,4 +1,3 @@
 export * from "./Variable";
 export * from "./Variable.types";
 export * from "./VariablePaste";
-export * from "./VariableTypeHandler";

package/dist/components/extensions/extension-kit.d.ts

@@ -1,8 +1,6 @@
 import type { Node } from "@tiptap/pm/model";
 export declare const ExtensionKit: (options?: {
-    variables?: Record<string, unknown>;
     setSelectedNode?: (node: Node) => void;
     shouldHandleClick?: () => boolean;
-    disableVariableAutocomplete?: boolean;
 }) => (import("@tiptap/core").Node<any, any> | import("@tiptap/core").Extension<any, any> | import("@tiptap/core").Mark<import("@tiptap/extension-underline").UnderlineOptions, any>)[];
 export default ExtensionKit;

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

@@ -27,4 +27,4 @@ export { Paragraph } from "./Paragraph";
 export { Selection } from "./Selection";
 export { SlashMenu } from "./SlashMenu";
 export { UniqueId } from "./UniqueId";
-export { Variable, VariableNode, VariablePaste, VariableTypeHandler } from "./Variable";
+export { VariableNode, VariableInputRule, VariablePaste } from "./Variable";

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

@@ -1,11 +1,8 @@
 import * as React from "react";
 export interface TextInputProps extends Omit<React.ComponentProps<"input">, "as" | "onChange"> {
     as?: "Input" | "Textarea";
-    variables?: string[];
     autoResize?: boolean;
     onChange?: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
     onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
-    /** Whether to disable variable autocomplete suggestions */
-    disableVariableAutocomplete?: boolean;
 }
 export declare const TextInput: React.ForwardRefExoticComponent<Omit<TextInputProps, "ref"> & React.RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;

package/dist/components/ui/VariableEditor/VariableChipBase.d.ts

@@ -0,0 +1,35 @@
+import React from "react";
+export declare const MAX_VARIABLE_LENGTH = 50;
+export declare const MAX_DISPLAY_LENGTH = 24;
+export interface VariableColors {
+    bgColor: string;
+    borderColor: string;
+    iconColor: string;
+    textColor: string;
+}
+export interface VariableChipBaseProps {
+    /** The variable name/id */
+    variableId: string;
+    /** Whether the variable is currently invalid */
+    isInvalid: boolean;
+    /** Called when attributes should be updated */
+    onUpdateAttributes: (attrs: {
+        id: string;
+        isInvalid: boolean;
+    }) => void;
+    /** Called when the node should be deleted */
+    onDelete: () => void;
+    /** Icon component to render */
+    icon: React.ReactNode;
+    /** Optional value to display (e.g., for variables with known values) */
+    value?: string;
+    /** Whether to use single-click (true) or double-click (false) to edit */
+    singleClickToEdit?: boolean;
+    /** Additional class names for the outer span */
+    className?: string;
+    /** Override text color (e.g., for button context) */
+    textColorOverride?: string;
+    /** Custom color getter function */
+    getColors?: (isInvalid: boolean, hasValue: boolean) => VariableColors;
+}
+export declare const VariableChipBase: React.FC<VariableChipBaseProps>;

package/dist/components/ui/VariableEditor/shared.d.ts

@@ -9,8 +9,8 @@ export declare const VariableChipIcon: React.FC<{
     color?: string;
 }>;
 /**
- * Standalone variable view component
- * Does not depend on external jotai stores
+ * Standalone variable view component with editing support
+ * Used in VariableInput and VariableTextarea components
  */
 export declare const SimpleVariableView: React.FC<NodeViewProps>;
 /**
@@ -34,16 +34,12 @@ export interface VariableEditorBaseProps {
     value?: string;
     /** Called when the value changes */
     onChange?: (value: string) => void;
-    /** List of available variable names for autocomplete */
-    variables?: string[];
     /** Placeholder text */
     placeholder?: string;
     /** Additional CSS classes */
     className?: string;
     /** Whether the input is disabled */
     disabled?: boolean;
-    /** Whether to disable variable autocomplete suggestions */
-    disableVariableAutocomplete?: boolean;
     /** Called when the input gains focus */
     onFocus?: () => void;
     /** Called when the input loses focus */