@trycourier/react-designer 0.0.10 → 0.2.0

package/dist/esm/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;
 }
@@ -2884,7 +2899,7 @@ body {
   color: rgb(163 163 163 / var(--tw-text-opacity, 1));
 }
 .ProseMirror>.react-renderer.node-paragraph .is-empty .courier-custom-code::after, .ProseMirror>.react-renderer.node-blockquote .is-empty .courier-custom-code::after, .ProseMirror>.react-renderer.node-customCode .is-empty .courier-custom-code::after {
-            content: 'Add custom HTML code...';
+            content: 'Use the right panel to add custom HTML code...';
           }
 .ProseMirror>.react-renderer.node-paragraph .is-empty .courier-custom-code::after, .ProseMirror>.react-renderer.node-blockquote .is-empty .courier-custom-code::after, .ProseMirror>.react-renderer.node-customCode .is-empty .courier-custom-code::after {
   position: absolute;
@@ -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/lib/utils/getTitle/index.d.ts

@@ -1,2 +1,2 @@
 export { getTitle, getTitleFromContent, getTitleForChannel } from "./getTitle";
-export { getSubjectStorageFormat, createTitleUpdate, extractCurrentTitle, } from "./preserveStorageFormat";
+export { getSubjectStorageFormat, createTitleUpdate, extractCurrentTitle, cleanSMSElements, cleanPushElements, cleanInboxElements, } from "./preserveStorageFormat";

package/dist/lib/utils/getTitle/preserveStorageFormat.d.ts

@@ -3,6 +3,14 @@ import type { ElementalContent, ElementalNode } from "@/types/elemental.types";
  * Cleans an Inbox element by removing styling properties from text and action elements.
  */
 export declare function cleanInboxElements(elements: ElementalNode[]): ElementalNode[];
+/**
+ * Cleans Push elements by removing styling properties from text elements.
+ */
+export declare function cleanPushElements(elements: ElementalNode[]): ElementalNode[];
+/**
+ * Cleans SMS elements by removing styling properties from text elements.
+ */
+export declare function cleanSMSElements(elements: ElementalNode[]): ElementalNode[];
 /**
  * Cleans the entire template content by applying Inbox cleaning logic to all Inbox channels.
  */
@@ -14,7 +22,7 @@ export declare function cleanTemplateContent(content: ElementalContent): Element
 export declare function getSubjectStorageFormat(content: ElementalContent | null | undefined, channelName: string): "raw" | "meta" | "none";
 /**
  * Creates the appropriate subject/title storage structure based on the detected format.
- * For Push and Inbox channels, extracts the first text element as title.
+ * For Push, SMS, and Inbox channels, uses elements array.
  */
 export declare function createTitleUpdate(originalContent: ElementalContent | null | undefined, channelName: string, newTitle: string, elementalNodes: ElementalNode[]): {
     elements: ElementalNode[];

package/dist/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;
 }
@@ -2884,7 +2899,7 @@ body {
   color: rgb(163 163 163 / var(--tw-text-opacity, 1));
 }
 .ProseMirror>.react-renderer.node-paragraph .is-empty .courier-custom-code::after, .ProseMirror>.react-renderer.node-blockquote .is-empty .courier-custom-code::after, .ProseMirror>.react-renderer.node-customCode .is-empty .courier-custom-code::after {
-            content: 'Add custom HTML code...';
+            content: 'Use the right panel to add custom HTML code...';
           }
 .ProseMirror>.react-renderer.node-paragraph .is-empty .courier-custom-code::after, .ProseMirror>.react-renderer.node-blockquote .is-empty .courier-custom-code::after, .ProseMirror>.react-renderer.node-customCode .is-empty .courier-custom-code::after {
   position: absolute;
@@ -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/types/elemental.types.d.ts

@@ -139,8 +139,8 @@ export interface ElementalActionNode extends IsElementalNode {
 }
 export interface ElementalDividerNode extends IsElementalNode {
     type: "divider";
-    dividerColor?: string;
-    borderWidth?: string;
+    color?: string;
+    width?: string;
     padding?: string;
 }
 export interface ElementalGroupNode extends IsElementalNode {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trycourier/react-designer",
-  "version": "0.0.10",
+  "version": "0.2.0",
   "description": "React-based rich text designer component",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",