matterviz 0.3.1 → 0.3.2

package/dist/layout/InfoTag.svelte

@@ -67,63 +67,63 @@ function handle_remove(event) {
     border: 1px solid;
     white-space: nowrap;
     border-color: color-mix(in srgb, var(--tag-color) 25%, transparent);
-  }
-  .info-tag em {
-    font-style: normal;
-    font-weight: 600;
-    color: var(--tag-color);
-  }
-  .info-tag:hover:not(.disabled) {
-    background: color-mix(in srgb, var(--tag-color) 18%, transparent);
-    border-color: color-mix(in srgb, var(--tag-color) 40%, transparent);
-  }
-  .info-tag.sm {
-    font-size: 0.72em;
-    padding: 0 5pt;
-    border-radius: 4px;
-  }
-  .info-tag.md {
-    font-size: 0.8em;
-    padding: 1pt 6pt;
-    border-radius: 5px;
-  }
-  .info-tag.lg {
-    font-size: 0.9em;
-    padding: 3pt 8pt;
-    border-radius: 6px;
-  }
-  .info-tag.default {
-    --tag-color: var(--highlight, #4db6ff);
-  }
-  .info-tag.success {
-    --tag-color: var(--success-color, #10b981);
-  }
-  .info-tag.warning {
-    --tag-color: var(--warning-color, #f59e0b);
-  }
-  .info-tag.error {
-    --tag-color: var(--error-color, #ef4444);
-  }
-  .info-tag.info {
-    --tag-color: var(--info-color, #3b82f6);
-  }
-  .info-tag.disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-  .info-tag:active:not(.disabled) {
-    transform: scale(0.97);
-  }
-  .info-tag :global(.copy-checkmark) {
-    position: absolute;
-    top: 50%;
-    right: 3pt;
-    transform: translateY(-50%);
-    background: rgba(16, 185, 129, 0.9);
-    border-radius: 50%;
-    padding: 2pt;
-    display: flex;
-    animation: pop-in 0.15s ease-out;
+    em {
+      font-style: normal;
+      font-weight: 600;
+      color: var(--tag-color);
+    }
+    &:hover:not(.disabled) {
+      background: color-mix(in srgb, var(--tag-color) 18%, transparent);
+      border-color: color-mix(in srgb, var(--tag-color) 40%, transparent);
+    }
+    &.sm {
+      font-size: 0.72em;
+      padding: 0 5pt;
+      border-radius: 4px;
+    }
+    &.md {
+      font-size: 0.8em;
+      padding: 1pt 6pt;
+      border-radius: 5px;
+    }
+    &.lg {
+      font-size: 0.9em;
+      padding: 3pt 8pt;
+      border-radius: 6px;
+    }
+    &.default {
+      --tag-color: var(--highlight, #4db6ff);
+    }
+    &.success {
+      --tag-color: var(--success-color, #10b981);
+    }
+    &.warning {
+      --tag-color: var(--warning-color, #f59e0b);
+    }
+    &.error {
+      --tag-color: var(--error-color, #ef4444);
+    }
+    &.info {
+      --tag-color: var(--info-color, #3b82f6);
+    }
+    &.disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+    &:active:not(.disabled) {
+      transform: scale(0.97);
+    }
+    :global(.copy-checkmark) {
+      position: absolute;
+      top: 50%;
+      right: 3pt;
+      transform: translateY(-50%);
+      background: rgba(16, 185, 129, 0.9);
+      border-radius: 50%;
+      padding: 2pt;
+      display: flex;
+      animation: pop-in 0.15s ease-out;
+    }
   }
   [aria-label='Remove'] {
     display: flex;
@@ -137,11 +137,11 @@ function handle_remove(event) {
     border-radius: 50%;
     color: inherit;
     opacity: 0.5;
-  }
-  [aria-label='Remove']:hover {
-    opacity: 1;
-    background: rgba(239, 68, 68, 0.2);
-    color: var(--error-color, #ef4444);
+    &:hover {
+      opacity: 1;
+      background: rgba(239, 68, 68, 0.2);
+      color: var(--error-color, #ef4444);
+    }
   }
   @keyframes pop-in {
     from {

package/dist/layout/SubpageGrid.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">import Icon from '../Icon.svelte';
+const { title, subtitle, subpages } = $props();
+</script>
+
+<h1>{title}</h1>
+<p class="subtitle">{subtitle}</p>
+
+<nav class="grid">
+  {#each subpages as { href, title: page_title, description, icon } (href)}
+    <a {href} class="card">
+      <Icon {icon} class="icon" />
+      <div>
+        <h2>{page_title}</h2>
+        <p>{description}</p>
+      </div>
+    </a>
+  {/each}
+</nav>
+
+<style>
+  h1 {
+    text-align: center;
+    margin-bottom: 0.3em;
+  }
+  .subtitle {
+    text-align: center;
+    color: var(--text-color-muted);
+    margin: 0 auto 2em;
+  }
+  .grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    gap: 1.2em;
+    max-width: 1100px;
+    margin: 0 auto;
+    padding: 0;
+  }
+  .card {
+    display: flex;
+    gap: 1em;
+    align-items: flex-start;
+    padding: 1.2em 1.4em;
+    border-radius: var(--border-radius, 5pt);
+    border: 1px solid color-mix(in srgb, currentColor 15%, transparent);
+    text-decoration: none;
+    color: inherit;
+    transition: border-color 0.15s, box-shadow 0.15s;
+    &:hover {
+      border-color: color-mix(in srgb, currentColor 35%, transparent);
+      box-shadow: 0 2px 12px color-mix(in srgb, currentColor 8%, transparent);
+    }
+    &:hover :global(.icon) {
+      opacity: 1;
+    }
+    h2 {
+      margin: 0 0 0.4em;
+      font-size: 1.1em;
+    }
+    p {
+      margin: 0;
+      font-size: 0.88em;
+      color: var(--text-color-muted);
+      line-height: 1.5;
+    }
+  }
+  .card :global(.icon) {
+    width: 2em;
+    height: 2em;
+    flex-shrink: 0;
+    margin-top: 0.1em;
+    opacity: 0.6;
+    transition: opacity 0.15s;
+  }
+</style>

package/dist/layout/SubpageGrid.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { IconName } from '../icons';
+interface Props {
+    title: string;
+    subtitle: string;
+    subpages: {
+        href: string;
+        title: string;
+        description: string;
+        icon: IconName;
+    }[];
+}
+declare const SubpageGrid: import("svelte").Component<Props, {}, "">;
+type SubpageGrid = ReturnType<typeof SubpageGrid>;
+export default SubpageGrid;

package/dist/layout/index.d.ts

@@ -5,5 +5,6 @@ export { default as InfoTag } from './InfoTag.svelte';
 export * from './json-tree';
 export { default as PropertyFilter } from './PropertyFilter.svelte';
 export { default as SettingsSection } from './SettingsSection.svelte';
+export { default as SubpageGrid } from './SubpageGrid.svelte';
 export type InfoTagVariant = `default` | `success` | `warning` | `error` | `info`;
 export type InfoTagSize = `sm` | `md` | `lg`;

package/dist/layout/index.js

@@ -5,3 +5,4 @@ export { default as InfoTag } from './InfoTag.svelte';
 export * from './json-tree';
 export { default as PropertyFilter } from './PropertyFilter.svelte';
 export { default as SettingsSection } from './SettingsSection.svelte';
+export { default as SubpageGrid } from './SubpageGrid.svelte';

package/dist/layout/json-tree/JsonNode.svelte

@@ -223,9 +223,6 @@ $effect(() => {
         type="button"
         class="node-key"
         class:array-index={typeof node_key === `number`}
-        title={expandable && is_collapsed
-        ? `Click to expand · Shift+click: copy path · Ctrl+click: select`
-        : `Click to copy value · Shift+click: copy path · Ctrl+click: select`}
         tabindex="-1"
         onclick={(event) => {
           event.stopPropagation()
@@ -348,17 +345,50 @@ $effect(() => {
     font-size: var(--jt-font-size, 13px);
     line-height: var(--jt-line-height, 1.5);
     outline: none;
-  }
-  .json-node:focus {
-    outline: none;
-  }
-  .json-node.focused > .node-content {
-    background: var(--jt-focus-bg, light-dark(#e3f2fd, #0d3a58));
-    border-radius: 2px;
-  }
-  .json-node.current-match > .node-content {
-    background: var(--jt-current-match-bg, light-dark(#ffcc80, #8a5600));
-    border-radius: 2px;
+    &:focus {
+      outline: none;
+    }
+    &.focused > .node-content {
+      background: var(--jt-focus-bg, light-dark(#e3f2fd, #0d3a58));
+      border-radius: 2px;
+    }
+    &.current-match > .node-content {
+      background: var(--jt-current-match-bg, light-dark(#ffcc80, #8a5600));
+      border-radius: 2px;
+    }
+    &.selected > .node-content {
+      background: var(--jt-select-bg, light-dark(#bbdefb, #0a3050));
+    }
+    &.diff-added > .node-content {
+      background: var(
+        --jt-diff-added,
+        light-dark(rgba(76, 175, 80, 0.15), rgba(76, 175, 80, 0.2))
+      );
+    }
+    &.diff-removed > .node-content {
+      background: var(
+        --jt-diff-removed,
+        light-dark(rgba(244, 67, 54, 0.12), rgba(244, 67, 54, 0.18))
+      );
+      text-decoration: line-through;
+      opacity: 0.7;
+    }
+    &.diff-changed > .node-content {
+      background: var(
+        --jt-diff-changed,
+        light-dark(rgba(255, 193, 7, 0.15), rgba(255, 193, 7, 0.2))
+      );
+    }
+    &.sticky-header > .node-content {
+      position: sticky;
+      top: calc(var(--jt-sticky-depth) * 20px);
+      z-index: calc(100 - var(--jt-sticky-depth));
+      background: var(--jt-sticky-bg, var(--jt-bg, transparent));
+      display: flex;
+    }
+    &:hover > .node-content > .collapse-level-btn {
+      opacity: 0.5;
+    }
   }
   .node-content {
     display: inline-flex;
@@ -366,14 +396,22 @@ $effect(() => {
     gap: 2px;
     padding: 1px 2px;
     border-radius: 2px;
+    /* Higher specificity than DraggablePane's :where(button) so our reset wins when nested */
+    button {
+      background: none;
+      border: none;
+      padding: 0;
+      cursor: pointer;
+      font: inherit;
+      color: inherit;
+    }
   }
-  .node-content :where(button) {
-    background: none;
-    border: none;
-    padding: 0;
-    cursor: pointer;
-    font: inherit;
-    color: inherit;
+  .ghost .node-content {
+    background: var(
+      --jt-diff-removed,
+      light-dark(rgba(244, 67, 54, 0.12), rgba(244, 67, 54, 0.18))
+    );
+    text-decoration: line-through;
   }
   .collapse-toggle {
     display: inline-flex;
@@ -384,17 +422,17 @@ $effect(() => {
     margin: 0;
     color: var(--jt-arrow, light-dark(#6e6e6e, #858585));
     flex-shrink: 0;
-  }
-  .collapse-toggle:hover {
-    color: light-dark(#000, #fff);
+    &:hover {
+      color: light-dark(#000, #fff);
+    }
   }
   .arrow {
     display: inline-block;
     font-size: 0.7em;
     transition: transform 0.15s ease;
-  }
-  .arrow.collapsed {
-    transform: rotate(-90deg);
+    &.collapsed {
+      transform: rotate(-90deg);
+    }
   }
   .no-toggle {
     display: inline-block;
@@ -403,30 +441,29 @@ $effect(() => {
   }
   .node-key {
     color: var(--jt-key, light-dark(#001080, #9cdcfe));
+    &:hover {
+      text-decoration: underline;
+      .action-hint {
+        opacity: 0.6;
+      }
+    }
+    &.array-index .index {
+      color: var(--jt-number, light-dark(#098658, #b5cea8));
+    }
   }
-  .node-key:hover {
-    text-decoration: underline;
-  }
-  .node-key.array-index .index {
-    color: var(--jt-number, light-dark(#098658, #b5cea8));
+  .colon, .comma, .bracket {
+    color: var(--jt-punctuation, light-dark(#000, #d4d4d4));
   }
   .colon {
-    color: var(--jt-punctuation, light-dark(#000, #d4d4d4));
     margin-right: 4px;
   }
-  .bracket {
-    color: var(--jt-punctuation, light-dark(#000, #d4d4d4));
-  }
   .preview {
     color: var(--jt-preview, light-dark(#808080, #808080));
     font-style: italic;
     margin: 0 4px;
-  }
-  .preview:hover {
-    text-decoration: underline;
-  }
-  .comma {
-    color: var(--jt-punctuation, light-dark(#000, #d4d4d4));
+    &:hover {
+      text-decoration: underline;
+    }
   }
   .children {
     padding-left: var(--jt-indent, 1.2em);
@@ -434,39 +471,6 @@ $effect(() => {
       var(--jt-indent-guide, light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1)));
     margin-left: 0.5em;
   }
-  .json-node.selected > .node-content {
-    background: var(--jt-select-bg, light-dark(#bbdefb, #0a3050));
-  }
-  .json-node.diff-added > .node-content {
-    background: var(
-      --jt-diff-added,
-      light-dark(rgba(76, 175, 80, 0.15), rgba(76, 175, 80, 0.2))
-    );
-  }
-  .json-node.diff-removed > .node-content,
-  .ghost .node-content {
-    background: var(
-      --jt-diff-removed,
-      light-dark(rgba(244, 67, 54, 0.12), rgba(244, 67, 54, 0.18))
-    );
-    text-decoration: line-through;
-  }
-  .json-node.diff-removed > .node-content {
-    opacity: 0.7;
-  }
-  .json-node.diff-changed > .node-content {
-    background: var(
-      --jt-diff-changed,
-      light-dark(rgba(255, 193, 7, 0.15), rgba(255, 193, 7, 0.2))
-    );
-  }
-  .json-node.sticky-header > .node-content {
-    position: sticky;
-    top: calc(var(--jt-sticky-depth) * 20px);
-    z-index: calc(100 - var(--jt-sticky-depth));
-    background: var(--jt-sticky-bg, var(--jt-bg, light-dark(white, #1e1e1e)));
-    display: flex;
-  }
   .action-hint {
     opacity: 0;
     font-size: 0.8em;
@@ -474,9 +478,6 @@ $effect(() => {
     transition: opacity 0.15s;
     color: var(--jt-arrow, light-dark(#6e6e6e, #858585));
   }
-  .node-key:hover .action-hint {
-    opacity: 0.6;
-  }
   .size-hint {
     font-size: 0.8em;
     color: var(--jt-preview, light-dark(#808080, #808080));
@@ -490,13 +491,10 @@ $effect(() => {
     color: var(--jt-arrow, light-dark(#6e6e6e, #858585));
     transition: opacity 0.15s;
     margin-left: 4px;
-  }
-  .json-node:hover > .node-content > .collapse-level-btn {
-    opacity: 0.5;
-  }
-  .collapse-level-btn:hover {
-    opacity: 1;
-    color: light-dark(#000, #fff);
+    &:hover {
+      opacity: 1;
+      color: light-dark(#000, #fff);
+    }
   }
   .ghost {
     opacity: 0.5;

package/dist/layout/json-tree/JsonTree.svelte

@@ -10,7 +10,7 @@ import { build_ghost_map, collect_all_paths, compute_diff, find_matching_paths,
 const ARROW_KEYS = new Set([`ArrowDown`, `ArrowUp`, `ArrowLeft`, `ArrowRight`]);
 // Shared empty set for when there's no search query (avoid allocation on every derivation)
 const EMPTY_MATCHES = new SvelteSet();
-let { value, root_label, default_fold_level = 2, auto_fold_arrays = 10, auto_fold_objects = 20, collapsed_paths = $bindable(new SvelteSet()), show_header = true, show_data_types = $bindable(false), show_array_indices = $bindable(true), sort_keys = false, max_string_length = 200, highlight_changes = true, onselect, oncopy, download_filename, compare_value, ...rest } = $props();
+let { value, root_label, default_fold_level = 2, auto_fold_arrays = 10, auto_fold_objects = 20, collapsed_paths = $bindable(new SvelteSet()), show_header = true, show_data_types = $bindable(false), show_array_indices = $bindable(true), sort_keys = false, max_string_length = 200, highlight_changes = true, onselect, oncopy, download_filename, compare_value, editable = false, onchange, ...rest } = $props();
 // Internal state
 let search_query = $state(``);
 let search_input_value = $state(``);
@@ -371,6 +371,7 @@ const context = {
             sort_keys,
             max_string_length,
             highlight_changes,
+            editable,
         };
     },
     get collapsed() {
@@ -419,6 +420,9 @@ const context = {
         return ghost_map;
     },
     collapse_children_only,
+    get onchange() {
+        return onchange;
+    },
 };
 setContext(JSON_TREE_CONTEXT_KEY, context);
 // Keyboard navigation at tree level
@@ -832,12 +836,14 @@ function handle_search_keydown(event) {
     border-radius: var(--jt-border-radius, 4px);
     overflow: hidden;
   }
+  /* --jt-header-bg, --jt-header-border, --jt-btn-bg, --jt-btn-hover-bg, --jt-btn-active-bg
+     intentionally removed in favor of transparent/opacity-based button styling.
+     Use --jt-hover-bg to customize the button hover background. */
   .json-tree-header {
     display: flex;
     align-items: center;
     gap: 8px;
     padding: 6px 8px;
-    background: var(--jt-header-bg);
     flex-wrap: wrap;
   }
   .search-wrapper {
@@ -898,26 +904,22 @@ function handle_search_keydown(event) {
     min-width: 24px;
     height: 24px;
     padding: 2px 6px;
-    border: 1px solid var(--jt-header-border);
-    background: var(--jt-btn-bg, light-dark(white, rgba(255, 255, 255, 0.1)));
+    border: none;
+    background: transparent;
     border-radius: 3px;
     cursor: pointer;
     font-size: 11px;
     font-weight: 500;
     color: inherit;
-    transition: background 0.15s;
+    opacity: 0.6;
+    transition: opacity 0.15s, background 0.15s;
   }
   .controls button:hover {
-    background: var(
-      --jt-btn-hover-bg,
-      light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.15))
-    );
+    opacity: 1;
+    background: var(--jt-hover-bg);
   }
   .controls button.active {
-    background: var(
-      --jt-btn-active-bg,
-      light-dark(rgba(0, 0, 0, 0.12), rgba(255, 255, 255, 0.2))
-    );
+    opacity: 1;
   }
   .match-nav {
     display: flex;
@@ -931,17 +933,16 @@ function handle_search_keydown(event) {
     width: 20px;
     height: 20px;
     padding: 0;
-    border: 1px solid var(--jt-header-border);
-    background: var(--jt-btn-bg, light-dark(white, rgba(255, 255, 255, 0.1)));
+    border: none;
+    background: transparent;
     border-radius: 3px;
     cursor: pointer;
     color: inherit;
+    opacity: 0.6;
   }
   .nav-btn:hover {
-    background: var(
-      --jt-btn-hover-bg,
-      light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.15))
-    );
+    opacity: 1;
+    background: var(--jt-hover-bg);
   }
   .match-count {
     font-size: 11px;

package/dist/layout/json-tree/JsonTree.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { HTMLAttributes } from 'svelte/elements';
 import type { JsonTreeProps } from './types';
-type $$ComponentProps = JsonTreeProps & Omit<HTMLAttributes<HTMLDivElement>, `onselect`>;
+type $$ComponentProps = JsonTreeProps & Omit<HTMLAttributes<HTMLDivElement>, `onselect` | `onchange`>;
 declare const JsonTree: import("svelte").Component<$$ComponentProps, {}, "collapsed_paths" | "show_data_types" | "show_array_indices">;
 type JsonTree = ReturnType<typeof JsonTree>;
 export default JsonTree;