dr-widget 0.1.3__py3-none-any.whl

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

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: TabsPrimitive.ContentProps = $props();
+</script>
+
+<TabsPrimitive.Content
+	bind:ref
+	data-slot="tabs-content"
+	class={cn("flex-1 outline-none", className)}
+	{...restProps}
+/>

dr_widget/widgets/config_file_manager/src/lib/components/ui/tabs/tabs-list.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: TabsPrimitive.ListProps = $props();
+</script>
+
+<TabsPrimitive.List
+	bind:ref
+	data-slot="tabs-list"
+	class={cn(
+		"bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
+		className
+	)}
+	{...restProps}
+/>

dr_widget/widgets/config_file_manager/src/lib/components/ui/tabs/tabs-trigger.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: TabsPrimitive.TriggerProps = $props();
+</script>
+
+<TabsPrimitive.Trigger
+	bind:ref
+	data-slot="tabs-trigger"
+	class={cn(
+		"data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-transparent px-2 py-1 text-sm font-medium transition-[color,box-shadow] focus-visible:outline-1 focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		className
+	)}
+	{...restProps}
+/>

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

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(""),
+		class: className,
+		...restProps
+	}: TabsPrimitive.RootProps = $props();
+</script>
+
+<TabsPrimitive.Root
+	bind:ref
+	bind:value
+	data-slot="tabs"
+	class={cn("flex flex-col gap-2", className)}
+	{...restProps}
+/>

dr_widget/widgets/config_file_manager/src/lib/hooks/use-file-bindings.ts

@@ -0,0 +1,189 @@
+import type { FileDropZoneProps } from "$lib/components/ui/file-drop-zone";
+
+export type BoundFile = {
+  name: string;
+  size: number;
+  type: string;
+};
+
+export type FileBinding = {
+  file_count: number;
+  files: string;
+  error: string;
+  current_state?: string | null;
+  baseline_state?: string | null;
+  config_file?: string | null;
+  config_file_display?: string | null;
+  version?: string | null;
+  saved_at?: string | null;
+};
+
+const coerceString = (value?: string | null) =>
+  typeof value === "string" ? value : (value ?? "");
+
+export const normalizeBoundFiles = (
+  files: unknown,
+  limit?: number,
+): BoundFile[] => {
+  if (!Array.isArray(files)) return [];
+
+  const validItems = files
+    .filter(
+      (item) =>
+        item &&
+        typeof item.name === "string" &&
+        typeof item.size === "number" &&
+        typeof item.type === "string",
+    )
+    .map((item) => ({
+      name: item.name,
+      size: item.size,
+      type: item.type,
+    }));
+
+  const limitSize = typeof limit === "number" ? limit : validItems.length;
+  return validItems.slice(0, limitSize);
+};
+
+export const readBindingFiles = (bindings: FileBinding): BoundFile[] => {
+  if (!bindings?.files) return [];
+  try {
+    const parsed = JSON.parse(bindings.files) as unknown;
+    return normalizeBoundFiles(parsed);
+  } catch {
+    return [];
+  }
+};
+
+export const writeBindingFiles = (
+  bindings: FileBinding,
+  files: BoundFile[],
+): void => {
+  const normalized = normalizeBoundFiles(files);
+  bindings.files = JSON.stringify(normalized);
+  bindings.file_count = normalized.length;
+};
+
+export const writeBindingCurrentState = (
+  bindings: FileBinding,
+  contents?: string | null,
+): void => {
+  bindings.current_state = coerceString(contents);
+};
+
+export const writeBindingBaselineState = (
+  bindings: FileBinding,
+  contents?: string | null,
+): void => {
+  bindings.baseline_state = coerceString(contents);
+};
+
+export const writeBindingVersion = (
+  bindings: FileBinding,
+  version?: string | null,
+): void => {
+  bindings.version = coerceString(version);
+};
+
+export const writeBindingConfigFile = (
+  bindings: FileBinding,
+  path?: string | null,
+): void => {
+  bindings.config_file = coerceString(path);
+};
+
+export const writeBindingConfigFileDisplay = (
+  bindings: FileBinding,
+  path?: string | null,
+): void => {
+  bindings.config_file_display = coerceString(path);
+};
+
+export const writeBindingSavedAt = (
+  bindings: FileBinding,
+  timestamp?: string | null,
+): void => {
+  bindings.saved_at = coerceString(timestamp);
+};
+
+export const writeBindingError = (
+  bindings: FileBinding,
+  error?: string | null,
+): void => {
+  bindings.error = coerceString(error);
+};
+
+type UploadHandler = FileDropZoneProps["onUpload"];
+type RejectHandler = NonNullable<FileDropZoneProps["onFileRejected"]>;
+
+export function createFileBindingHandlers({
+  bindings,
+  maxFiles,
+}: {
+  bindings: FileBinding;
+  maxFiles?: number;
+}) {
+  const maxFileCount = Number.isFinite(maxFiles) ? maxFiles : undefined;
+
+  const enforceLimit = (files: BoundFile[]): BoundFile[] => {
+    if (!maxFileCount) return files;
+    return files.slice(0, maxFileCount);
+  };
+
+  const readBoundFiles = (): BoundFile[] => readBindingFiles(bindings);
+
+  const writeBoundFiles = (files: BoundFile[]): void => {
+    writeBindingFiles(bindings, enforceLimit(files));
+  };
+
+  const handleUpload: UploadHandler = async (files) => {
+    const nextFiles = files
+      .slice(0, maxFileCount ?? files.length)
+      .map((file) => ({
+        name: file.name,
+        size: file.size,
+        type: file.type,
+      }));
+
+    if (nextFiles.length === 0) return;
+
+    writeBoundFiles(nextFiles);
+    writeBindingError(bindings, "");
+  };
+
+  const handleFileRejected: RejectHandler = ({ reason, file }) => {
+    writeBindingError(bindings, `${file.name}: ${reason}`);
+  };
+
+  const removeFile = (index: number): void => {
+    const current = readBoundFiles();
+    current.splice(index, 1);
+    writeBoundFiles(current);
+
+    if (current.length === 0) {
+      writeBindingError(bindings, "");
+    }
+  };
+
+  return {
+    bindings,
+    readBoundFiles,
+    writeBoundFiles,
+    handleUpload,
+    handleFileRejected,
+    removeFile,
+    writeCurrentState: (contents?: string | null) =>
+      writeBindingCurrentState(bindings, contents),
+    writeBaselineState: (contents?: string | null) =>
+      writeBindingBaselineState(bindings, contents),
+    writeVersion: (version?: string | null) =>
+      writeBindingVersion(bindings, version),
+    writeConfigFile: (path?: string | null) =>
+      writeBindingConfigFile(bindings, path),
+    writeConfigFileDisplay: (path?: string | null) =>
+      writeBindingConfigFileDisplay(bindings, path),
+    writeSavedAt: (timestamp?: string | null) =>
+      writeBindingSavedAt(bindings, timestamp),
+    writeError: (error?: string | null) => writeBindingError(bindings, error),
+  };
+}

dr_widget/widgets/config_file_manager/src/lib/react/JsonTreeCanvas.tsx

@@ -0,0 +1,207 @@
+import { useMemo } from "react";
+import {
+  Canvas,
+  Edge,
+  EdgeData,
+  EdgeProps,
+  Node,
+  NodeData,
+  NodeProps,
+} from "reaflow";
+import { TransformComponent, TransformWrapper } from "react-zoom-pan-pinch";
+
+type JsonTreeCanvasProps = {
+  data?: unknown;
+};
+
+type BuildResult = {
+  nodes: NodeData[];
+  edges: EdgeData[];
+};
+
+const formatPrimitive = (value: unknown): string => {
+  if (typeof value === "string") {
+    return `"${value}"`;
+  }
+  if (typeof value === "number" || typeof value === "bigint") {
+    return `${value}`;
+  }
+  if (typeof value === "boolean") {
+    return value ? "true" : "false";
+  }
+  if (value === null) {
+    return "null";
+  }
+  if (value === undefined) {
+    return "undefined";
+  }
+  return String(value);
+};
+
+const createGraph = (input: unknown): BuildResult => {
+  const nodes: NodeData[] = [];
+  const edges: EdgeData[] = [];
+  let idCounter = 0;
+  let edgeCounter = 0;
+
+  const createNode = (text: string, depth: number) => {
+    const id = `node-${idCounter++}`;
+    const lines = text.split("\n").length;
+    const width = Math.min(Math.max(text.length * 8 + 32, 160), 320);
+    const height = Math.max(lines * 22 + 20, 48);
+
+    nodes.push({
+      id,
+      text,
+      width,
+      height,
+      className:
+        depth === 0 ? "json-tree-node json-tree-node--root" : "json-tree-node",
+      data: { depth, text },
+      selectionDisabled: true,
+    });
+
+    return id;
+  };
+
+  const createEdge = (from: string, to: string) => {
+    const id = `edge-${edgeCounter++}`;
+    edges.push({
+      id,
+      from,
+      to,
+      className: "json-tree-edge",
+      containerClassName: "json-tree-edge-container",
+      selectionDisabled: true,
+    });
+  };
+
+  const visit = (
+    value: unknown,
+    key: string,
+    depth: number,
+    parentId?: string,
+  ) => {
+    const isObject = value !== null && typeof value === "object";
+    const isArray = Array.isArray(value);
+
+    const baseLabel = depth === 0 ? "(root)" : key === "" ? "(item)" : key;
+
+    let label = baseLabel;
+
+    if (!isObject) {
+      label = `${baseLabel}: ${formatPrimitive(value)}`;
+    } else if (isArray) {
+      label = `${baseLabel} [${(value as unknown[]).length}]`;
+    } else {
+      label = `${baseLabel} {${Object.keys(value as object).length}}`;
+    }
+
+    const currentId = createNode(label, depth);
+
+    if (parentId) {
+      createEdge(parentId, currentId);
+    }
+
+    if (!isObject) {
+      return currentId;
+    }
+
+    const entries = isArray
+      ? (value as unknown[]).map<[string, unknown]>((item, index) => [
+          index.toString(),
+          item,
+        ])
+      : Object.entries(value as Record<string, unknown>);
+
+    if (entries.length === 0) {
+      const emptyId = createNode("(empty)", depth + 1);
+      createEdge(currentId, emptyId);
+      return currentId;
+    }
+
+    for (const [childKey, childValue] of entries) {
+      visit(childValue, childKey, depth + 1, currentId);
+    }
+
+    return currentId;
+  };
+
+  visit(input, "root", 0);
+
+  return { nodes, edges };
+};
+
+export function JsonTreeCanvas({ data }: JsonTreeCanvasProps) {
+  const { nodes, edges, error } = useMemo(() => {
+    if (data === undefined) {
+      return { nodes: [], edges: [], error: null as null | string };
+    }
+
+    try {
+      const build = createGraph(data);
+      return { ...build, error: null };
+    } catch (err) {
+      return {
+        nodes: [],
+        edges: [],
+        error:
+          err instanceof Error ? err.message : "Failed to render JSON graph.",
+      };
+    }
+  }, [data]);
+
+  const renderNode = (props: NodeProps<NodeData>) => <Node {...props} />;
+
+  const renderEdge = (props: Partial<EdgeProps>) => <Edge {...props} />;
+
+  if (data === undefined) {
+    return (
+      <div className="json-tree-placeholder">
+        <p>Select a file to visualise the graph.</p>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="json-tree-error">
+        <p>{error}</p>
+      </div>
+    );
+  }
+
+  return (
+    <TransformWrapper
+      minScale={0.2}
+      maxScale={1.6}
+      initialScale={0.8}
+      wheel={{ step: 0.04 }}
+      doubleClick={{ disabled: true }}
+    >
+      <TransformComponent
+        wrapperStyle={{
+          height: "100%",
+          width: "100%",
+          overflow: "hidden",
+        }}
+      >
+        <Canvas
+          nodes={nodes}
+          edges={edges}
+          height={Math.max(nodes.length * 140, 400)}
+          width={Math.max(nodes.length * 120, 600)}
+          maxHeight={1600}
+          maxWidth={1600}
+          animated={false}
+          pannable={false}
+          zoomable={false}
+          fit={true}
+          direction="RIGHT"
+          node={renderNode}
+          edge={renderEdge}
+        />
+      </TransformComponent>
+    </TransformWrapper>
+  );
+}

dr_widget/widgets/config_file_manager/src/lib/utils/config-format.ts

@@ -0,0 +1,113 @@
+export type NormalizedConfigPayload = {
+  data: Record<string, unknown>;
+  metadata: Record<string, unknown>;
+  version?: string;
+  savedAt?: string;
+};
+
+export function normalizeConfigPayload(
+  payload: unknown,
+): NormalizedConfigPayload {
+  if (!payload || typeof payload !== "object" || Array.isArray(payload)) {
+    return { data: {}, metadata: {} };
+  }
+
+  const record = payload as Record<string, unknown>;
+  const dataCandidate = record["data"];
+  let data: Record<string, unknown>;
+  const metadataCandidate = record["metadata"];
+  const metadata: Record<string, unknown> =
+    metadataCandidate &&
+    typeof metadataCandidate === "object" &&
+    !Array.isArray(metadataCandidate)
+      ? { ...(metadataCandidate as Record<string, unknown>) }
+      : {};
+
+  if (
+    dataCandidate &&
+    typeof dataCandidate === "object" &&
+    !Array.isArray(dataCandidate)
+  ) {
+    data = dataCandidate as Record<string, unknown>;
+  } else if (
+    record["selections"] &&
+    typeof record["selections"] === "object" &&
+    !Array.isArray(record["selections"])
+  ) {
+    data = { selections: record["selections"] as Record<string, unknown> };
+  } else {
+    data = Object.fromEntries(
+      Object.entries(record).filter(
+        ([key]) =>
+          key !== "version" && key !== "saved_at" && key !== "metadata",
+      ),
+    );
+  }
+
+  const versionValue = metadata["version"] ?? record["version"];
+  const savedAtValue = metadata["saved_at"] ?? record["saved_at"];
+  const version =
+    typeof versionValue === "string"
+      ? versionValue
+      : typeof versionValue === "number"
+        ? String(versionValue)
+        : undefined;
+  const savedAt = typeof savedAtValue === "string" ? savedAtValue : undefined;
+
+  return {
+    data,
+    metadata,
+    version,
+    savedAt,
+  };
+}
+
+export function buildWrappedPayload({
+  data,
+  version,
+  savedAt,
+  metadata,
+}: {
+  data: Record<string, unknown>;
+  version?: string | null;
+  savedAt?: string | null;
+  metadata?: Record<string, unknown> | null;
+}): Record<string, unknown> {
+  const payloadMetadata: Record<string, unknown> = metadata
+    ? { ...metadata }
+    : {};
+
+  if (version && version.trim().length > 0) {
+    payloadMetadata.version = version;
+  }
+
+  if (savedAt && savedAt.trim().length > 0) {
+    payloadMetadata.saved_at = savedAt;
+  }
+
+  const payload: Record<string, unknown> = {
+    metadata: payloadMetadata,
+    data,
+  };
+
+  return payload;
+}
+
+export function formatSavedAt(value: unknown): string | undefined {
+  if (typeof value !== "string" || value.trim().length === 0) {
+    return undefined;
+  }
+
+  const parsed = new Date(value);
+  if (Number.isNaN(parsed.getTime())) {
+    return value;
+  }
+
+  return new Intl.DateTimeFormat(undefined, {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  }).format(parsed);
+}

dr_widget/widgets/config_file_manager/src/lib/utils/utils.ts

@@ -0,0 +1,21 @@
+/*
+	Installed from @ieedan/shadcn-svelte-extras
+*/
+
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type WithoutChild<T> = T extends { child?: any } ? Omit<T, "child"> : T;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type WithoutChildren<T> = T extends { children?: any }
+  ? Omit<T, "children">
+  : T;
+export type WithoutChildrenOrChild<T> = WithoutChildren<WithoutChild<T>>;
+export type WithElementRef<T, U extends HTMLElement = HTMLElement> = T & {
+  ref?: U | null;
+};

dr_widget/widgets/config_file_manager/src/lib/utils.ts

@@ -0,0 +1,17 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type WithoutChild<T> = T extends { child?: any } ? Omit<T, "child"> : T;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type WithoutChildren<T> = T extends { children?: any }
+  ? Omit<T, "children">
+  : T;
+export type WithoutChildrenOrChild<T> = WithoutChildren<WithoutChild<T>>;
+export type WithElementRef<T, U extends HTMLElement = HTMLElement> = T & {
+  ref?: U | null;
+};

dr_widget/widgets/config_file_manager/src/main.js

@@ -0,0 +1,7 @@
+import "./app.css";
+import App from "./App.svelte";
+import { mount } from "svelte";
+
+mount(App, {
+  target: document.getElementById("app"),
+});