fix: Action & Preset stacking

.vscode/settings.json

@@ -21,6 +21,7 @@
     "roughjs",
     "Serde",
     "serdes",
+    "Stackable",
     "tailwindcss",
     "uparrow"
   ],

src/lib/components/Actions.svelte

@@ -204,8 +204,8 @@ ${svgString}`);
   </div>
 {/snippet}
 
-<Card title="Actions" isOpen={!false} icon="fas fa-share-nodes">
-  <div class="m-2 flex flex-col gap-2">
+<Card title="Actions" isStackable icon="fas fa-share-nodes">
+  <div class="flex min-w-fit flex-col gap-2 p-2">
     {#if isClipboardAvailable()}
       <Button class="action-btn w-full" onclick={onCopyClipboard}>
         <i class="far fa-copy mr-2"></i> Copy Image to clipboard

src/lib/components/Card/Card.svelte

@@ -8,6 +8,7 @@
   interface Props {
     isClosable?: boolean;
     isOpen?: boolean;
+    isStackable?: boolean;
     tabs?: Tab[];
     activeTabID?: string;
     title?: string;
@@ -19,7 +20,8 @@
 
   let {
     isClosable = true,
-    isOpen = true,
+    isOpen = false,
+    isStackable = false,
     tabs = [],
     activeTabID = '',
     title,
@@ -39,16 +41,16 @@
 </script>
 
 <div
-  class="card flex h-fit {isOpen
-    ? 'flex-grow'
-    : ''} w-full flex-col overflow-hidden rounded-2xl border-2">
+  class="card flex h-fit {isOpen ? 'isOpen flex-grow' : ''} {isStackable
+    ? 'flex-1 group-has-[.isOpen]:w-full group-has-[.isOpen]:flex-none'
+    : 'w-full'} flex-col overflow-hidden rounded-2xl border-2">
   <div
     role="toolbar"
     tabindex="0"
     class="bg-border p-2 {isTabsShown ? 'pb-1' : ''} flex-none cursor-pointer"
     onclick={toggleCardOpen}
     onkeypress={toggleCardOpen}>
-    <div class="flex justify-between">
+    <div class="flex justify-between whitespace-nowrap">
       {#if icon || title}
         <span role="menubar" tabindex="0" class="flex w-fit items-center gap-2 font-semibold">
           {#if icon}
@@ -72,9 +74,7 @@
     </div>
   </div>
   {#if isOpen}
-    <div
-      class="text-base-content flex-grow overflow-hidden p-0"
-      transition:slide={{ easing: quintOut }}>
+    <div class="flex-grow overflow-x-auto" transition:slide={{ easing: quintOut }}>
       {@render children?.()}
     </div>
   {/if}

src/lib/components/ExpandableBoxes.svelte

@@ -1,67 +0,0 @@
-<script>
-  import { flip } from 'svelte/animate';
-  import { quintOut } from 'svelte/easing';
-  import { crossfade, scale } from 'svelte/transition';
-
-  // Setup crossfade transition
-  const [send, receive] = crossfade({
-    duration: 400,
-    easing: quintOut,
-    fallback(node, params) {
-      return scale(node, {
-        start: 0.8,
-        duration: 300,
-        easing: quintOut
-      });
-    }
-  });
-
-  // Sample data - replace with your actual data
-  export let items = [
-    { id: 1, title: 'Box 1', content: 'Content 1' },
-    { id: 2, title: 'Box 2', content: 'Content 2' }
-  ];
-
-  // Track which items are expanded (using Set)
-  let expandedIds = new Set();
-
-  function toggleExpand(id) {
-    // If already expanded, remove it, otherwise add it
-    if (expandedIds.has(id)) {
-      expandedIds.delete(id);
-    } else {
-      expandedIds.add(id);
-    }
-    expandedIds = new Set(expandedIds); // Replace the entire Set to trigger reactivity
-  }
-
-  $: expandedItems = items.filter((item) => expandedIds.has(item.id));
-  $: collapsedItems = items.filter((item) => !expandedIds.has(item.id));
-</script>
-
-<div class="flex flex-col gap-4">
-  <!-- Combined list approach -->
-  <div class="grid grid-cols-[repeat(auto-fit,minmax(150px,1fr))] gap-4">
-    {#each items as item (item.id)}
-      {@const isExpanded = expandedIds.has(item.id)}
-      <div
-        class="duration-400 ease-[cubic-bezier(0.22,1,0.36,1)] w-full min-w-0 transition-all {isExpanded
-          ? 'order-first col-span-full'
-          : ''}"
-        animate:flip={{ duration: 400 }}>
-        <button
-          class="flex h-full w-full min-w-0 flex-col rounded-lg bg-neutral-100 p-4 text-left shadow-md transition-all duration-200 hover:-translate-y-0.5 hover:bg-neutral-200 {isExpanded
-            ? 'bg-blue-50 p-6 shadow-lg'
-            : ''}"
-          in:receive={{ key: item.id }}
-          out:send={{ key: item.id }}
-          on:click={() => toggleExpand(item.id)}>
-          <h3 class="m-0 mb-2 overflow-hidden text-ellipsis whitespace-nowrap">{item.title}</h3>
-          {#if isExpanded}
-            <p class="m-0">{item.content}</p>
-          {/if}
-        </button>
-      </div>
-    {/each}
-  </div>
-</div>

src/lib/components/Preset.svelte

@@ -221,8 +221,8 @@ packet-beta
   ];
 </script>
 
-<Card title="Sample Diagrams" isOpen={false} icon="fas fa-shapes">
-  <div class="flex h-fit flex-wrap gap-2 p-2">
+<Card title="Sample Diagrams" isStackable icon="fas fa-shapes">
+  <div class="flex h-fit max-h-52 flex-wrap gap-2 overflow-y-auto p-2">
     {#each diagramOrder as sample}
       <Button
         size="sm"

src/routes/edit/+page.svelte

@@ -121,9 +121,9 @@
   <Navbar />
   <div class="flex flex-1 overflow-hidden">
     <Resizable.PaneGroup direction="horizontal" autoSaveId="liveEditor" class="p-2">
-      <Resizable.Pane defaultSize={40}>
+      <Resizable.Pane defaultSize={40} minSize={15}>
         <div class="hidden h-full flex-col gap-2 md:flex" id="editorPane">
-          <Card onselect={tabSelectHandler} {tabs} isClosable={false} {activeTabID}>
+          <Card onselect={tabSelectHandler} isOpen {tabs} {activeTabID} isClosable={false}>
             {#snippet actions()}
               <div class="flex flex-row items-center">
                 <!-- <div class="form-control flex-row items-center">
@@ -162,9 +162,11 @@
             <Editor />
           </Card>
 
-          <Preset />
-          <!-- <History /> -->
-          <Actions />
+          <div class="group flex flex-wrap justify-between gap-2">
+            <Preset />
+            <!-- <History /> -->
+            <Actions />
+          </div>
         </div>
       </Resizable.Pane>
       <Resizable.Handle class="opacity-0" />
@@ -228,27 +230,3 @@
     </Resizable.PaneGroup>
   </div>
 </div>
-
-<style>
-  #resizeHandler {
-    cursor: col-resize;
-    padding: 0 2px;
-  }
-
-  #resizeHandler::after {
-    width: 2px;
-    height: 100%;
-    top: 0;
-    content: '';
-    position: absolute;
-    background-color: hsla(var(--b3));
-    margin-left: -1px;
-    transition-duration: 0.2s;
-  }
-
-  #resizeHandler:hover::after {
-    margin-left: -2px;
-    background-color: hsla(var(--p));
-    width: 4px;
-  }
-</style>