@heymantle/litho 0.0.10 → 0.0.13

package/dist/types/utilities/useLocalStorage.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Custom hook for managing localStorage with React state
+ * @param {string} key - The localStorage key
+ * @param {any} initialValue - The initial value if key doesn't exist
+ * @param {Object} options - Optional configuration
+ * @param {boolean} options.serialize - Whether to serialize/deserialize JSON (default: true)
+ * @returns {[any, Function]} - [storedValue, setValue]
+ */
+export function useLocalStorage(key: string, initialValue: any, options?: {
+    serialize: boolean;
+}): [any, Function];
+export default useLocalStorage;
+//# sourceMappingURL=useLocalStorage.d.ts.map

package/dist/types/utilities/useLocalStorage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLocalStorage.d.ts","sourceRoot":"","sources":["../../../utilities/useLocalStorage.js"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AACH,qCANW,MAAM,gBACN,GAAG,YAEX;IAAyB,SAAS,EAA1B,OAAO;CACf,GAAU,CAAC,GAAG,WAAW,CAqD3B"}

package/dist/types/utilities/useMobile.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Custom hook for detecting mobile viewport
+ * @param {number} breakpoint - The breakpoint width in pixels (default: 768)
+ * @param {number} debounceMs - Debounce delay for resize events in milliseconds (default: 150)
+ * @returns {boolean} - True if viewport width is below the breakpoint
+ */
+export function useMobile(breakpoint?: number, debounceMs?: number): boolean;
+export default useMobile;
+//# sourceMappingURL=useMobile.d.ts.map

package/dist/types/utilities/useMobile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMobile.d.ts","sourceRoot":"","sources":["../../../utilities/useMobile.js"],"names":[],"mappings":"AAKA;;;;;GAKG;AACH,uCAJW,MAAM,eACN,MAAM,GACJ,OAAO,CA0BnB"}

package/dist/types/utilities/usePaneState.d.ts

@@ -0,0 +1,2 @@
+export function usePaneState(orgId?: string): any;
+//# sourceMappingURL=usePaneState.d.ts.map

package/dist/types/utilities/usePaneState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePaneState.d.ts","sourceRoot":"","sources":["../../../utilities/usePaneState.js"],"names":[],"mappings":"AA0CO,qCAHI,MAAM,OAyNhB"}

package/dist/types/utilities/useTabStorage.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Custom hook for managing tab storage in consolidated pane state, scoped by orgId
+ * @param {string} [orgId] - Organization ID to scope the tab storage (optional, but required for operations)
+ * @returns {Object} Tab storage utilities
+ */
+export function useTabStorage(orgId?: string): any;
+export default useTabStorage;
+//# sourceMappingURL=useTabStorage.d.ts.map

package/dist/types/utilities/useTabStorage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTabStorage.d.ts","sourceRoot":"","sources":["../../../utilities/useTabStorage.js"],"names":[],"mappings":"AAKA;;;;GAIG;AACH,sCAHW,MAAM,OA8OhB"}

package/index.css

@@ -151,6 +151,7 @@
   --color-lower: #75716d;
   --color-lowest: #8f8a84;
   --color-alternate: #ffffff;
+  --color-insight-text: #250E6A;
 
   --color-fg-success: #0e4d25;
   --color-fg-success-alternate: #41e67c;
@@ -238,10 +239,10 @@
   --color-highlight-alt-fg: #08060d;
   --color-highlight-alt-icon: #403366;
 
-  --color-insight: #e863fc;
-  --color-insight-low: #d159e3;
-  --color-insight-lower: #ae4abd;
-  --color-insight-lowest: #8a3b96;
+  --color-insight: #F3A0FF;
+  --color-insight-low: #E698F2;
+  --color-insight-lower: #DA90E5;
+  --color-insight-lowest: #CE88D9;
   --color-insight-fg: #111014;
   --color-insight-icon: #650274;
   --color-insight-alt: #f5cafc;
@@ -326,6 +327,17 @@
   --color-btn-highlight-disabled: #ffbb70;
   --color-btn-highlight-disabled-fg: #66635f;
 
+  --color-btn-insight: #F5CAFC;
+  --color-btn-insight-low: #ECC2F2;
+  --color-btn-insight-lower: #E2BAE8;
+  --color-btn-insight-fg: #0c060d;
+  --color-btn-insight-fg-alt: #0c060d;
+  --color-btn-insight-icon: #5f3366;
+  --color-btn-insight-border: #F5CAFC;
+  --color-btn-insight-border-low: #ECC2F2;
+  --color-btn-insight-disabled: #ffbb70;
+  --color-btn-insight-disabled-fg: #66635f;
+
   --color-form-accent: #ffb64e;
   --color-form-bg: #ffffff;
   --color-form-bg-hover: #fcfcfc;
@@ -529,7 +541,7 @@
     --litho-table-header-sticky-at: 56px;
     --litho-pane-width: 400px;
     --litho-pane-width-default: 400px;
-    --litho-pane-width-expanded: 700px;
+    --litho-pane-collapsed-width: 36px;
 
     overscroll-behavior: none;
   }
@@ -551,6 +563,7 @@
     --color-lower: #807B7B;
     --color-lowest: #666363;
     --color-alternate: #FFFFFF;
+    --color-insight-text: #CEBDFF;
 
     --color-fg-success: #40fb84;
     --color-fg-success-alternate: #40fb84;
@@ -772,6 +785,17 @@
     --color-btn-highlight-disabled: transparent;
     --color-btn-highlight-disabled-fg: #b98449;
 
+    --color-btn-insight: #F5CAFC;
+    --color-btn-insight-low: #ECC2F2;
+    --color-btn-insight-lower: #E2BAE8;
+    --color-btn-insight-fg: #0c060d;
+    --color-btn-insight-fg-alt: #0c060d;
+    --color-btn-insight-icon: #5f3366;
+    --color-btn-insight-border: #F5CAFC;
+    --color-btn-insight-border-low: #ECC2F2;
+    --color-btn-insight-disabled: #ffbb70;
+    --color-btn-insight-disabled-fg: #66635f;
+
     --color-form-accent: #ffb64e;
     --color-form-bg: var(--color-surface-normal);
     --color-form-bg-hover: var(--color-surface-lower);
@@ -824,7 +848,7 @@
   .Litho-Frame-Content.Litho-Frame-Content--InIframe iframe { z-index: 1900; }
   .Litho-ModalContainer { z-index: 1800; }
   .Litho-ModalOverlay { z-index: 1700; }
-  .Litho-Pane { z-index: 1690; }
+  .Litho-Pane { z-index: 1600; }
   .Litho-Logo.Litho-Logo--ModalOpen { z-index: 1600; }
   .Litho-FrameSaveBar__Toggle { z-index: 1500; }
   .Litho-FrameSaveBar { z-index: 1400; }
@@ -1153,4 +1177,51 @@
   label {
     @apply text-xxs! text-low!;
   }
+}
+
+.Litho-TabNavigation .scroll-container::-webkit-scrollbar-track {
+  background-color: var(--color-surface-lowest);
+}
+.Litho-TabNavigation .scroll-container::-webkit-scrollbar-thumb {
+  background-color: var(--color-edge-default);
+}
+.Litho-TabNavigation .scroll-container::-webkit-scrollbar-thumb:hover {
+  background-color: var(--color-edge-dark);
+}
+.Litho-TabNavigation .scroll-container {
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-edge-default) var(--color-surface-lowest);
+}
+
+.typing-indicator {
+  color: currentColor;
+  opacity: 0.6;
+}
+
+.typing-dot {
+  opacity: 0.3;
+  animation: typing-pulse 1s ease-in-out infinite;
+}
+
+.typing-dot-1 {
+  animation-delay: 0s;
+}
+
+.typing-dot-2 {
+  animation-delay: 0.15s;
+}
+
+.typing-dot-3 {
+  animation-delay: 0.3s;
+}
+
+@keyframes typing-pulse {
+  0%,
+  60%,
+  100% {
+    opacity: 0.3;
+  }
+  30% {
+    opacity: 1;
+  }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@heymantle/litho",
   "description": "Litho is a library of components for building Mantle extensions",
-  "version": "0.0.10",
+  "version": "0.0.13",
   "type": "module",
   "main": "./dist/esm/index.js",
   "module": "./dist/esm/index.js",
@@ -92,4 +92,4 @@
     "zx": "^8.7.1"
   },
   "license": "MIT"
-}
+}