From e33aed9cc6ed775616e648ef3718be60a7dfcf58 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Fri, 7 Mar 2025 17:00:16 +0900
Subject: [PATCH] fix: Action panel

---
 src/lib/components/Actions.svelte             | 97 ++++++++-----------
 src/lib/components/ui/input/index.ts          |  7 ++
 src/lib/components/ui/input/input.svelte      | 46 +++++++++
 src/lib/components/ui/toggle-group/index.ts   | 10 ++
 .../ui/toggle-group/toggle-group-item.svelte  | 30 ++++++
 .../ui/toggle-group/toggle-group.svelte       | 41 ++++++++
 src/lib/components/ui/toggle/index.ts         | 13 +++
 src/lib/components/ui/toggle/toggle.svelte    | 51 ++++++++++
 8 files changed, 236 insertions(+), 59 deletions(-)
 create mode 100644 src/lib/components/ui/input/index.ts
 create mode 100644 src/lib/components/ui/input/input.svelte
 create mode 100644 src/lib/components/ui/toggle-group/index.ts
 create mode 100644 src/lib/components/ui/toggle-group/toggle-group-item.svelte
 create mode 100644 src/lib/components/ui/toggle-group/toggle-group.svelte
 create mode 100644 src/lib/components/ui/toggle/index.ts
 create mode 100644 src/lib/components/ui/toggle/toggle.svelte

diff --git a/src/lib/components/Actions.svelte b/src/lib/components/Actions.svelte
index 9c83bd50..82f3ad16 100644
--- a/src/lib/components/Actions.svelte
+++ b/src/lib/components/Actions.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
+  import Card from '$/components/Card/Card.svelte';
   import { Button } from '$/components/ui/button';
-  import { Separator } from '$/components/ui/separator';
-  import { Switch } from '$/components/ui/switch';
+  import { Input } from '$/components/ui/input';
+  import * as ToggleGroup from '$/components/ui/toggle-group';
   import { browser } from '$app/environment';
-  import Card from '$lib/components/Card/Card.svelte';
   import { waitForRender } from '$lib/util/autoSync';
   import { env } from '$lib/util/env';
   import { pakoSerde } from '$lib/util/serde';
@@ -12,6 +12,7 @@
   import { version as FAVersion } from '@fortawesome/fontawesome-free/package.json';
   import dayjs from 'dayjs';
   import { toBase64 } from 'js-base64';
+  import Separator from './ui/separator/separator.svelte';
 
   const FONT_AWESOME_URL = `https://cdnjs.cloudflare.com/ajax/libs/font-awesome/${FAVersion}/css/all.min.css`;
 
@@ -53,14 +54,14 @@ ${svgString}`);
     const box: DOMRect = svg.getBoundingClientRect();
     canvas.width = box.width;
     canvas.height = box.height;
-    if (imageModeFinal === 'width') {
+    if (imageSizeMode === 'width') {
       const ratio = box.height / box.width;
-      canvas.width = userimagesize;
-      canvas.height = userimagesize * ratio;
-    } else if (imageModeFinal === 'height') {
+      canvas.width = imageSize;
+      canvas.height = imageSize * ratio;
+    } else if (imageSizeMode === 'height') {
       const ratio = box.width / box.height;
-      canvas.width = userimagesize * ratio;
-      canvas.height = userimagesize;
+      canvas.width = imageSize * ratio;
+      canvas.height = imageSize;
     }
 
     const context = canvas.getContext('2d');
@@ -172,12 +173,8 @@ ${svgString}`);
   let svgUrl: string | undefined = $state();
   let krokiUrl: string | undefined = $state();
   let mdCode: string | undefined = $state();
-  let isAutoImageMode = $state(true);
-  let manualSizingMode: 'width' | 'height' = $state('width');
-  let imageModeFinal: 'auto' | 'width' | 'height' = $derived(
-    isAutoImageMode ? 'auto' : manualSizingMode
-  );
-  let userimagesize = $state(1080);
+  let imageSizeMode: 'auto' | 'width' | 'height' = $state('auto');
+  let imageSize = $state(1080);
 
   let isNetlify = $state(false);
   if (browser && ['mermaid.live', 'netlify'].some((path) => window.location.host.includes(path))) {
@@ -206,34 +203,27 @@ ${svgString}`);
 
 <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
-      </Button>
-    {/if}
-
-    <div class="flex w-full items-center gap-2 py-2">
+    <div class="flex w-full items-center gap-2 whitespace-nowrap py-2">
       PNG size
-      <Separator orientation="vertical" />
+      <ToggleGroup.Root type="single" variant="outline" bind:value={imageSizeMode}>
+        <ToggleGroup.Item value="auto">Auto</ToggleGroup.Item>
+        <ToggleGroup.Item value="width">Width</ToggleGroup.Item>
+        <ToggleGroup.Item value="height">Height</ToggleGroup.Item>
+      </ToggleGroup.Root>
+      <!-- <Separator orientation="vertical" />
       <span class="flex items-center gap-2">
         Auto
         <Switch id="autosize" bind:checked={isAutoImageMode} />
-      </span>
+      </span> -->
 
-      {#if !isAutoImageMode}
-        <Separator orientation="vertical" />
-        <div class="flex flex-grow justify-between">
-          <label for="width">
-            <input type="radio" value="width" id="width" bind:group={manualSizingMode} /> Width
-          </label>
-
-          <label for="height">
-            <input type="radio" value="height" id="height" bind:group={manualSizingMode} /> Height
-          </label>
-
-          <input class="input" type="number" min="3" max="10000" bind:value={userimagesize} />
-        </div>
-      {/if}
+      <!-- {#if } -->
+      <Input
+        type="number"
+        min="3"
+        max="10000"
+        disabled={imageSizeMode === 'auto'}
+        bind:value={imageSize} />
+      <!-- {/if} -->
     </div>
     <div class="flex gap-2">
       {@render dualActionButton('PNG', onDownloadPNG, iUrl)}
@@ -247,33 +237,22 @@ ${svgString}`);
         </a>
       {/if}
     </div>
-
+    <Separator />
+    {#if isClipboardAvailable()}
+      <Button class="action-btn w-full" onclick={onCopyClipboard}>
+        <i class="far fa-copy mr-2"></i> Copy Image to clipboard
+      </Button>
+    {/if}
     {#if rendererUrl}
       <div class="flex w-full items-center gap-2">
-        <input
-          class="input flex-grow"
-          id="markdown"
-          type="text"
-          value={mdCode}
-          onclick={onCopyMarkdown} />
-        <label for="markdown">
-          <Button class="btn btn-primary btn-md flex-auto" onclick={onCopyMarkdown}>
-            Copy Markdown
-          </Button>
-        </label>
+        <Input type="text" value={mdCode} onclick={onCopyMarkdown} />
+        <Button onclick={onCopyMarkdown}>Copy Markdown</Button>
       </div>
     {/if}
 
     <div class="flex w-full items-center gap-2">
-      <input
-        class="input flex-grow"
-        id="gist"
-        type="text"
-        bind:value={gistURL}
-        placeholder="Enter Gist URL" />
-      <label for="gist">
-        <Button class="btn btn-primary btn-md flex-auto" onclick={loadGist}>Load Gist</Button>
-      </label>
+      <Input type="url" bind:value={gistURL} placeholder="Enter Gist URL" />
+      <Button onclick={loadGist}>Load Gist</Button>
     </div>
     {#if isNetlify}
       <div class="flex w-full items-center justify-center">
diff --git a/src/lib/components/ui/input/index.ts b/src/lib/components/ui/input/index.ts
new file mode 100644
index 00000000..f47b6d3f
--- /dev/null
+++ b/src/lib/components/ui/input/index.ts
@@ -0,0 +1,7 @@
+import Root from "./input.svelte";
+
+export {
+	Root,
+	//
+	Root as Input,
+};
diff --git a/src/lib/components/ui/input/input.svelte b/src/lib/components/ui/input/input.svelte
new file mode 100644
index 00000000..78c77604
--- /dev/null
+++ b/src/lib/components/ui/input/input.svelte
@@ -0,0 +1,46 @@
+<script lang="ts">
+	import type { HTMLInputAttributes, HTMLInputTypeAttribute } from "svelte/elements";
+	import type { WithElementRef } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type InputType = Exclude<HTMLInputTypeAttribute, "file">;
+
+	type Props = WithElementRef<
+		Omit<HTMLInputAttributes, "type"> &
+			({ type: "file"; files?: FileList } | { type?: InputType; files?: undefined })
+	>;
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		type,
+		files = $bindable(),
+		class: className,
+		...restProps
+	}: Props = $props();
+</script>
+
+{#if type === "file"}
+	<input
+		bind:this={ref}
+		class={cn(
+			"border-input placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+			className
+		)}
+		type="file"
+		bind:files
+		bind:value
+		{...restProps}
+	/>
+{:else}
+	<input
+		bind:this={ref}
+		class={cn(
+			"border-input placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+			className
+		)}
+		{type}
+		bind:value
+		{...restProps}
+	/>
+{/if}
diff --git a/src/lib/components/ui/toggle-group/index.ts b/src/lib/components/ui/toggle-group/index.ts
new file mode 100644
index 00000000..12b14b96
--- /dev/null
+++ b/src/lib/components/ui/toggle-group/index.ts
@@ -0,0 +1,10 @@
+import Root from "./toggle-group.svelte";
+import Item from "./toggle-group-item.svelte";
+
+export {
+	Root,
+	Item,
+	//
+	Root as ToggleGroup,
+	Item as ToggleGroupItem,
+};
diff --git a/src/lib/components/ui/toggle-group/toggle-group-item.svelte b/src/lib/components/ui/toggle-group/toggle-group-item.svelte
new file mode 100644
index 00000000..8143635f
--- /dev/null
+++ b/src/lib/components/ui/toggle-group/toggle-group-item.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { ToggleGroup as ToggleGroupPrimitive } from "bits-ui";
+	import { getToggleGroupCtx } from "./toggle-group.svelte";
+	import { cn } from "$lib/utils.js";
+	import { type ToggleVariants, toggleVariants } from "$lib/components/ui/toggle/index.js";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		class: className,
+		size,
+		variant,
+		...restProps
+	}: ToggleGroupPrimitive.ItemProps & ToggleVariants = $props();
+
+	const ctx = getToggleGroupCtx();
+</script>
+
+<ToggleGroupPrimitive.Item
+	bind:ref
+	class={cn(
+		toggleVariants({
+			variant: ctx.variant || variant,
+			size: ctx.size || size,
+		}),
+		className
+	)}
+	{value}
+	{...restProps}
+/>
diff --git a/src/lib/components/ui/toggle-group/toggle-group.svelte b/src/lib/components/ui/toggle-group/toggle-group.svelte
new file mode 100644
index 00000000..08860053
--- /dev/null
+++ b/src/lib/components/ui/toggle-group/toggle-group.svelte
@@ -0,0 +1,41 @@
+<script lang="ts" module>
+	import { getContext, setContext } from "svelte";
+	import type { ToggleVariants } from "$lib/components/ui/toggle/index.js";
+	export function setToggleGroupCtx(props: ToggleVariants) {
+		setContext("toggleGroup", props);
+	}
+
+	export function getToggleGroupCtx() {
+		return getContext<ToggleVariants>("toggleGroup");
+	}
+</script>
+
+<script lang="ts">
+	import { ToggleGroup as ToggleGroupPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		class: className,
+		size = "default",
+		variant = "default",
+		...restProps
+	}: ToggleGroupPrimitive.RootProps & ToggleVariants = $props();
+
+	setToggleGroupCtx({
+		variant,
+		size,
+	});
+</script>
+
+<!--
+Discriminated Unions + Destructing (required for bindable) do not
+get along, so we shut typescript up by casting `value` to `never`.
+-->
+<ToggleGroupPrimitive.Root
+	bind:value={value as never}
+	bind:ref
+	class={cn("flex items-center justify-center gap-1", className)}
+	{...restProps}
+/>
diff --git a/src/lib/components/ui/toggle/index.ts b/src/lib/components/ui/toggle/index.ts
new file mode 100644
index 00000000..8cb2936f
--- /dev/null
+++ b/src/lib/components/ui/toggle/index.ts
@@ -0,0 +1,13 @@
+import Root from "./toggle.svelte";
+export {
+	toggleVariants,
+	type ToggleSize,
+	type ToggleVariant,
+	type ToggleVariants,
+} from "./toggle.svelte";
+
+export {
+	Root,
+	//
+	Root as Toggle,
+};
diff --git a/src/lib/components/ui/toggle/toggle.svelte b/src/lib/components/ui/toggle/toggle.svelte
new file mode 100644
index 00000000..e7b98376
--- /dev/null
+++ b/src/lib/components/ui/toggle/toggle.svelte
@@ -0,0 +1,51 @@
+<script lang="ts" module>
+	import { type VariantProps, tv } from "tailwind-variants";
+
+	export const toggleVariants = tv({
+		base: "hover:bg-muted hover:text-muted-foreground focus-visible:ring-ring data-[state=on]:bg-accent data-[state=on]:text-accent-foreground inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+		variants: {
+			variant: {
+				default: "bg-transparent",
+				outline:
+					"border-input hover:bg-accent hover:text-accent-foreground border bg-transparent shadow-sm",
+			},
+			size: {
+				default: "h-9 min-w-9 px-3",
+				sm: "h-8 min-w-8 px-2",
+				lg: "h-10 min-w-10 px-3",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	});
+
+	export type ToggleVariant = VariantProps<typeof toggleVariants>["variant"];
+	export type ToggleSize = VariantProps<typeof toggleVariants>["size"];
+	export type ToggleVariants = VariantProps<typeof toggleVariants>;
+</script>
+
+<script lang="ts">
+	import { Toggle as TogglePrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		pressed = $bindable(false),
+		class: className,
+		size = "default",
+		variant = "default",
+		...restProps
+	}: TogglePrimitive.RootProps & {
+		variant?: ToggleVariant;
+		size?: ToggleSize;
+	} = $props();
+</script>
+
+<TogglePrimitive.Root
+	bind:ref
+	bind:pressed
+	class={cn(toggleVariants({ variant, size }), className)}
+	{...restProps}
+/>