@agentiffai/design 0.1.11 → 0.1.13

package/dist/index.cjs

@@ -4,12 +4,12 @@ var react = require('react');
 var styled11 = require('styled-components');
 var jsxRuntime = require('react/jsx-runtime');
 var button = require('@react-aria/button');
-var textfield = require('@react-aria/textfield');
 var meter = require('@react-aria/meter');
 var tabs$1 = require('@react-aria/tabs');
 var collections = require('@react-stately/collections');
 var tabs = require('@react-stately/tabs');
 var reactAriaComponents = require('react-aria-components');
+var textfield = require('@react-aria/textfield');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -462,7 +462,7 @@ var SuggestionButton = styled11__default.default.button`
   font-weight: ${tokens.typography.fontWeight.regular};
   text-align: center;
   border: 1px solid ${tokens.colors.border.default};
-  border-radius: 20px;
+  border-radius: ${tokens.borderRadius.full};
   cursor: pointer;
   transition: all ${tokens.transitions.fast};
   white-space: nowrap;
@@ -496,9 +496,9 @@ var SuggestionButton = styled11__default.default.button`
 `;
 var InputWrapper = styled11__default.default.div`
   display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 10px 14px;
+  align-items: flex-end; /* Align button to bottom when textarea expands */
+  gap: ${tokens.spacing.sm};
+  padding: ${tokens.spacing.sm} ${tokens.spacing.md};
   background-color: rgba(25, 25, 25, 0.4);
   border: 1px solid ${tokens.colors.border.subtle};
   border-radius: ${tokens.borderRadius.lg};
@@ -512,7 +512,7 @@ var InputWrapper = styled11__default.default.div`
     background-color: rgba(50, 50, 52, 0.6);
   }
 `;
-var InputField = styled11__default.default.input`
+var InputField = styled11__default.default.textarea`
   flex: 1;
   border: none;
   outline: none;
@@ -520,6 +520,13 @@ var InputField = styled11__default.default.input`
   font-size: ${tokens.typography.fontSize.sm};
   color: ${tokens.colors.text.secondary};
   background: transparent;
+  resize: none; /* Disable manual resize, we auto-resize */
+  min-height: 24px; /* Single line height */
+  max-height: 150px; /* Max ~6 lines before scrolling */
+  overflow-y: auto;
+  line-height: 1.5;
+  padding: 0;
+  margin: 0;
 
   &::placeholder {
     color: ${tokens.colors.text.tertiary};
@@ -575,31 +582,29 @@ var ChatInput = ({
   isReadOnly = false,
   autoFocus = false,
   className,
-  "aria-label": ariaLabel = "Chat message input",
-  ...ariaProps
+  "aria-label": ariaLabel = "Chat message input"
+  // Note: Additional AriaTextFieldProps are accepted but not spread to textarea
+  // since useTextField is not compatible with textarea elements
 }) => {
   const [internalValue, setInternalValue] = react.useState(value);
   const inputRef = react.useRef(null);
   const currentValue = value !== void 0 ? value : internalValue;
   const setValue = onChange || setInternalValue;
-  const { inputProps } = textfield.useTextField(
-    {
-      ...ariaProps,
-      "aria-label": ariaLabel,
-      value: currentValue,
-      onChange: (newValue) => {
-        setValue(newValue);
-      },
-      isDisabled,
-      isReadOnly
-    },
-    inputRef
-  );
+  const autoResize = react.useCallback(() => {
+    const textarea = inputRef.current;
+    if (textarea) {
+      textarea.style.height = "auto";
+      textarea.style.height = `${textarea.scrollHeight}px`;
+    }
+  }, []);
+  react.useEffect(() => {
+    autoResize();
+  }, [currentValue, autoResize]);
   const handleDirectChange = (e) => {
     setValue(e.target.value);
   };
   const handleKeyDown = (e) => {
-    if (e.key === "Enter") {
+    if (e.key === "Enter" && !e.shiftKey) {
       e.preventDefault();
       handleSubmit();
     }
@@ -608,6 +613,9 @@ var ChatInput = ({
     if (currentValue.trim() && onSubmit && !isDisabled && !isReadOnly) {
       onSubmit(currentValue.trim());
       setValue("");
+      if (inputRef.current) {
+        inputRef.current.style.height = "auto";
+      }
       inputRef.current?.focus();
     }
   };
@@ -631,16 +639,16 @@ var ChatInput = ({
       /* @__PURE__ */ jsxRuntime.jsx(
         InputField,
         {
-          ...inputProps,
           ref: inputRef,
-          type: "text",
+          "aria-label": ariaLabel,
           placeholder,
           onKeyDown: handleKeyDown,
           onChange: handleDirectChange,
           autoFocus,
           disabled: isDisabled,
           readOnly: isReadOnly,
-          value: currentValue
+          value: currentValue,
+          rows: 1
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -715,7 +723,7 @@ var NavigationContainer = styled11__default.default.div`
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding-top: 6px;
+  padding-top: ${tokens.spacing.xs};
   gap: ${tokens.spacing.xs};
   width: 100%;
   height: 100%;
@@ -768,7 +776,7 @@ var CategoryButton = styled11__default.default.button`
 var CategoryLabel = styled11__default.default.span`
   font-size: 9px;
   color: ${tokens.colors.text.tertiary};
-  margin-top: 2px;
+  margin-top: ${tokens.spacing.xs};
   text-align: center;
   max-width: 56px;
   overflow: hidden;
@@ -1617,7 +1625,7 @@ WorkflowStatusCard.displayName = "WorkflowStatusCard";
 var DarkNotificationCardContainer = styled11__default.default.div`
   display: flex;
   flex-direction: column;
-  padding: 6px;
+  padding: ${tokens.spacing.xs};
   background: ${tokens.colors.surface.base};
   border-radius: ${tokens.borderRadius.md};
   gap: ${tokens.spacing.xs};
@@ -1630,7 +1638,7 @@ var DarkSectionHeader = styled11__default.default.button`
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  padding: ${tokens.spacing.xs} 2px;
+  padding: ${tokens.spacing.xs} ${tokens.spacing.xs};
   border: none;
   background: transparent;
   font-family: ${tokens.typography.fontFamily.primary};
@@ -1672,18 +1680,18 @@ var DarkChevronIcon = styled11__default.default.span`
 var DarkSectionContent = styled11__default.default.div`
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  gap: ${tokens.spacing.xs};
   padding-left: ${tokens.spacing.xs};
-  margin-top: 2px;
+  margin-top: ${tokens.spacing.xs};
   min-width: 0;
   overflow: hidden;
 `;
 var DarkNotificationItemWrapper = styled11__default.default.button`
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: ${tokens.spacing.xs};
   width: 100%;
-  padding: ${tokens.spacing.xs} 6px;
+  padding: ${tokens.spacing.xs} ${tokens.spacing.xs};
   border: none;
   cursor: pointer;
   text-align: left;
@@ -1739,7 +1747,7 @@ var DarkItemIcon = styled11__default.default.span`
 
   /* Custom icon (emoji or colored icon) styling */
   ${(props) => props.$hasCustomIcon && `
-    padding: 2px;
+    padding: ${tokens.spacing.xs};
   `}
 `;
 var DarkItemText = styled11__default.default.span`
@@ -2017,7 +2025,7 @@ var TabButton = styled11__default.default.button`
   flex-shrink: 0;
 
   @media (max-width: ${tokens.breakpoints.mobile}px) {
-    padding: 10px ${tokens.spacing.md};
+    padding: ${tokens.spacing.sm} ${tokens.spacing.md};
     font-size: ${tokens.typography.fontSize.xs};
   }
 
@@ -2115,7 +2123,7 @@ styled11__default.default.button`
   overflow: hidden;
 
   @media (max-width: ${tokens.breakpoints.mobile}px) {
-    padding: 10px ${tokens.spacing.md};
+    padding: ${tokens.spacing.sm} ${tokens.spacing.md};
     font-size: 13px;
     gap: ${tokens.spacing.sm};
   }
@@ -2197,7 +2205,7 @@ var CategoryTitle = styled11__default.default.div`
   gap: ${tokens.spacing.sm};
 
   @media (max-width: ${tokens.breakpoints.mobile}px) {
-    gap: 6px;
+    gap: ${tokens.spacing.xs};
   }
 `;
 styled11__default.default.img`
@@ -2254,7 +2262,7 @@ var CategoryDisclosurePanel = styled11__default.default(reactAriaComponents.Disc
   overflow: hidden;
 
   @media (max-width: ${tokens.breakpoints.mobile}px) {
-    padding-left: 2px;
+    padding-left: ${tokens.spacing.xs};
   }
 
   &[data-entering] {
@@ -2276,7 +2284,7 @@ var ItemContainer = styled11__default.default.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.sm};
-  padding: 10px ${tokens.spacing.sm}; // Increased vertical padding from 4px to 10px for better breathing room
+  padding: ${tokens.spacing.sm} ${tokens.spacing.sm}; // Increased vertical padding from 4px to 8px for better breathing room
   border-radius: ${tokens.borderRadius.sm};
   cursor: pointer;
   transition: background-color ${tokens.transitions.fast};
@@ -2284,8 +2292,8 @@ var ItemContainer = styled11__default.default.div`
   overflow: hidden;
 
   @media (max-width: ${tokens.breakpoints.mobile}px) {
-    gap: 6px;
-    padding: ${tokens.spacing.sm} 6px; // Increased vertical padding from 4px to 8px for mobile
+    gap: ${tokens.spacing.xs};
+    padding: ${tokens.spacing.sm} ${tokens.spacing.xs}; // Increased vertical padding from 4px to 8px for mobile
   }
 
   &:hover {
@@ -2326,7 +2334,7 @@ var ItemHeader = styled11__default.default(reactAriaComponents.Button)`
   }
 `;
 var ItemDisclosurePanel = styled11__default.default(reactAriaComponents.DisclosurePanel)`
-  padding: 6px;
+  padding: ${tokens.spacing.xs};
   background-color: ${tokens.colors.overlay};
   border-radius: 0 0 ${tokens.borderRadius.md} ${tokens.borderRadius.md};
   margin-top: -${tokens.spacing.xs};
@@ -2337,7 +2345,7 @@ var ItemDisclosurePanel = styled11__default.default(reactAriaComponents.Disclosu
   overflow: hidden;
 
   @media (max-width: ${tokens.breakpoints.mobile}px) {
-    padding: 6px;
+    padding: ${tokens.spacing.xs};
   }
 
   &[data-entering] {
@@ -2658,7 +2666,7 @@ function ItemWithLogs({
     isExpanded && /* @__PURE__ */ jsxRuntime.jsx(ItemDisclosurePanel, { children: run.customContent ? (
       // Render custom content directly
       /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "16px" }, children: run.customContent })
-    ) : run.logs && run.logs.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(DarkNotificationCard, { sections: logSections }) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "#72767D", fontSize: "13px", padding: "8px" }, children: "No action logs available" }) })
+    ) : run.logs && run.logs.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(DarkNotificationCard, { sections: logSections }) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: tokens.colors.text.tertiary, fontSize: "13px", padding: "8px" }, children: "No action logs available" }) })
   ] });
 }
 function normalizeCategory(category) {
@@ -2693,7 +2701,7 @@ function WorkflowGroupItem({
     /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Heading, { level: 4, children: /* @__PURE__ */ jsxRuntime.jsxs(CategoryHeader, { slot: "trigger", style: { paddingLeft: "8px" }, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(CategoryTitle, { children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "13px", fontWeight: 500 }, children: group.workflowName }),
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontSize: "11px", color: "#72767D", marginLeft: "8px" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontSize: "11px", color: tokens.colors.text.tertiary, marginLeft: "8px" }, children: [
           "(",
           group.runs.length,
           ")"
@@ -2903,7 +2911,7 @@ function ConnectionsTabContent({
   return /* @__PURE__ */ jsxRuntime.jsxs(ConnectionsContainer, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(ConnectionDescription, { children: descriptionText }),
     /* @__PURE__ */ jsxRuntime.jsx(GoogleButton, { ...buttonProps, ref, $isConnected: isConnected, children: buttonText }),
-    isConnected && googleConnection?.scopes && googleConnection.scopes.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: "16px", fontSize: "13px", color: "#B9BBBE" }, children: [
+    isConnected && googleConnection?.scopes && googleConnection.scopes.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: "16px", fontSize: "13px", color: tokens.colors.text.secondary }, children: [
       "Connected services: ",
       googleConnection.scopes.join(", ")
     ] })
@@ -3354,12 +3362,12 @@ var NotificationItemWrapper = styled11__default.default.button`
   align-items: center;
   gap: ${tokens.spacing.md};
   width: 100%;
-  padding: ${(props) => props.$isSelected ? `${tokens.spacing.md} ${tokens.spacing.md}` : `10px ${tokens.spacing.md}`};
+  padding: ${(props) => props.$isSelected ? `${tokens.spacing.md} ${tokens.spacing.md}` : `${tokens.spacing.sm} ${tokens.spacing.md}`};
   border: none;
   cursor: pointer;
   text-align: left;
   transition: all ${tokens.transitions.normal};
-  border-radius: ${(props) => props.$isSelected ? tokens.borderRadius.lg : "10px"};
+  border-radius: ${(props) => props.$isSelected ? tokens.borderRadius.lg : tokens.borderRadius.lg};
 
   /* Default state - transparent background */
   background-color: ${(props) => props.$isSelected ? tokens.colors.secondary : "transparent"};
@@ -3408,7 +3416,7 @@ var ItemIcon2 = styled11__default.default.span`
 
   /* Custom icon (emoji or colored icon) styling */
   ${(props) => props.$hasCustomIcon && `
-    padding: 2px;
+    padding: ${tokens.spacing.xs};
   `}
 `;
 var ItemText = styled11__default.default.span`
@@ -3652,7 +3660,7 @@ var StyledUserMessage = styled11__default.default.button`
   && {
     background: ${tokens.colors.message.user} !important;
     color: ${tokens.colors.text.primary} !important;
-    border-radius: ${tokens.borderRadius.full} !important; /* Pill shape - fully rounded ends */
+    border-radius: ${tokens.borderRadius["2xl"]} !important; /* Rounded corners that work for multi-line */
   }
 
   /* Subtle shadow and glow effect */
@@ -5235,6 +5243,9 @@ var Container12 = styled11__default.default.div`
   white-space: pre-wrap;
   word-break: break-word;
   line-height: ${tokens.typography.lineHeight.normal};
+  /* Performance optimizations for streaming text */
+  text-rendering: optimizeSpeed;
+  contain: content;
 `;
 var Cursor = styled11__default.default.span`
   display: inline-block;
@@ -5294,20 +5305,9 @@ var MessageContainer = styled11__default.default.div`
   align-items: flex-start;
   padding: ${tokens.spacing.sm} 0;
   max-width: 100%;
-
-  /* Fade in and slide up animation */
-  animation: fadeInSlideUp ${tokens.animation.duration.medium} ease-out;
-
-  @keyframes fadeInSlideUp {
-    from {
-      opacity: 0;
-      transform: translateY(${tokens.spacing.sm});
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
+  /* GPU acceleration hint for smooth rendering during streaming */
+  will-change: contents;
+  contain: content;
 `;
 var AvatarContainer = styled11__default.default.div`
   flex-shrink: 0;
@@ -5342,9 +5342,8 @@ var ContentContainer = styled11__default.default.div`
   min-width: 0;
 `;
 var MessageContent = styled11__default.default.div`
-  background-color: ${tokens.colors.surface.glass};
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
+  /* Use solid color instead of backdrop-filter for performance during streaming */
+  background-color: ${tokens.colors.surface.elevated};
   padding: ${tokens.spacing.sm} ${tokens.spacing.md};
   border-radius: ${tokens.borderRadius.lg};
   border-top-left-radius: ${tokens.borderRadius.sm};
@@ -5354,24 +5353,25 @@ var MessageContent = styled11__default.default.div`
   font-family: ${tokens.typography.fontFamily.primary};
   word-wrap: break-word;
   white-space: pre-wrap;
+  /* Optimize text rendering */
+  text-rendering: optimizeSpeed;
 `;
 var LoadingDots3 = styled11__default.default.div`
   display: flex;
   gap: ${tokens.spacing.xs};
   padding: ${tokens.spacing.sm} ${tokens.spacing.md};
-  background-color: ${tokens.colors.surface.glass};
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
+  /* Use solid color instead of backdrop-filter for performance */
+  background-color: ${tokens.colors.surface.elevated};
   border-radius: ${tokens.borderRadius.lg};
   border-top-left-radius: ${tokens.borderRadius.sm};
   width: fit-content;
 `;
-var bounce = styled11.keyframes`
-  0%, 60%, 100% {
-    transform: translateY(0);
+var pulse3 = styled11.keyframes`
+  0%, 100% {
+    opacity: 0.4;
   }
-  30% {
-    transform: translateY(-${tokens.spacing.sm});
+  50% {
+    opacity: 1;
   }
 `;
 var LoadingDot = styled11__default.default.div`
@@ -5379,7 +5379,8 @@ var LoadingDot = styled11__default.default.div`
   height: ${tokens.spacing.sm};
   border-radius: ${tokens.borderRadius.full};
   background-color: ${tokens.colors.text.tertiary};
-  animation: ${bounce} 1.4s ease-in-out infinite;
+  /* Use simple opacity animation instead of transform bounce */
+  animation: ${pulse3} 1.4s ease-in-out infinite;
   animation-delay: ${(props) => props.delay}s;
 `;
 var FileAttachmentContainer = styled11__default.default.div`
@@ -6770,6 +6771,161 @@ function LinkedInIcon({
   return /* @__PURE__ */ jsxRuntime.jsx("span", { className, style: { display: "inline-flex", width: size, height: size }, children: svgElement });
 }
 LinkedInIcon.displayName = "LinkedInIcon";
+var StyledIconWrapper3 = styled11__default.default.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+  width: ${({ $size }) => `${$size}px`};
+  height: ${({ $size }) => `${$size}px`};
+  border-radius: ${({ theme }) => theme?.radii?.sm ?? "4px"};
+
+  &:hover:not(:disabled) {
+    opacity: 0.8;
+    transform: scale(1.05);
+  }
+
+  &:active:not(:disabled) {
+    opacity: 0.6;
+    transform: scale(0.95);
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${({ theme }) => (theme?.colors?.primary && typeof theme.colors.primary === "object" ? theme.colors.primary.light : theme?.colors?.primary) ?? "#0066FF"};
+    outline-offset: 2px;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  /* Remove default focus outline, using focus-visible instead */
+  &:focus {
+    outline: none;
+  }
+
+  svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+`;
+function PostizIcon({
+  variant = "colored",
+  size = 24,
+  className,
+  style,
+  "aria-label": ariaLabel = "Postiz",
+  onPress,
+  ...ariaProps
+}) {
+  const ref = react.useRef(null);
+  const isInteractive = Boolean(onPress);
+  const { buttonProps } = button.useButton(
+    {
+      ...ariaProps,
+      onPress,
+      "aria-label": ariaLabel,
+      isDisabled: !isInteractive
+    },
+    ref
+  );
+  const role = isInteractive ? "button" : "img";
+  const ariaHidden = !isInteractive && !ariaLabel;
+  const colors = {
+    colored: {
+      purple: "#612bd3",
+      dark: "#131019",
+      white: "#fff",
+      stroke: "#131019"
+    },
+    black: {
+      purple: "black",
+      dark: "black",
+      white: "black",
+      stroke: "black"
+    },
+    white: {
+      purple: "white",
+      dark: "white",
+      white: "white",
+      stroke: "white"
+    }
+  };
+  const c = colors[variant];
+  const svgElement = /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "26.74 0.02 460.94 509.34",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      role,
+      "aria-label": ariaLabel,
+      "aria-hidden": ariaHidden,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M103.4 82.6c.4 5.6.8 12 1.4 19.1L125 362.4c2.3 29.1 3.4 43.8 9.9 54.4 5.7 9.4 14.4 16.7 24.5 21 11.6 4.9 26.1 3.7 55.2 1.4l199.8-15.4c18.9-1.5 31.7-2.5 41.2-4.8-3.2 7.5-8.1 14.3-14.5 19.5-9.6 8-23.9 11.4-52.4 17.9l-195 45c-28.5 6.5-42.8 9.9-54.8 6.8-10.7-2.7-20.3-8.6-27.3-17.1-8-9.6-11.4-23.9-17.9-52.4L34.7 184c-6.5-28.5-9.9-42.8-6.8-54.8 2.7-10.7 8.6-20.3 17.1-27.3 9.6-8 23.9-11.4 52.4-17.9z",
+            fill: c.purple
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M112.8 101.1c-1.1-14.8-2-25.2-1.9-33.6 0-8.2.9-13.6 2.8-18 3.6-8.6 9.8-15.8 17.7-20.8 4.1-2.5 9.2-4.2 17.4-5.4 8.2-1.3 18.8-2.2 33.5-3.3L382 4.4c14.8-1.1 25.2-2 33.6-1.9 8.2 0 13.6.9 18 2.8 8.6 3.6 15.8 9.8 20.8 17.7 2.5 4.1 4.2 9.2 5.4 17.4s2.2 18.8 3.3 33.5l20.2 260.8c1.1 14.8 2 25.2 1.9 33.6 0 8.2-.9 13.6-2.8 18-3.6 8.6-9.8 15.8-17.7 20.8-4.1 2.5-9.2 4.2-17.4 5.4-8.2 1.3-18.8 2.2-33.5 3.3l-199.7 15.4c-14.8 1.1-25.2 2-33.6 1.9-8.2 0-13.6-.9-18-2.8-8.6-3.6-15.8-9.8-20.8-17.7-2.5-4.1-4.2-9.2-5.4-17.4-1.3-8.2-2.2-18.8-3.3-33.5z",
+            fill: "none",
+            stroke: c.stroke,
+            strokeWidth: "4.9373"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "m182.9 27.9 199.7-15.4c14.9-1.2 25-1.9 33-1.9 7.7 0 11.9.9 14.9 2.2 7 3 13 8 17 14.6 1.7 2.9 3.2 6.8 4.5 14.5 1.3 7.8 2.1 18 3.2 32.9l20.2 260.8c1.2 14.9 1.9 25 1.9 33 0 7.7-.9 11.9-2.2 14.9-3 7-8 13-14.6 17-2.9 1.7-6.8 3.2-14.5 4.5-7.8 1.3-18 2.1-32.9 3.2l-199.7 15.3c-14.8 1.2-25 1.9-33 1.9-7.7 0-11.9-.9-14.9-2.2-7-3-13-8-17-14.6-1.7-2.9-3.2-6.8-4.5-14.5-1.3-7.8-2.1-18-3.2-32.9l-20.2-260.8c-1.2-14.8-1.9-25-1.9-33 0-7.7.9-11.9 2.2-14.9 3-7 8-13 14.6-17 2.9-1.7 6.8-3.2 14.5-4.5 7.9-1.1 18.1-1.9 32.9-3.1",
+            fill: c.white
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "m269.4 88.3 1.9 24.8c3.5-4.3 7.9-7.9 13.4-11 5.4-3.3 12.3-5.2 20.4-5.8 7.4-.6 14.7.3 21.4 2.7 7 2.4 13.3 6.4 18.8 12.5 5.7 5.7 10.6 13.7 14.5 23.8s6.3 22.5 7.5 37.2c.8 10.5.7 21.2-.5 31.9-1 10.7-3.4 20.4-7.3 29.1-4 8.7-9.7 16-17.2 21.9-7.3 5.6-16.7 8.9-28.4 9.8-8.3.7-15 .1-20-1.8-5-2.1-8.8-4.6-11.5-7.4l6.2 80-46.5 15.5L221.8 92zm26.4 149c5.7-.4 10.4-2.7 14.1-6.7 3.7-4.3 6.3-9.5 8-15.8 2-6.3 3.1-13.3 3.4-20.8.5-7.7.5-15.3-.1-22.9-.9-12.1-2.8-21.6-5.5-28.4-2.5-6.8-5.3-11.9-8.4-14.9-3.2-3.3-6.1-5.2-9.1-5.9-2.7-.7-4.9-1-6.3-.8-4 .3-7.7 2.1-11.2 5.1-3.6 3-5.9 7.2-7.3 12.9l7.1 91.9c1.2 1.7 3.2 3.3 5.6 4.9 2.5 1.2 5.7 1.7 9.7 1.4",
+            fill: c.dark
+          }
+        )
+      ]
+    }
+  );
+  if (isInteractive) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      StyledIconWrapper3,
+      {
+        ...buttonProps,
+        ref,
+        className,
+        style,
+        $size: size,
+        children: svgElement
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className,
+      style: { display: "inline-flex", width: size, height: size, ...style },
+      children: svgElement
+    }
+  );
+}
+PostizIcon.displayName = "PostizIcon";
 var ColoredVariant = () => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
   /* @__PURE__ */ jsxRuntime.jsx(
     "path",
@@ -7272,7 +7428,7 @@ var StyledXIcon = styled11__default.default.svg`
     &:focus-visible {
       outline: 2px solid ${theme?.colors?.primary ?? "#007bff"};
       outline-offset: 2px;
-      border-radius: 2px;
+      border-radius: ${tokens.borderRadius.sm};
     }
   `}
 `;
@@ -7425,15 +7581,15 @@ YouTubeIcon.displayName = "YouTubeIcon";
 var PLATFORM_CONFIGS = {
   x: {
     icon: /* @__PURE__ */ jsxRuntime.jsx(XIcon, { variant: "white", size: 20 }),
-    color: "#FFFFFF",
-    bgColor: "#000000",
+    color: tokens.colors.text.primary,
+    bgColor: tokens.colors.platform.x,
     maxChars: 280,
     name: "X (Twitter)",
     description: "Concise, punchy posts with 1-2 hashtags"
   },
   linkedin: {
     icon: /* @__PURE__ */ jsxRuntime.jsx(LinkedInIcon, { variant: "colored", size: 20 }),
-    color: "#0A66C2",
+    color: tokens.colors.platform.linkedin,
     bgColor: "#f3f6f8",
     maxChars: 3e3,
     name: "LinkedIn",
@@ -7441,7 +7597,7 @@ var PLATFORM_CONFIGS = {
   },
   instagram: {
     icon: /* @__PURE__ */ jsxRuntime.jsx(InstagramIcon, { variant: "colored", size: 20 }),
-    color: "#E4405F",
+    color: tokens.colors.platform.instagram,
     bgColor: "#fafafa",
     maxChars: 2200,
     name: "Instagram",
@@ -7449,7 +7605,7 @@ var PLATFORM_CONFIGS = {
   },
   facebook: {
     icon: /* @__PURE__ */ jsxRuntime.jsx(FacebookIcon, { variant: "colored", size: 20 }),
-    color: "#1877F2",
+    color: tokens.colors.platform.facebook,
     bgColor: "#f0f2f5",
     maxChars: 63206,
     name: "Facebook",
@@ -7457,7 +7613,7 @@ var PLATFORM_CONFIGS = {
   },
   youtube: {
     icon: /* @__PURE__ */ jsxRuntime.jsx(YouTubeIcon, { variant: "colored", size: 20 }),
-    color: "#FF0000",
+    color: tokens.colors.platform.youtube,
     bgColor: "#f9f9f9",
     maxChars: 5e3,
     name: "YouTube",
@@ -7518,10 +7674,12 @@ function getCharacterCount(content, hashtags) {
   return (content + hashtagString).length;
 }
 function isWithinCharLimit(platform, characterCount) {
-  return characterCount <= PLATFORM_CONFIGS[platform].maxChars;
+  const config = PLATFORM_CONFIGS[platform] || PLATFORM_CONFIGS.x;
+  return characterCount <= config.maxChars;
 }
 function getCharacterLimitPercentage(platform, characterCount) {
-  return Math.min(100, characterCount / PLATFORM_CONFIGS[platform].maxChars * 100);
+  const config = PLATFORM_CONFIGS[platform] || PLATFORM_CONFIGS.x;
+  return Math.min(100, characterCount / config.maxChars * 100);
 }
 function getCharacterLimitColor(percentage) {
   if (percentage > 100) return "bg-red-500";
@@ -7839,7 +7997,7 @@ var PostPreviewCard = ({
   onContentChange,
   isLoading = false
 }) => {
-  const platformConfig = PLATFORM_CONFIGS[post.platform];
+  const platformConfig = PLATFORM_CONFIGS[post.platform] || PLATFORM_CONFIGS.x;
   const showSkeleton = isLoading && !post.content;
   const displayContent = isEditing && editContent !== void 0 ? editContent : post.editedContent || post.content;
   const currentCharCount = displayContent.length;
@@ -7889,7 +8047,14 @@ var PostPreviewCard = ({
             hashtag.replace(/^#/, "")
           ] }, hashtag)) })
         ] }),
-        post.imageUrl && /* @__PURE__ */ jsxRuntime.jsx(ImagePreviewContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(ImagePreview, { src: post.imageUrl, alt: "Post image preview" }) }),
+        post.imageUrl ? /* @__PURE__ */ jsxRuntime.jsx(ImagePreviewContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(ImagePreview, { src: post.imageUrl, alt: "Post image preview" }) }) : post.platform === "instagram" && /* @__PURE__ */ jsxRuntime.jsxs(ImagePlaceholder, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(PlaceholderIcon, { children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
+            /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8.5", cy: "8.5", r: "1.5" }),
+            /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "21 15 16 10 5 21" })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "No image attached" })
+        ] }),
         /* @__PURE__ */ jsxRuntime.jsx(ProgressBarContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(ProgressBarTrack, { children: /* @__PURE__ */ jsxRuntime.jsx(
           ProgressBarFill2,
           {
@@ -8036,13 +8201,13 @@ var ProgressBarTrack = styled11__default.default.div`
   width: 100%;
   height: 4px;
   background: ${tokens.colors.border.default};
-  border-radius: 2px;
+  border-radius: ${tokens.borderRadius.sm};
   overflow: hidden;
 `;
 var ProgressBarFill2 = styled11__default.default.div`
   width: ${({ $percentage }) => $percentage}%;
   height: 100%;
-  border-radius: 2px;
+  border-radius: ${tokens.borderRadius.sm};
   transition: width 0.3s ease, background-color 0.3s ease;
   background: ${({ $colorClass }) => {
   if ($colorClass.includes("red")) return tokens.colors.error;
@@ -8063,6 +8228,42 @@ var ImagePreview = styled11__default.default.img`
   object-fit: cover;
   display: block;
 `;
+var ImagePlaceholder = styled11__default.default.div`
+  width: 100%;
+  height: 200px;
+  background: linear-gradient(
+    45deg,
+    #f09433 0%,
+    #e6683c 25%,
+    #dc2743 50%,
+    #cc2366 75%,
+    #bc1888 100%
+  );
+  border-radius: ${tokens.borderRadius.md};
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: ${tokens.spacing.sm};
+  color: white;
+  font-size: ${tokens.typography.fontSize.sm};
+  opacity: 0.8;
+  margin-bottom: ${tokens.spacing.sm};
+`;
+var PlaceholderIcon = styled11__default.default.div`
+  width: 48px;
+  height: 48px;
+  border: 2px solid white;
+  border-radius: ${tokens.borderRadius.md};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  svg {
+    width: 24px;
+    height: 24px;
+  }
+`;
 var shimmer = styled11.keyframes`
   0% {
     background-position: -200% 0;
@@ -8114,9 +8315,21 @@ var PlatformCarousel = ({
   if (posts.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsx(CarouselContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(EmptyState, { children: "No posts available" }) });
   }
+  const defaultConfig = {
+    icon: null,
+    color: tokens.colors.text.secondary,
+    bgColor: tokens.colors.background.light,
+    maxChars: 1e3,
+    name: "Unknown",
+    description: "Unknown platform"
+  };
+  const getConfig = (platform) => {
+    const normalized = normalizePlatform(platform);
+    return normalized ? PLATFORM_CONFIGS[normalized] : defaultConfig;
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs(CarouselContainer, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(TabsContainer, { children: posts.map((post, index) => {
-      const config = PLATFORM_CONFIGS[post.platform];
+      const config = getConfig(post.platform);
       const isActive = index === activeIndex;
       return /* @__PURE__ */ jsxRuntime.jsxs(
         PlatformTab,
@@ -8149,7 +8362,7 @@ var PlatformCarousel = ({
       ) }, `slide-${post.platform}-${index}`);
     }) }),
     posts.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(NavigationDotsContainer, { children: posts.map((post, index) => {
-      const config = PLATFORM_CONFIGS[post.platform];
+      const config = getConfig(post.platform);
       return /* @__PURE__ */ jsxRuntime.jsx(
         NavigationDot,
         {
@@ -8941,8 +9154,8 @@ var Indicators = styled11__default.default.div`
 var IndicatorPill = styled11__default.default.span`
   display: inline-flex;
   align-items: center;
-  gap: 6px;
-  padding: 4px 10px;
+  gap: ${tokens.spacing.xs};
+  padding: ${tokens.spacing.xs} ${tokens.spacing.sm};
   border-radius: ${tokens.borderRadius.full};
   background: ${({ $variant }) => $variant === "warning" ? `${tokens.colors.warning}15` : `${tokens.colors.info}15`};
   border: 1px solid ${({ $variant }) => $variant === "warning" ? `${tokens.colors.warning}30` : `${tokens.colors.info}30`};
@@ -9752,7 +9965,7 @@ var spin = styled11.keyframes`
     transform: rotate(360deg);
   }
 `;
-var pulse3 = styled11.keyframes`
+var pulse4 = styled11.keyframes`
   0%, 100% {
     opacity: 1;
   }
@@ -9830,7 +10043,7 @@ var IconContainer3 = styled11__default.default.div`
   animation: ${(props) => {
   if (props.$animated) {
     if (props.$status === "running") return spin;
-    if (props.$status === "pending") return pulse3;
+    if (props.$status === "pending") return pulse4;
   }
   return "none";
 }}
@@ -9997,6 +10210,7 @@ exports.PlatformCarousel = PlatformCarousel;
 exports.PlatformGrid = PlatformGrid;
 exports.PostApprovalControls = PostApprovalControls;
 exports.PostPreviewCard = PostPreviewCard;
+exports.PostizIcon = PostizIcon;
 exports.RedditIcon = RedditIcon;
 exports.Response = Response;
 exports.SecretInput = SecretInput;