dr-widget 0.1.3__py3-none-any.whl

dr_widget/widgets/config_file_manager/src/lib/components/file-drop/SimpleJsonViewer.svelte

@@ -0,0 +1,405 @@
+<script lang="ts">
+  import SimpleJsonViewer from './SimpleJsonViewer.svelte';
+
+  type Primitive = string | number | boolean | null | undefined;
+  type DiffStatus = "added" | "removed" | "changed" | "unchanged";
+
+const {
+  data,
+  baseline,
+  dirty = false,
+  diffContext = "unchanged",
+  depth = 2,
+  currentDepth = 0,
+  isLast = true,
+  preserveKeyOrder = false,
+} = $props<{
+  data?: unknown;
+  baseline?: unknown;
+  dirty?: boolean;
+  diffContext?: DiffStatus;
+  depth?: number;
+  currentDepth?: number;
+  isLast?: boolean;
+  preserveKeyOrder?: boolean;
+}>();
+
+  let items = $state<string[]>([]);
+  let isArray = $state(false);
+  let brackets = $state<[string, string]>(["{", "}"]);
+  let collapsed = $state(false);
+  let diffMeta = $state<
+    Record<
+      string,
+      {
+        status: DiffStatus;
+        hasCurrent: boolean;
+        hasPrevious: boolean;
+        currentValue: unknown;
+        previousValue: unknown;
+      }
+    >
+  >({});
+
+  const getType = (value: unknown): string => {
+    if (value === null) return "null";
+    return typeof value;
+  };
+
+  const isObjectLike = (value: unknown): value is Record<string, unknown> =>
+    typeof value === "object" && value !== null;
+
+  const deepEqual = (a: unknown, b: unknown): boolean => {
+    if (a === b) return true;
+
+    if (typeof a !== typeof b) return false;
+
+    if (Array.isArray(a) && Array.isArray(b)) {
+      if (a.length !== b.length) return false;
+      return a.every((item, index) => deepEqual(item, b[index]));
+    }
+
+    if (isObjectLike(a) && isObjectLike(b)) {
+      const keysA = Object.keys(a);
+      const keysB = Object.keys(b);
+      if (keysA.length !== keysB.length) return false;
+      return keysA.every((key) => deepEqual(a[key], b[key]));
+    }
+
+    return false;
+  };
+
+  const hasRemainingCurrentValues = (startIndex: number): boolean => {
+    for (let i = startIndex + 1; i < items.length; i += 1) {
+      if (diffMeta[items[i]]?.hasCurrent) {
+        return true;
+      }
+    }
+    return false;
+  };
+
+  const stringify = (value: unknown): string => JSON.stringify(value);
+
+  const formatPrimitive = (value: Primitive): string => {
+    const type = getType(value);
+    if (type === "string") return stringify(value);
+    if (type === "number" || type === "bigint") return String(value);
+    if (type === "boolean") return value ? "true" : "false";
+    if (value === null) return "null";
+    if (value === undefined) return "undefined";
+    return String(value);
+  };
+
+  const toggleCollapsed = () => {
+    collapsed = !collapsed;
+  };
+
+  const handleKeyPress = (event: KeyboardEvent) => {
+    if (["Enter", " "].includes(event.key)) {
+      event.preventDefault();
+      toggleCollapsed();
+    }
+  };
+
+  $effect(() => {
+    const source = data ?? baseline;
+    const type = getType(source);
+
+    if (type === "object") {
+      const currentObj = isObjectLike(data) ? data : undefined;
+      const baselineObj = isObjectLike(baseline) ? baseline : undefined;
+
+      const currentKeys = currentObj ? Object.keys(currentObj) : [];
+      const baselineKeys = baselineObj ? Object.keys(baselineObj) : [];
+
+      const keys: string[] = [];
+      const seen = new Set<string>();
+      const appendKeys = (list: string[]) => {
+        for (const key of list) {
+          if (!seen.has(key)) {
+            keys.push(key);
+            seen.add(key);
+          }
+        }
+      };
+
+      appendKeys(currentKeys);
+      if (dirty && baselineObj) {
+        appendKeys(baselineKeys);
+      }
+
+      if (!preserveKeyOrder) {
+        const sortKeys = Array.isArray(source)
+          ? (keysToSort: string[]) =>
+              keysToSort.sort((a, b) => Number(a) - Number(b))
+          : (keysToSort: string[]) =>
+              keysToSort.sort((a, b) =>
+                a.localeCompare(b, undefined, { numeric: true }),
+              );
+
+        sortKeys(keys);
+      }
+
+      const meta: typeof diffMeta = {};
+
+      for (const key of keys) {
+        const hasCurrent = Boolean(currentObj && key in currentObj);
+        const hasPrevious = Boolean(baselineObj && key in baselineObj);
+        const currentValue = hasCurrent ? currentObj?.[key] : undefined;
+        const previousValue = hasPrevious ? baselineObj?.[key] : undefined;
+
+        let status: DiffStatus = "unchanged";
+
+        if (dirty && baselineObj) {
+          if (hasCurrent && !hasPrevious) {
+            status = "added";
+          } else if (!hasCurrent && hasPrevious) {
+            status = "removed";
+          } else if (!deepEqual(currentValue, previousValue)) {
+            status = "changed";
+          }
+        }
+
+        meta[key] = {
+          status,
+          hasCurrent,
+          hasPrevious,
+          currentValue,
+          previousValue,
+        };
+      }
+
+      items = keys;
+      diffMeta = meta;
+      isArray = Array.isArray(source);
+      brackets = isArray ? ["[", "]"] : ["{", "}"];
+    } else {
+      items = [];
+      isArray = false;
+      brackets = ["{", "}"];
+      diffMeta = {};
+    }
+  });
+
+  $effect(() => {
+    collapsed = depth < currentDepth;
+  });
+</script>
+
+{#if data === undefined && (!dirty || baseline === undefined)}
+  <div
+    class="flex h-80 w-full items-center justify-center rounded-md border border-dashed border-zinc-200 bg-zinc-50 text-sm text-zinc-500 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-400"
+  >
+    <p>No JSON selected.</p>
+  </div>
+{:else}
+  {#if !items.length}
+    <span class="_jsonBkt empty" class:isArray={isArray}>
+      {brackets[0]}{brackets[1]}
+    </span>{#if !isLast}<span class="_jsonSep">,</span>{/if}
+  {:else if collapsed}
+    <span
+      class="_jsonBkt"
+      class:isArray={isArray}
+      role="button"
+      tabindex="0"
+      onclick={toggleCollapsed}
+      onkeydown={handleKeyPress}
+    >{brackets[0]}...{brackets[1]}</span>{#if !isLast && collapsed}<span class="_jsonSep">,</span>{/if}
+  {:else}
+    <span
+      class="_jsonBkt"
+      class:isArray={isArray}
+      class:diff-block-added={diffContext === "added"}
+      class:diff-block-removed={diffContext === "removed"}
+      role="button"
+      tabindex="0"
+      onclick={toggleCollapsed}
+      onkeydown={handleKeyPress}
+    >{brackets[0]}</span>
+    <ul class="_jsonList">
+      {#each items as key, idx}
+        {@const meta = diffMeta[key]}
+        {#if meta}
+          {@const currentValue = meta.currentValue}
+          {@const previousValue = meta.previousValue}
+          {@const valueType = getType(
+            meta.hasCurrent ? currentValue : previousValue,
+          )}
+
+          <li class:diff-removed-row={meta.status === "removed"}>
+            {#if !isArray}
+              <span
+                class="_jsonKey"
+                class:diff-removed-text={meta.status === "removed"}
+              >
+                {stringify(key)}
+              </span>
+              <span class="_jsonSep">:</span>
+            {/if}
+
+            {#if (meta.hasCurrent ? getType(currentValue) : getType(previousValue)) ===
+            "object"}
+              <SimpleJsonViewer
+                data={meta.hasCurrent ? currentValue : undefined}
+                baseline={meta.hasPrevious ? previousValue : undefined}
+                {depth}
+                dirty={dirty}
+                diffContext={meta.status}
+                currentDepth={currentDepth + 1}
+                isLast={!hasRemainingCurrentValues(idx)}
+              />
+            {:else if meta.hasCurrent}
+              <span
+                class="_jsonVal {getType(currentValue)}"
+                class:diff-added={meta.status === "added" || meta.status === "changed"}
+              >
+                {formatPrimitive(currentValue as Primitive)}
+              </span><!--
+           -->{#if meta.status === "changed" && meta.hasPrevious}
+                <span class="diff-previous-label">Updated from</span>
+                <span class="_jsonVal {getType(previousValue)} diff-removed">
+                  {formatPrimitive(previousValue as Primitive)}
+                </span>
+              {/if}<!--
+           -->{#if meta.hasCurrent && hasRemainingCurrentValues(idx)}<span class="_jsonSep">,</span>{/if}
+            {:else if meta.hasPrevious}
+              <span class="_jsonVal {valueType} diff-removed">
+                {formatPrimitive(previousValue as Primitive)}
+              </span>
+              <span class="diff-previous-label">Removed</span>
+            {/if}
+          </li>
+        {/if}
+      {/each}
+    </ul>
+    <span
+      class="_jsonBkt"
+      class:isArray={isArray}
+      class:diff-block-added={diffContext === "added"}
+      class:diff-block-removed={diffContext === "removed"}
+      role="button"
+      tabindex="0"
+      onclick={toggleCollapsed}
+      onkeydown={handleKeyPress}
+    >{brackets[1]}</span>{#if !isLast && diffContext !== "removed"}<span class="_jsonSep">,</span>{/if}
+  {/if}
+{/if}
+
+<style>
+  :global(.dark) {
+    --jsonBracketHoverBackground: rgba(63, 63, 70, 0.4);
+    --jsonBorderLeft: 1px dashed rgba(63, 63, 70, 0.6);
+    --jsonValColor: rgba(228, 228, 231, 0.8);
+  }
+
+  :where(._jsonList) {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    padding-left: var(--jsonPaddingLeft, 1rem);
+    border-left: var(--jsonBorderLeft, 1px dotted);
+  }
+
+  :where(._jsonBkt) {
+    color: var(--jsonBracketColor, currentcolor);
+    border-radius: 0.25rem;
+    padding: 0.1rem 0.25rem;
+  }
+
+  :where(._jsonBkt):not(.empty):hover,
+  :where(._jsonBkt):focus-visible {
+    cursor: pointer;
+    outline: none;
+    background: var(--jsonBracketHoverBackground, #e5e7eb);
+  }
+
+  :where(._jsonSep) {
+    color: var(--jsonSeparatorColor, currentcolor);
+  }
+
+  :where(._jsonKey) {
+    color: var(--jsonKeyColor, currentcolor);
+    margin-right: 0.35rem;
+  }
+
+  :where(._jsonVal) {
+    color: var(--jsonValColor, #9ca3af);
+  }
+
+  :where(._jsonVal).string {
+    color: var(--jsonValStringColor, #059669);
+  }
+
+  :where(._jsonVal).number {
+    color: var(--jsonValNumberColor, #d97706);
+  }
+
+  :where(._jsonVal).boolean {
+    color: var(--jsonValBooleanColor, #2563eb);
+  }
+
+  :where(.diff-added) {
+    background: var(--jsonDiffAddedBg, rgba(34, 197, 94, 0.14));
+    color: var(--jsonDiffAddedColor, #166534);
+    padding: 0.125rem 0.25rem;
+    border-radius: 0.25rem;
+  }
+
+  :where(.diff-removed) {
+    background: var(--jsonDiffRemovedBg, rgba(239, 68, 68, 0.16));
+    color: var(--jsonDiffRemovedColor, #b91c1c);
+    padding: 0.125rem 0.25rem;
+    border-radius: 0.25rem;
+    text-decoration: line-through;
+  }
+
+  .diff-removed-text {
+    color: var(--jsonDiffRemovedColor, #b91c1c);
+  }
+
+  .diff-removed-row {
+    display: flex;
+    align-items: baseline;
+    gap: 0.35rem;
+  }
+
+  .diff-previous-label {
+    margin-left: 0.35rem;
+    margin-right: 0.25rem;
+    font-size: 0.65rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--jsonDiffLabelColor, #52525b);
+  }
+
+  .diff-block-added {
+    background: var(--jsonDiffAddedBg, rgba(34, 197, 94, 0.08));
+  }
+
+  .diff-block-removed {
+    background: var(--jsonDiffRemovedBg, rgba(239, 68, 68, 0.08));
+  }
+
+  :global(.dark) :where(.diff-added) {
+    background: rgba(34, 197, 94, 0.24);
+    color: #bbf7d0;
+  }
+
+  :global(.dark) :where(.diff-removed) {
+    background: rgba(239, 68, 68, 0.22);
+    color: #fecaca;
+  }
+
+  :global(.dark) .diff-previous-label {
+    color: #a1a1aa;
+  }
+
+  :global(.dark) .diff-block-added {
+    background: rgba(34, 197, 94, 0.18);
+  }
+
+  :global(.dark) .diff-block-removed {
+    background: rgba(239, 68, 68, 0.18);
+  }
+</style>

dr_widget/widgets/config_file_manager/src/lib/components/ui/badge/badge.svelte

@@ -0,0 +1,50 @@
+<script lang="ts" module>
+	import { type VariantProps, tv } from "tailwind-variants";
+
+	export const badgeVariants = tv({
+		base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap rounded-full border px-2 py-0.5 text-xs font-medium transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3",
+		variants: {
+			variant: {
+				default:
+					"bg-primary text-primary-foreground [a&]:hover:bg-primary/90 border-transparent",
+				secondary:
+					"bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90 border-transparent",
+				destructive:
+					"bg-destructive [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/70 border-transparent text-white",
+				outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	});
+
+	export type BadgeVariant = VariantProps<typeof badgeVariants>["variant"];
+</script>
+
+<script lang="ts">
+	import type { HTMLAnchorAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		href,
+		class: className,
+		variant = "default",
+		children,
+		...restProps
+	}: WithElementRef<HTMLAnchorAttributes> & {
+		variant?: BadgeVariant;
+	} = $props();
+</script>
+
+<svelte:element
+	this={href ? "a" : "span"}
+	bind:this={ref}
+	data-slot="badge"
+	{href}
+	class={cn(badgeVariants({ variant }), className)}
+	{...restProps}
+>
+	{@render children?.()}
+</svelte:element>

dr_widget/widgets/config_file_manager/src/lib/components/ui/badge/index.ts

@@ -0,0 +1,2 @@
+export { default as Badge } from "./badge.svelte";
+export { badgeVariants, type BadgeVariant } from "./badge.svelte";

dr_widget/widgets/config_file_manager/src/lib/components/ui/button/button.svelte

@@ -0,0 +1,128 @@
+<!--
+	Installed from @ieedan/shadcn-svelte-extras
+-->
+
+<script lang="ts" module>
+	import type { WithChildren, WithoutChildren } from 'bits-ui';
+	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+	import { type VariantProps, tv } from 'tailwind-variants';
+
+	export const buttonVariants = tv({
+		base: "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive focus-visible:border-ring focus-visible:ring-ring/50 relative inline-flex shrink-0 items-center justify-center gap-2 overflow-hidden rounded-md text-sm font-medium whitespace-nowrap outline-hidden transition-all select-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		variants: {
+			variant: {
+				default: 'bg-primary text-primary-foreground hover:bg-primary/90 shadow-2xs',
+				destructive:
+					'bg-destructive hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 text-white shadow-2xs',
+				outline:
+					'bg-background hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50 border shadow-2xs',
+				secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-2xs',
+				ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+				link: 'text-primary underline-offset-4 hover:underline'
+			},
+			size: {
+				default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+				sm: 'h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5',
+				lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+				icon: 'size-9'
+			}
+		},
+		defaultVariants: {
+			variant: 'default',
+			size: 'default'
+		}
+	});
+
+	export type ButtonVariant = VariantProps<typeof buttonVariants>['variant'];
+	export type ButtonSize = VariantProps<typeof buttonVariants>['size'];
+
+	export type ButtonPropsWithoutHTML = WithChildren<{
+		ref?: HTMLElement | null;
+		variant?: ButtonVariant;
+		size?: ButtonSize;
+		loading?: boolean;
+		onClickPromise?: (
+			e: MouseEvent & {
+				currentTarget: EventTarget & HTMLButtonElement;
+			}
+		) => Promise<void>;
+	}>;
+
+	export type AnchorElementProps = ButtonPropsWithoutHTML &
+		WithoutChildren<Omit<HTMLAnchorAttributes, 'href' | 'type'>> & {
+			href: HTMLAnchorAttributes['href'];
+			type?: never;
+			disabled?: HTMLButtonAttributes['disabled'];
+		};
+
+	export type ButtonElementProps = ButtonPropsWithoutHTML &
+		WithoutChildren<Omit<HTMLButtonAttributes, 'type' | 'href'>> & {
+			type?: HTMLButtonAttributes['type'];
+			href?: never;
+			disabled?: HTMLButtonAttributes['disabled'];
+		};
+
+	export type ButtonProps = AnchorElementProps | ButtonElementProps;
+</script>
+
+<script lang="ts">
+	import { cn } from '../../../utils/utils.js';
+	import LoaderCircleIcon from '@lucide/svelte/icons/loader-circle';
+
+	let {
+		ref = $bindable(null),
+		variant = 'default',
+		size = 'default',
+		href = undefined,
+		type = 'button',
+		loading = false,
+		disabled = false,
+		tabindex = 0,
+		onclick,
+		onClickPromise,
+		class: className,
+		children,
+		...rest
+	}: ButtonProps = $props();
+</script>
+
+<!-- This approach to disabled links is inspired by bits-ui see: https://github.com/huntabyte/bits-ui/pull/1055 -->
+<svelte:element
+	this={href ? 'a' : 'button'}
+	{...rest}
+	data-slot="button"
+	type={href ? undefined : type}
+	href={href && !disabled ? href : undefined}
+	disabled={href ? undefined : disabled || loading}
+	aria-disabled={href ? disabled : undefined}
+	role={href && disabled ? 'link' : undefined}
+	tabindex={href && disabled ? -1 : tabindex}
+	class={cn(buttonVariants({ variant, size }), className)}
+	bind:this={ref}
+	onclick={async (
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		e: any
+	) => {
+		onclick?.(e);
+
+		if (type === undefined) return;
+
+		if (onClickPromise) {
+			loading = true;
+
+			await onClickPromise(e);
+
+			loading = false;
+		}
+	}}
+>
+	{#if type !== undefined && loading}
+		<div class="absolute flex size-full place-items-center justify-center bg-inherit">
+			<div class="flex animate-spin place-items-center justify-center">
+				<LoaderCircleIcon class="size-4" />
+			</div>
+		</div>
+		<span class="sr-only">Loading</span>
+	{/if}
+	{@render children?.()}
+</svelte:element>

dr_widget/widgets/config_file_manager/src/lib/components/ui/button/index.ts

@@ -0,0 +1,27 @@
+/*
+	Installed from @ieedan/shadcn-svelte-extras
+*/
+
+import Root, {
+  type ButtonProps,
+  type ButtonSize,
+  type ButtonVariant,
+  type AnchorElementProps,
+  type ButtonElementProps,
+  type ButtonPropsWithoutHTML,
+  buttonVariants,
+} from "./button.svelte";
+
+export {
+  Root,
+  type ButtonProps as Props,
+  //
+  Root as Button,
+  buttonVariants,
+  type ButtonProps,
+  type ButtonSize,
+  type ButtonVariant,
+  type AnchorElementProps,
+  type ButtonElementProps,
+  type ButtonPropsWithoutHTML,
+};

dr_widget/widgets/config_file_manager/src/lib/components/ui/card/card-action.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card-action"
+	class={cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

dr_widget/widgets/config_file_manager/src/lib/components/ui/card/card-content.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div bind:this={ref} data-slot="card-content" class={cn("px-6", className)} {...restProps}>
+	{@render children?.()}
+</div>

dr_widget/widgets/config_file_manager/src/lib/components/ui/card/card-description.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLParagraphElement>> = $props();
+</script>
+
+<p
+	bind:this={ref}
+	data-slot="card-description"
+	class={cn("text-muted-foreground text-sm", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</p>

dr_widget/widgets/config_file_manager/src/lib/components/ui/card/card-footer.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card-footer"
+	class={cn("[.border-t]:pt-6 flex items-center px-6", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>