@reshape-biotech/design-system 2.7.23 → 2.7.24

package/README.md

@@ -1,19 +1,27 @@
 
 ## Local development flow with downstream consumer:
 
-`bun link` will give you a soft link you can install in your consuming project's `node_modules` directory.
+First run
+```sh
+bun link
+```
+To create a soft link you can install in your consuming project's `node_modules`.
 
 Add this to your consumer's `package.json`:
 ```sh
 "@reshape-biotech/design-system": "link:@reshape-biotech/design-system"
 ```
 
+or run this:
+```sh
+bun link @reshape-biotech/design-system
+```
 
-If you then keep updating the design system, run
+Now, to have the package buidling watch for changes:
 ```sh
 bun run package --watch
 ```
-to keep updating the exported components.
+
 
 ## Publishing
 

package/dist/components/multi-cfu-counter/MultiCFUCounter.svelte

@@ -545,56 +545,35 @@
 </script>
 
 {#snippet UndoResetControls()}
-  {#if marks.length > 0}
-    <div class="flex items-center gap-2">
-      <IconButton
-        variant="transparent-inverse"
-        rounded={false}
-        onclick={undo}
-        disabled={marks.length === 0 || disabled}
-        aria-label="Undo last mark"
-      >
-        <Icon icon={ArrowUUpLeft} />
-      </IconButton>
-      <Divider vertical inverse class="!h-4" />
-      <Button
-        variant="transparent-inverse"
-        size="sm"
-        onClick={reset}
-        disabled={marks.length === 0 || disabled}
-        accessibilityLabel="Reset all marks"
-        class="!text-primary-inverse"
-      >
-        Clear all
-      </Button>
-    </div>
-  {/if}
-{/snippet}
-
-{#snippet TopLeftActions()}
-  {#if activeMarkerName && !hideMarkers && !disabled}
-    <div class="flex h-10 items-center justify-between rounded-lg px-2 py-2">
-      <div class="flex items-center gap-3">
-        <div
-          class="flex !h-6 !w-6 shrink-0 items-center justify-center rounded-md"
-          style="background-color: {resolvedActiveMarkerColor()}"
-        >
-          <Icon color="primary-inverse" icon={CursorClick} />
-        </div>
-
-        <span class="text-sm text-primary-inverse">
-          Click to count each object in <strong>{activeMarkerName}</strong>
-        </span>
-      </div>
-
-      {@render UndoResetControls()}
-    </div>
-  {/if}
+  <div
+    class="border-static-inverse bg-base-inverse absolute right-2 top-2 z-20 flex items-center gap-1 rounded-xl border p-1 opacity-0 transition-opacity duration-200 group-hover:opacity-100"
+  >
+    <IconButton
+      variant="transparent-inverse"
+      rounded={false}
+      onclick={undo}
+      disabled={marks.length === 0 || disabled}
+      aria-label="Undo last mark"
+    >
+      <Icon icon={ArrowUUpLeft} />
+    </IconButton>
+    <Divider vertical inverse class="!h-4" />
+    <Button
+      variant="transparent-inverse"
+      size="sm"
+      onClick={reset}
+      disabled={marks.length === 0 || disabled}
+      accessibilityLabel="Reset all marks"
+      class="!text-primary-inverse"
+    >
+      Clear all
+    </Button>
+  </div>
 {/snippet}
 
 {#snippet ZoomControls()}
   <div
-    class="absolute bottom-2 right-2 z-20 flex flex-col items-center gap-1 rounded-xl border border-static-inverse bg-base-inverse p-1 opacity-0 transition-opacity duration-200 group-hover:opacity-100"
+    class="border-static-inverse bg-base-inverse absolute bottom-2 right-2 z-20 flex flex-col items-center gap-1 rounded-xl border p-1 opacity-0 transition-opacity duration-200 group-hover:opacity-100"
   >
     <IconButton
       variant="transparent-inverse"
@@ -618,12 +597,9 @@
 {/snippet}
 
 <div class="flex h-full w-full flex-col gap-1 p-1" data-testid="manual-cfu-counter">
-  {#if !hideMarkers && !disabled}
-    {@render TopLeftActions()}
-  {/if}
-
   <div bind:this={container} class="group relative flex-1 overflow-hidden rounded-xl bg-black">
     {#if !hideMarkers && !disabled}
+      {@render UndoResetControls()}
       {@render ZoomControls()}
     {/if}
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reshape-biotech/design-system",
-  "version": "2.7.23",
+  "version": "2.7.24",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",