@invect/ui 0.0.7 → 0.0.9

package/src/components/shared/ProviderIcon.tsx

@@ -18,7 +18,9 @@ const PROVIDERS_WITH_SVG_ICON = new Set(
  * Providers whose dark-fill logo is invisible on dark backgrounds.
  * For these we ship a `{id}_light` variant and swap via CSS.
  */
-const PROVIDERS_WITH_LIGHT_VARIANT = new Set(['github', 'anthropic']);
+const PROVIDERS_WITH_LIGHT_VARIANT = new Set(['github', 'anthropic', 'core']);
+
+const PROVIDERS_WITH_TALL_ASPECT = new Set(['core']);
 
 /**
  * Resolve a Lucide icon component from its name string.
@@ -56,6 +58,8 @@ export const ProviderIcon = memo(function ProviderIcon({
   svgIcon,
   className,
 }: ProviderIconProps) {
+  const isTallLogo = providerId ? PROVIDERS_WITH_TALL_ASPECT.has(providerId) : false;
+
   // 1. Bundled inline SVG for known providers
   if (providerId && PROVIDERS_WITH_SVG_ICON.has(providerId)) {
     const svgMarkup = PROVIDER_SVG_ICONS[providerId];
@@ -63,6 +67,24 @@ export const ProviderIcon = memo(function ProviderIcon({
     // Providers with a dark logo that needs a light variant for dark mode
     if (PROVIDERS_WITH_LIGHT_VARIANT.has(providerId)) {
       const lightSvgMarkup = PROVIDER_SVG_ICONS[`${providerId}_light`];
+
+      if (isTallLogo) {
+        return (
+          <span className={cn('inline-flex items-center justify-center shrink-0', className)}>
+            <span
+              className="inline-flex items-center justify-center h-full dark:hidden [&>svg]:w-auto [&>svg]:h-full"
+              style={{ aspectRatio: '109 / 209' }}
+              dangerouslySetInnerHTML={{ __html: svgMarkup }}
+            />
+            <span
+              className="hidden items-center justify-center h-full dark:inline-flex [&>svg]:w-auto [&>svg]:h-full"
+              style={{ aspectRatio: '109 / 209' }}
+              dangerouslySetInnerHTML={{ __html: lightSvgMarkup }}
+            />
+          </span>
+        );
+      }
+
       return (
         <>
           <span
@@ -83,6 +105,18 @@ export const ProviderIcon = memo(function ProviderIcon({
       );
     }
 
+    if (isTallLogo) {
+      return (
+        <span className={cn('inline-flex items-center justify-center shrink-0', className)}>
+          <span
+            className="inline-flex items-center justify-center h-full [&>svg]:w-auto [&>svg]:h-full"
+            style={{ aspectRatio: '109 / 209' }}
+            dangerouslySetInnerHTML={{ __html: svgMarkup }}
+          />
+        </span>
+      );
+    }
+
     return (
       <span
         className={cn(

package/src/stores/uiStore.ts

@@ -28,6 +28,7 @@ interface UIState {
 
   // Node sidebar (for adding nodes)
   nodeSidebarOpen: boolean;
+  nodeSidebarExpandedGroups: string[];
 
   // Bottom toolbar
   toolbarCollapsed: boolean;
@@ -53,6 +54,8 @@ interface UIActions {
   // Node sidebar
   toggleNodeSidebar: () => void;
   setNodeSidebarOpen: (open: boolean) => void;
+  toggleNodeSidebarGroup: (groupId: string) => void;
+  setNodeSidebarExpandedGroups: (groups: string[]) => void;
 
   // Bottom toolbar
   toggleToolbarCollapsed: () => void;
@@ -71,6 +74,7 @@ const initialState: UIState = {
   validationPanelOpen: false,
   logsPanelOpen: false,
   nodeSidebarOpen: true,
+  nodeSidebarExpandedGroups: ['core'],
   toolbarCollapsed: false,
 };
 
@@ -146,6 +150,23 @@ export const useUIStore: UseBoundStore<StoreApi<UIStore>> = create<UIStore>()(
             state.nodeSidebarOpen = open;
           }),
 
+        toggleNodeSidebarGroup: (groupId) =>
+          set((state) => {
+            if (state.nodeSidebarExpandedGroups.includes(groupId)) {
+              state.nodeSidebarExpandedGroups = state.nodeSidebarExpandedGroups.filter(
+                (existingGroupId) => existingGroupId !== groupId,
+              );
+              return;
+            }
+
+            state.nodeSidebarExpandedGroups = [...state.nodeSidebarExpandedGroups, groupId];
+          }),
+
+        setNodeSidebarExpandedGroups: (groups) =>
+          set((state) => {
+            state.nodeSidebarExpandedGroups = groups;
+          }),
+
         // Bottom toolbar
         toggleToolbarCollapsed: () =>
           set((state) => {
@@ -162,6 +183,7 @@ export const useUIStore: UseBoundStore<StoreApi<UIStore>> = create<UIStore>()(
           sidebarCollapsed: state.sidebarCollapsed,
           activeSidebarTab: state.activeSidebarTab,
           nodeSidebarOpen: state.nodeSidebarOpen,
+          nodeSidebarExpandedGroups: state.nodeSidebarExpandedGroups,
           toolbarCollapsed: state.toolbarCollapsed,
         }),
       },
@@ -178,6 +200,7 @@ export const useModalData = () => useUIStore((s) => s.modalData);
 export const useValidationPanelOpen = () => useUIStore((s) => s.validationPanelOpen);
 export const useLogsPanelOpen = () => useUIStore((s) => s.logsPanelOpen);
 export const useNodeSidebarOpen = () => useUIStore((s) => s.nodeSidebarOpen);
+export const useNodeSidebarExpandedGroups = () => useUIStore((s) => s.nodeSidebarExpandedGroups);
 
 // Combined selectors
 export const useModals = () =>

package/src/svg-raw.d.ts

@@ -0,0 +1,4 @@
+declare module '*.svg?raw' {
+  const content: string;
+  export default content;
+}