@trycourier/react-designer 0.0.0-canary-20251030183313 → 0.0.0-canary-20251105135516

package/dist/cjs/styles.css

@@ -1640,10 +1640,6 @@ 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);
 }
@@ -1743,10 +1739,6 @@ 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));

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

@@ -26,3 +26,6 @@ export declare const isTemplateTransitioningAtom: import("jotai").PrimitiveAtom<
 export declare const isSidebarExpandedAtom: import("jotai").PrimitiveAtom<boolean> & {
     init: boolean;
 };
+export declare const variableValuesAtom: import("jotai").PrimitiveAtom<Record<string, string>> & {
+    init: Record<string, string>;
+};

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

@@ -1,2 +1,6 @@
 import React from "react";
-export declare const VariableIcon: React.FC;
+interface VariableIconProps {
+    color?: string;
+}
+export declare const VariableIcon: React.FC<VariableIconProps>;
+export {};

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

@@ -0,0 +1,5 @@
+import { Extension } from "@tiptap/core";
+/**
+ * Extension that converts typed {{variableName}} patterns into variable nodes in real-time
+ */
+export declare const VariableTypeHandler: Extension<any, any>;

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

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

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

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

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

@@ -1 +1,2 @@
 export * from "./useNodeAttributes";
+export * from "./useVariables";

package/dist/components/hooks/useVariables.d.ts

@@ -0,0 +1,36 @@
+import type { ChannelType } from "@/store";
+export interface UseVariablesResult {
+    /**
+     * All available variables from the editor configuration
+     */
+    availableVariables: string[];
+    /**
+     * Variables that are actually used in the channel's content
+     */
+    usedVariables: string[];
+    /**
+     * Current variable values (for preview/testing)
+     */
+    variableValues: Record<string, string>;
+    /**
+     * Update a variable's value
+     */
+    addVariableValue: (key: string, value: string) => void;
+}
+/**
+ * Hook to access and manage variables for a specific channel
+ *
+ * @param channelType - The channel to get variables for (e.g., 'email', 'sms', 'slack')
+ * @returns Object containing available variables, used variables, current values, and update function
+ *
+ * @example
+ * ```tsx
+ * const { availableVariables, usedVariables, variableValues, addVariableValue } = useVariables('email');
+ *
+ * // availableVariables = ['user.name', 'user.email', 'orderTotal']
+ * // usedVariables = ['user.name', 'orderTotal']
+ *
+ * addVariableValue('user.name', 'John Doe');
+ * ```
+ */
+export declare const useVariables: (channelType?: ChannelType) => UseVariablesResult;

package/dist/components/utils/extractVariablesFromContent.d.ts

@@ -0,0 +1,13 @@
+import type { ElementalNode } from "../../types/elemental.types";
+/**
+ * Extracts all variable names used in the content in the format {{variableName}}
+ * Supports nested dot notation like {{user.profile.name}}
+ *
+ * Extracts variables from:
+ * - Text content (content properties)
+ * - Element attributes (href, src, alt_text, etc.)
+ * - Channel raw properties (subject, title, text)
+ * - Conditional logic (if, loop properties)
+ * - Localized content and attributes
+ */
+export declare const extractVariablesFromContent: (elements?: ElementalNode[]) => string[];