dr-widget 0.1.3__py3-none-any.whl

dr_widget/widgets/config_file_manager/src/app.css

@@ -0,0 +1,134 @@
+@import "tailwindcss";
+
+@import "tw-animate-css";
+
+@font-face {
+  font-family: "Inter";
+  src: url("/fonts/Inter-roman.var.woff2") format("woff2");
+  font-weight: 100 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.129 0.042 264.695);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.129 0.042 264.695);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.129 0.042 264.695);
+  --primary: oklch(0.208 0.042 265.755);
+  --primary-foreground: oklch(0.984 0.003 247.858);
+  --secondary: oklch(0.968 0.007 247.896);
+  --secondary-foreground: oklch(0.208 0.042 265.755);
+  --muted: oklch(0.968 0.007 247.896);
+  --muted-foreground: oklch(0.554 0.046 257.417);
+  --accent: oklch(0.968 0.007 247.896);
+  --accent-foreground: oklch(0.208 0.042 265.755);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.929 0.013 255.508);
+  --input: oklch(0.929 0.013 255.508);
+  --ring: oklch(0.704 0.04 256.788);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.984 0.003 247.858);
+  --sidebar-foreground: oklch(0.129 0.042 264.695);
+  --sidebar-primary: oklch(0.208 0.042 265.755);
+  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
+  --sidebar-accent: oklch(0.968 0.007 247.896);
+  --sidebar-accent-foreground: oklch(0.208 0.042 265.755);
+  --sidebar-border: oklch(0.929 0.013 255.508);
+  --sidebar-ring: oklch(0.704 0.04 256.788);
+}
+
+.dark {
+  --background: oklch(0.129 0.042 264.695);
+  --foreground: oklch(0.984 0.003 247.858);
+  --card: oklch(0.208 0.042 265.755);
+  --card-foreground: oklch(0.984 0.003 247.858);
+  --popover: oklch(0.208 0.042 265.755);
+  --popover-foreground: oklch(0.984 0.003 247.858);
+  --primary: oklch(0.929 0.013 255.508);
+  --primary-foreground: oklch(0.208 0.042 265.755);
+  --secondary: oklch(0.279 0.041 260.031);
+  --secondary-foreground: oklch(0.984 0.003 247.858);
+  --muted: oklch(0.279 0.041 260.031);
+  --muted-foreground: oklch(0.704 0.04 256.788);
+  --accent: oklch(0.279 0.041 260.031);
+  --accent-foreground: oklch(0.984 0.003 247.858);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.551 0.027 264.364);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.208 0.042 265.755);
+  --sidebar-foreground: oklch(0.984 0.003 247.858);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
+  --sidebar-accent: oklch(0.279 0.041 260.031);
+  --sidebar-accent-foreground: oklch(0.984 0.003 247.858);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.551 0.027 264.364);
+}
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+    font-family: var(--font-sans);
+    font-feature-settings:
+      "rlig" 1,
+      "calt" 1;
+  }
+}

dr_widget/widgets/config_file_manager/src/index.js

@@ -0,0 +1,5 @@
+import { defineWidget } from "@anywidget/svelte";
+import ConfigFileManager from "./ConfigFileManager.svelte";
+import "./app.css"; // Import styles
+
+export default defineWidget(ConfigFileManager);

dr_widget/widgets/config_file_manager/src/lib/@test_state.json

@@ -0,0 +1,20 @@
+{
+  "metadata": {
+    "version": "stores_nb_state-init-v0",
+    "saved_at": "2025-11-04T00:25:58.747765+00:00"
+  },
+  "data": {
+    "selections": {
+      "active_panel": ["summary"],
+      "harvest_window_min": 1,
+      "highlight_experimental": false,
+      "notes": "Monitor harvest cadence",
+      "orchard": ["Cloudberry Basin"],
+      "orchard_query": "Cloudberry",
+      "region": ["Emerald Belt"],
+      "show_outliers": true,
+      "view_mode": ["Overview"],
+      "yield_target": 40
+    }
+  }
+}

dr_widget/widgets/config_file_manager/src/lib/Counter.svelte

@@ -0,0 +1,10 @@
+<script>
+  let count = $state(0)
+  const increment = () => {
+    count += 1
+  }
+</script>
+
+<button onclick={increment}>
+  count is {count}
+</button>

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

@@ -0,0 +1,137 @@
+<script lang="ts">
+  import * as Card from "$lib/components/ui/card/index.js";
+  import { Button } from "$lib/components/ui/button/index.js";
+  import { FileDropZone, displaySize } from "$lib/components/ui/file-drop-zone";
+  import { Badge } from "$lib/components/ui/badge/index.js";
+  import ConfigViewerPanel from "$lib/components/file-drop/ConfigViewerPanel.svelte";
+  import type { FileDropZoneProps } from "$lib/components/ui/file-drop-zone";
+  import type { BoundFile } from "$lib/hooks/use-file-bindings";
+  import { X } from "@lucide/svelte";
+
+  const {
+    file,
+    rawContents,
+    parsedContents,
+    baselineContents,
+    savedAtLabel,
+    versionLabel,
+    dirty,
+    error,
+    maxFiles,
+    onUpload,
+    onFileRejected,
+    onRemove,
+    onLoad,
+    disableLoad,
+    wrappedContents,
+    wrappedParsed,
+  } = $props<{
+    file?: BoundFile;
+    rawContents?: string;
+    parsedContents?: unknown;
+    baselineContents?: unknown;
+    savedAtLabel?: string;
+    versionLabel?: string;
+    dirty?: boolean;
+    error?: string;
+    maxFiles: number;
+    onUpload: FileDropZoneProps["onUpload"];
+    onFileRejected?: FileDropZoneProps["onFileRejected"];
+    onRemove: () => void;
+    onLoad: () => void;
+    disableLoad?: boolean;
+    wrappedContents?: string;
+    wrappedParsed?: unknown;
+  }>();
+</script>
+
+<Card.Root>
+  <Card.Header>
+    <Card.Title>Browse Configs</Card.Title>
+    <Card.Description>
+      Select a config file to view before loading.
+    </Card.Description>
+  </Card.Header>
+  <Card.Content>
+    <div class="space-y-4">
+      {#if !file}
+        <FileDropZone
+          {maxFiles}
+          fileCount={file ? 1 : 0}
+          onUpload={onUpload}
+          onFileRejected={onFileRejected}
+        />
+      {:else}
+        <div class="space-y-3">
+          <div
+            class="flex items-center justify-between rounded-lg border border-zinc-200 bg-white p-3 text-sm shadow-sm dark:border-zinc-700 dark:bg-zinc-900"
+          >
+            <div>
+              <p class="font-medium text-zinc-800 dark:text-zinc-100">{file.name}</p>
+              {#if savedAtLabel || versionLabel}
+                <div class="mt-1 flex flex-wrap items-center gap-2 text-xs text-zinc-500 dark:text-zinc-400">
+                  {#if savedAtLabel}
+                    <span>Saved {savedAtLabel}</span>
+                  {/if}
+              {#if versionLabel}
+                <Badge variant="secondary" class="px-2 py-0.5 text-[0.65rem]">
+                  {versionLabel}
+                </Badge>
+              {/if}
+                  {#if dirty}
+                    <Badge variant="secondary" class="bg-amber-100 text-amber-700 dark:bg-amber-900/50 dark:text-amber-200">
+                      Unsaved changes
+                    </Badge>
+                  {/if}
+                  <span>{displaySize(file.size)}</span>
+                </div>
+              {:else}
+                <p class="text-xs text-zinc-500 dark:text-zinc-400">
+                  {displaySize(file.size)} · {file.type || "unknown type"}
+                </p>
+              {/if}
+            </div>
+
+            <div class="flex gap-2">
+              <Button
+                variant="ghost"
+                class="w-30 bg-slate-50 shadow-sm"
+                onclick={onLoad}
+                disabled={!rawContents || disableLoad}
+              >
+                {disableLoad ? "Loaded" : "Load"}
+              </Button>
+              <Button
+                variant="ghost"
+                size="icon"
+                class="bg-red-100 shadow-sm"
+                onclick={onRemove}
+              >
+                <span class="sr-only">Remove</span>
+                <X class="size-4" />
+              </Button>
+            </div>
+          </div>
+
+          <ConfigViewerPanel
+            data={parsedContents}
+            rawJson={rawContents}
+            baselineData={baselineContents}
+            {dirty}
+            wrappedJson={wrappedContents}
+            wrappedData={wrappedParsed}
+          />
+        </div>
+      {/if}
+
+      {#if error}
+        <div
+          class="rounded-md border border-red-200 bg-red-50 p-3 text-sm text-red-600 dark:border-red-500/40 dark:bg-red-950/40 dark:text-red-200"
+        >
+          <strong class="font-semibold">Upload error:</strong>
+          <span class="ml-2">{error}</span>
+        </div>
+      {/if}
+    </div>
+  </Card.Content>
+</Card.Root>

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

@@ -0,0 +1,94 @@
+<script lang="ts">
+  import { createElement } from "react";
+  import { onDestroy, onMount } from "svelte";
+
+  const { data } = $props<{ data?: unknown }>();
+
+  let container: HTMLDivElement | null = null;
+  let root: import("react-dom/client").Root | null = null;
+  let JsonTreeCanvas:
+    | (typeof import("$lib/react/JsonTreeCanvas"))["JsonTreeCanvas"]
+    | null = null;
+
+  const mountReact = async () => {
+    const [{ createRoot }, module] = await Promise.all([
+      import("react-dom/client"),
+      import("$lib/react/JsonTreeCanvas"),
+    ]);
+
+    JsonTreeCanvas = module.JsonTreeCanvas;
+    if (container) {
+      root = createRoot(container);
+      root.render(createElement(JsonTreeCanvas, { data }));
+    }
+  };
+
+  onMount(() => {
+    mountReact();
+  });
+
+  $effect(() => {
+    if (root && JsonTreeCanvas) {
+      root.render(createElement(JsonTreeCanvas, { data }));
+    }
+  });
+
+  onDestroy(() => {
+    root?.unmount();
+    root = null;
+  });
+</script>
+
+<div
+  class="flex h-96 w-full items-center justify-center overflow-hidden rounded-md border border-zinc-200 bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-950"
+>
+  <div
+    bind:this={container}
+    class="h-full w-full"
+    aria-label="Complex JSON graph viewer"
+  ></div>
+</div>
+
+<style>
+  :global(.json-tree-placeholder),
+  :global(.json-tree-error) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    width: 100%;
+    padding: 1.5rem;
+    text-align: center;
+    color: var(--viewer-muted, rgba(63, 63, 70, 0.7));
+  }
+
+  :global(.json-tree-error) {
+    color: #ef4444;
+  }
+
+  :global(.json-tree-node) {
+    fill: #18181b;
+    stroke: rgba(63, 63, 70, 0.25);
+    stroke-width: 1;
+    rx: 12;
+    ry: 12;
+  }
+
+  :global(.json-tree-node text) {
+    font-size: 12px;
+    fill: #f4f4f5;
+  }
+
+  :global(.json-tree-node--root) {
+    fill: #2563eb;
+  }
+
+  :global(.json-tree-node--root text) {
+    font-weight: 600;
+  }
+
+  :global(.json-tree-edge path) {
+    stroke: rgba(37, 99, 235, 0.45);
+    stroke-width: 1.5;
+  }
+</style>

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

@@ -0,0 +1,282 @@
+<script lang="ts">
+  import * as Card from "$lib/components/ui/card";
+  import { Button } from "$lib/components/ui/button";
+  import SimpleJsonViewer from "./SimpleJsonViewer.svelte";
+  import ComplexJsonViewer from "./ComplexJsonViewer.svelte";
+  type ViewerMode = "simple" | "complex";
+  type ViewerSource = "data" | "wrapped";
+
+  const {
+    data,
+    rawJson,
+    baselineData,
+    dirty = false,
+    initialMode = "simple",
+    wrappedJson,
+    wrappedData,
+  } =
+    $props<{
+      data?: unknown;
+      rawJson?: string;
+      baselineData?: unknown;
+      dirty?: boolean;
+      initialMode?: ViewerMode;
+      wrappedJson?: string;
+      wrappedData?: unknown;
+    }>();
+
+  const complexModeEnabled = false;
+
+  let mode = $state<ViewerMode>(complexModeEnabled ? initialMode : "simple");
+  let source = $state<ViewerSource>("data");
+  let copyState = $state<"idle" | "copied" | "error">("idle");
+  const hasWrappedView = $derived.by(() => Boolean(wrappedJson || wrappedData));
+
+  const switchMode = (nextMode: ViewerMode) => {
+    if (!complexModeEnabled && nextMode === "complex") {
+      mode = "simple";
+      return;
+    }
+    mode = nextMode;
+  };
+
+  const switchSource = (nextSource: ViewerSource) => {
+    if (!hasWrappedView) {
+      source = "data";
+      return;
+    }
+    source = nextSource;
+  };
+
+  $effect(() => {
+    if (!hasWrappedView) {
+      source = "data";
+    }
+  });
+
+  const effectiveRawJson = $derived.by(() =>
+    source === "data" ? rawJson : wrappedJson ?? rawJson,
+  );
+  const effectiveData = $derived.by(() =>
+    source === "data" ? data : wrappedData ?? data,
+  );
+  const effectiveDirty = $derived.by(() => (source === "data" ? dirty : false));
+  const effectiveBaseline = $derived.by(() =>
+    source === "data" ? baselineData : undefined,
+  );
+
+  const copyToClipboard = async () => {
+    const payload =
+      effectiveRawJson ??
+      (effectiveData !== undefined
+        ? JSON.stringify(effectiveData, null, 2)
+        : undefined);
+
+    if (!payload) return;
+
+    try {
+      await navigator.clipboard.writeText(payload);
+      copyState = "copied";
+      setTimeout(() => {
+        copyState = "idle";
+      }, 1800);
+    } catch {
+      copyState = "error";
+    }
+  };
+</script>
+
+<Card.Root>
+  <Card.Header>
+    <div class="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
+      <div>
+        <Card.Title>Config Preview</Card.Title>
+        <Card.Description>
+          Inspect the selected file in a formatted tree.
+        </Card.Description>
+        {#if hasWrappedView}
+          <div class="mt-2 inline-flex rounded-md border border-zinc-200 bg-white p-0.5 text-xs dark:border-zinc-800 dark:bg-zinc-900">
+            <button
+              type="button"
+              class="viewer-toggle"
+              class:viewer-toggle-active={source === "data"}
+              onclick={() => switchSource("data")}
+            >
+              Editable Data
+            </button>
+            <button
+              type="button"
+              class="viewer-toggle"
+              class:viewer-toggle-active={source === "wrapped"}
+              onclick={() => switchSource("wrapped")}
+            >
+              Saved Payload
+            </button>
+          </div>
+        {/if}
+      </div>
+
+      <div class="flex flex-col items-stretch gap-2 sm:flex-row sm:items-center">
+        {#if complexModeEnabled}
+          <div class="flex rounded-md border border-zinc-200 bg-white p-0.5 dark:border-zinc-800 dark:bg-zinc-900">
+            <button
+              type="button"
+              class="viewer-toggle"
+              class:viewer-toggle-active={mode === "simple"}
+              onclick={() => switchMode("simple")}
+            >
+              Simple
+            </button>
+            <button
+              type="button"
+              class="viewer-toggle"
+              class:viewer-toggle-active={mode === "complex"}
+              onclick={() => switchMode("complex")}
+            >
+              Complex
+            </button>
+          </div>
+        {/if}
+
+        <Button
+          variant="outline"
+          size="sm"
+          onclick={copyToClipboard}
+          disabled={effectiveData === undefined && !effectiveRawJson}
+        >
+          {copyState === "copied" ? "Copied!" : "Copy JSON"}
+        </Button>
+      </div>
+    </div>
+
+    {#if copyState === "error"}
+      <p class="text-xs font-medium text-red-500">
+        Clipboard copy failed. Try copying manually.
+      </p>
+    {/if}
+  </Card.Header>
+
+  <Card.Content class="space-y-4">
+    {#if mode === "simple" || !complexModeEnabled}
+      <div
+        class="viewer-shell rounded-xl border border-zinc-100 bg-white shadow-sm dark:border-zinc-800 dark:bg-zinc-900"
+      >
+        <SimpleJsonViewer
+          data={effectiveData}
+          baseline={effectiveDirty ? effectiveBaseline : undefined}
+          dirty={effectiveDirty}
+          depth={3}
+          preserveKeyOrder={source === "wrapped"}
+        />
+      </div>
+    {:else}
+      <div
+        class="rounded-xl border border-zinc-100 bg-white shadow-sm dark:border-zinc-800 dark:bg-zinc-900"
+      >
+        <ComplexJsonViewer data={effectiveData} />
+      </div>
+    {/if}
+
+    {#if effectiveDirty && effectiveBaseline}
+      <div class="diff-legend" role="note">
+        <span class="legend-item">
+          <span class="legend-swatch legend-swatch-added"></span>
+          New value
+        </span>
+        <span class="legend-item">
+          <span class="legend-swatch legend-swatch-removed"></span>
+          Removed value
+        </span>
+      </div>
+    {/if}
+
+  </Card.Content>
+</Card.Root>
+
+<style>
+  .viewer-toggle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.35rem 0.85rem;
+    font-size: 0.75rem;
+    font-weight: 500;
+    border-radius: 0.45rem;
+    color: #3f3f46;
+    transition: all 0.15s ease;
+  }
+
+  .viewer-toggle:hover {
+    background-color: rgba(37, 99, 235, 0.08);
+  }
+
+  .viewer-toggle-active {
+    background-color: #2563eb;
+    color: white;
+    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.15);
+  }
+
+  :global(.dark) .viewer-toggle {
+    color: #d4d4d8;
+  }
+
+  :global(.dark) .viewer-toggle:hover {
+    background-color: rgba(37, 99, 235, 0.2);
+  }
+
+  .viewer-shell {
+    max-height: 22rem;
+    overflow: auto;
+    padding: 1.25rem;
+    font-family: ui-monospace, SFMono-Regular, SFMono, Menlo, Monaco, Consolas,
+      "Liberation Mono", "Courier New", monospace;
+    font-size: 0.75rem;
+    line-height: 1.4;
+    color: #3f3f46;
+  }
+
+  .diff-legend {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+    font-size: 0.7rem;
+    color: #71717a;
+  }
+
+  .legend-item {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+  }
+
+  .legend-swatch {
+    width: 0.75rem;
+    height: 0.75rem;
+    border-radius: 0.25rem;
+  }
+
+  .legend-swatch-added {
+    background: rgba(34, 197, 94, 0.2);
+  }
+
+  .legend-swatch-removed {
+    background: rgba(239, 68, 68, 0.25);
+  }
+
+  :global(.dark) .viewer-shell {
+    color: #e4e4e7;
+    background: rgba(24, 24, 27, 0.8);
+  }
+
+  :global(.dark) .diff-legend {
+    color: #a1a1aa;
+  }
+
+  :global(.dark) .legend-swatch-added {
+    background: rgba(34, 197, 94, 0.3);
+  }
+
+  :global(.dark) .legend-swatch-removed {
+    background: rgba(239, 68, 68, 0.35);
+  }
+</style>