@trycourier/react-designer 0.0.0-canary-20250526103347 → 0.0.0-canary-20250605142011

package/dist/esm/styles.css

@@ -1458,6 +1458,9 @@ body {
   margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(1rem * var(--tw-space-y-reverse));
 }
+.courier-self-end {
+  align-self: flex-end;
+}
 .courier-self-center {
   align-self: center;
 }
@@ -1491,9 +1494,6 @@ body {
 .courier-rounded-md {
   border-radius: calc(var(--radius) - 2px);
 }
-.courier-rounded-none {
-  border-radius: 0px;
-}
 .courier-rounded-sm {
   border-radius: calc(var(--radius) - 4px);
 }
@@ -1538,18 +1538,9 @@ body {
 .courier-border-l {
   border-left-width: 1px;
 }
-.courier-border-l-0 {
-  border-left-width: 0px;
-}
-.courier-border-r-0 {
-  border-right-width: 0px;
-}
 .courier-border-t {
   border-top-width: 1px;
 }
-.courier-border-t-0 {
-  border-top-width: 0px;
-}
 .courier-border-dashed {
   border-style: dashed;
 }
@@ -1802,6 +1793,10 @@ body {
 .courier-p-\[3px\] {
   padding: 3px;
 }
+.\!courier-py-\[5px\] {
+  padding-top: 5px !important;
+  padding-bottom: 5px !important;
+}
 .courier-px-0 {
   padding-left: 0px;
   padding-right: 0px;
@@ -1878,6 +1873,12 @@ body {
   padding-top: 1px;
   padding-bottom: 1px;
 }
+.\!courier-pl-2 {
+  padding-left: 0.5rem !important;
+}
+.\!courier-pr-2 {
+  padding-right: 0.5rem !important;
+}
 .courier-pb-0 {
   padding-bottom: 0px;
 }
@@ -2089,6 +2090,11 @@ body {
 .courier-opacity-\[0\.999\] {
   opacity: 0.999;
 }
+.\!courier-shadow-md {
+  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important;
+  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color) !important;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
+}
 .courier-shadow {
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
@@ -2344,6 +2350,12 @@ body {
 .courier-theme-editor-main >div .ProseMirror {
   padding: 0px;
 }
+.courier-theme-editor-main >div .ProseMirror .react-renderer.node-paragraph .selected-element .node-element::before {
+  display: none;
+}
+.courier-theme-editor-main >div .ProseMirror .react-renderer.node-paragraph .selected-element .courier-actions-panel {
+  display: none;
+}
 .courier-theme-editor-main >div .ProseMirror .react-renderer.node-paragraph p {
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -2358,6 +2370,7 @@ body {
   padding: 0px;
 }
 .courier-editor-main {
+  position: relative;
   width: 100%;
   max-width: 42rem;
   -webkit-user-select: none;
@@ -2409,6 +2422,8 @@ body {
   margin: 1.5rem;
   margin-right: 3.5rem;
   margin-top: 2.5rem;
+  display: flex;
+  flex-direction: column;
   border-radius: var(--radius);
   background-color: var(--card);
   padding-top: 0.5rem;
@@ -2421,6 +2436,12 @@ body {
   padding-left: 1rem;
   padding-right: 1rem;
 }
+.courier-sms-editor .ProseMirror>.react-renderer.node-paragraph .selected-element .node-element::before {
+  display: none;
+}
+.courier-sms-editor .ProseMirror>.react-renderer.node-paragraph .selected-element .courier-actions-panel {
+  display: none;
+}
 .courier-sms-editor .ProseMirror>.react-renderer:hover .draggable-item {
   padding-left: 1rem;
   padding-right: 1rem;
@@ -2441,7 +2462,7 @@ body {
   padding-right: 1rem;
 }
 .courier-push-editor::before {
-    content: '1s';
+    content: 'now';
   }
 .courier-push-editor::before {
   position: absolute;
@@ -2486,6 +2507,12 @@ body {
   padding-left: 1rem;
   padding-right: 1rem;
 }
+.courier-push-editor .ProseMirror>.react-renderer.node-paragraph .selected-element .node-element::before, .courier-push-editor .ProseMirror>.react-renderer.node-heading .selected-element .node-element::before {
+  display: none;
+}
+.courier-push-editor .ProseMirror>.react-renderer.node-paragraph .selected-element .courier-actions-panel, .courier-push-editor .ProseMirror>.react-renderer.node-heading .selected-element .courier-actions-panel {
+  display: none;
+}
 .courier-push-editor .ProseMirror>.react-renderer:hover .draggable-item {
   padding-left: 1rem;
   padding-right: 1rem;
@@ -2520,7 +2547,7 @@ body {
   padding-right: 2.5rem;
 }
 .courier-inbox-editor .ProseMirror::before {
-      content: '1s';
+      content: 'now';
     }
 .courier-inbox-editor .ProseMirror::before {
   position: absolute;
@@ -2567,6 +2594,12 @@ body {
 .courier-inbox-editor .ProseMirror>.react-renderer .draggable-item {
   padding: 0px;
 }
+.courier-inbox-editor .ProseMirror>.react-renderer.node-paragraph .selected-element .node-element::before, .courier-inbox-editor .ProseMirror>.react-renderer.node-heading .selected-element .node-element::before {
+  display: none;
+}
+.courier-inbox-editor .ProseMirror>.react-renderer.node-paragraph .selected-element .courier-actions-panel, .courier-inbox-editor .ProseMirror>.react-renderer.node-heading .selected-element .courier-actions-panel {
+  display: none;
+}
 .courier-inbox-editor .ProseMirror>.react-renderer:hover [data-cypress="draggable-handle"] {
   display: none;
 }
@@ -3053,15 +3086,20 @@ 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);
 }
-.hover\:courier-bg-accent-foreground:hover {
-  background-color: var(--accent-foreground);
-}
 .hover\:courier-bg-black\/5:hover {
   background-color: rgb(0 0 0 / 0.05);
 }
@@ -3097,6 +3135,10 @@ 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);
 }
@@ -3111,9 +3153,6 @@ body {
   --tw-text-opacity: 1;
   color: rgb(38 38 38 / var(--tw-text-opacity, 1));
 }
-.hover\:courier-text-secondary-foreground:hover {
-  color: var(--secondary-foreground);
-}
 .hover\:courier-outline-neutral-600:hover {
   outline-color: #525252;
 }

package/dist/store.d.ts

@@ -1,10 +1,11 @@
-export type Channel = "email" | "sms" | "push" | "inbox";
-export declare const CHANNELS: {
+export type ChannelType = "email" | "sms" | "push" | "inbox";
+export interface Channel {
     label: string;
-    value: Channel;
-}[];
-export declare const channelAtom: import("jotai").PrimitiveAtom<Channel> & {
-    init: Channel;
+    value: ChannelType;
+}
+export declare const CHANNELS: Channel[];
+export declare const channelAtom: import("jotai").PrimitiveAtom<ChannelType> & {
+    init: ChannelType;
 };
 export declare const pageAtom: import("jotai").PrimitiveAtom<"template" | "brand"> & {
     init: "template" | "brand";

package/dist/styles.css

@@ -1458,6 +1458,9 @@ body {
   margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(1rem * var(--tw-space-y-reverse));
 }
+.courier-self-end {
+  align-self: flex-end;
+}
 .courier-self-center {
   align-self: center;
 }
@@ -1491,9 +1494,6 @@ body {
 .courier-rounded-md {
   border-radius: calc(var(--radius) - 2px);
 }
-.courier-rounded-none {
-  border-radius: 0px;
-}
 .courier-rounded-sm {
   border-radius: calc(var(--radius) - 4px);
 }
@@ -1538,18 +1538,9 @@ body {
 .courier-border-l {
   border-left-width: 1px;
 }
-.courier-border-l-0 {
-  border-left-width: 0px;
-}
-.courier-border-r-0 {
-  border-right-width: 0px;
-}
 .courier-border-t {
   border-top-width: 1px;
 }
-.courier-border-t-0 {
-  border-top-width: 0px;
-}
 .courier-border-dashed {
   border-style: dashed;
 }
@@ -1802,6 +1793,10 @@ body {
 .courier-p-\[3px\] {
   padding: 3px;
 }
+.\!courier-py-\[5px\] {
+  padding-top: 5px !important;
+  padding-bottom: 5px !important;
+}
 .courier-px-0 {
   padding-left: 0px;
   padding-right: 0px;
@@ -1878,6 +1873,12 @@ body {
   padding-top: 1px;
   padding-bottom: 1px;
 }
+.\!courier-pl-2 {
+  padding-left: 0.5rem !important;
+}
+.\!courier-pr-2 {
+  padding-right: 0.5rem !important;
+}
 .courier-pb-0 {
   padding-bottom: 0px;
 }
@@ -2089,6 +2090,11 @@ body {
 .courier-opacity-\[0\.999\] {
   opacity: 0.999;
 }
+.\!courier-shadow-md {
+  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important;
+  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color) !important;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
+}
 .courier-shadow {
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
@@ -2344,6 +2350,12 @@ body {
 .courier-theme-editor-main >div .ProseMirror {
   padding: 0px;
 }
+.courier-theme-editor-main >div .ProseMirror .react-renderer.node-paragraph .selected-element .node-element::before {
+  display: none;
+}
+.courier-theme-editor-main >div .ProseMirror .react-renderer.node-paragraph .selected-element .courier-actions-panel {
+  display: none;
+}
 .courier-theme-editor-main >div .ProseMirror .react-renderer.node-paragraph p {
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -2358,6 +2370,7 @@ body {
   padding: 0px;
 }
 .courier-editor-main {
+  position: relative;
   width: 100%;
   max-width: 42rem;
   -webkit-user-select: none;
@@ -2409,6 +2422,8 @@ body {
   margin: 1.5rem;
   margin-right: 3.5rem;
   margin-top: 2.5rem;
+  display: flex;
+  flex-direction: column;
   border-radius: var(--radius);
   background-color: var(--card);
   padding-top: 0.5rem;
@@ -2421,6 +2436,12 @@ body {
   padding-left: 1rem;
   padding-right: 1rem;
 }
+.courier-sms-editor .ProseMirror>.react-renderer.node-paragraph .selected-element .node-element::before {
+  display: none;
+}
+.courier-sms-editor .ProseMirror>.react-renderer.node-paragraph .selected-element .courier-actions-panel {
+  display: none;
+}
 .courier-sms-editor .ProseMirror>.react-renderer:hover .draggable-item {
   padding-left: 1rem;
   padding-right: 1rem;
@@ -2441,7 +2462,7 @@ body {
   padding-right: 1rem;
 }
 .courier-push-editor::before {
-    content: '1s';
+    content: 'now';
   }
 .courier-push-editor::before {
   position: absolute;
@@ -2486,6 +2507,12 @@ body {
   padding-left: 1rem;
   padding-right: 1rem;
 }
+.courier-push-editor .ProseMirror>.react-renderer.node-paragraph .selected-element .node-element::before, .courier-push-editor .ProseMirror>.react-renderer.node-heading .selected-element .node-element::before {
+  display: none;
+}
+.courier-push-editor .ProseMirror>.react-renderer.node-paragraph .selected-element .courier-actions-panel, .courier-push-editor .ProseMirror>.react-renderer.node-heading .selected-element .courier-actions-panel {
+  display: none;
+}
 .courier-push-editor .ProseMirror>.react-renderer:hover .draggable-item {
   padding-left: 1rem;
   padding-right: 1rem;
@@ -2520,7 +2547,7 @@ body {
   padding-right: 2.5rem;
 }
 .courier-inbox-editor .ProseMirror::before {
-      content: '1s';
+      content: 'now';
     }
 .courier-inbox-editor .ProseMirror::before {
   position: absolute;
@@ -2567,6 +2594,12 @@ body {
 .courier-inbox-editor .ProseMirror>.react-renderer .draggable-item {
   padding: 0px;
 }
+.courier-inbox-editor .ProseMirror>.react-renderer.node-paragraph .selected-element .node-element::before, .courier-inbox-editor .ProseMirror>.react-renderer.node-heading .selected-element .node-element::before {
+  display: none;
+}
+.courier-inbox-editor .ProseMirror>.react-renderer.node-paragraph .selected-element .courier-actions-panel, .courier-inbox-editor .ProseMirror>.react-renderer.node-heading .selected-element .courier-actions-panel {
+  display: none;
+}
 .courier-inbox-editor .ProseMirror>.react-renderer:hover [data-cypress="draggable-handle"] {
   display: none;
 }
@@ -3053,15 +3086,20 @@ 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);
 }
-.hover\:courier-bg-accent-foreground:hover {
-  background-color: var(--accent-foreground);
-}
 .hover\:courier-bg-black\/5:hover {
   background-color: rgb(0 0 0 / 0.05);
 }
@@ -3097,6 +3135,10 @@ 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);
 }
@@ -3111,9 +3153,6 @@ body {
   --tw-text-opacity: 1;
   color: rgb(38 38 38 / var(--tw-text-opacity, 1));
 }
-.hover\:courier-text-secondary-foreground:hover {
-  color: var(--secondary-foreground);
-}
 .hover\:courier-outline-neutral-600:hover {
   outline-color: #525252;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trycourier/react-designer",
-  "version": "0.0.0-canary-20250526103347",
+  "version": "0.0.0-canary-20250605142011",
   "description": "React-based rich text designer component",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
@@ -71,6 +71,7 @@
     "lucide-react": "^0.473.0",
     "next-themes": "^0.4.5",
     "react-hook-form": "^7.53.2",
+    "sms-segments-calculator": "^1.2.0",
     "sonner": "^2.0.1",
     "tailwind-merge": "^1.14.0",
     "uuid": "^11.0.3",