matterviz 0.3.1 → 0.3.3

package/dist/layout/SubpageGrid.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+  import Icon from '../Icon.svelte'
+  import type { IconName } from '../icons'
+
+  interface Props {
+    title: string
+    subtitle: string
+    subpages: { href: string; title: string; description: string; icon: IconName }[]
+  }
+  const { title, subtitle, subpages }: Props = $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';