@anton-gustafsson/snapshot-core 0.0.5 → 0.0.7

package/dist/snapshot-nav-list.d.ts

@@ -8,7 +8,9 @@ export interface NavItem {
     route?: string;
     description?: string;
 }
-export type SnapshotNavListVariant = 'list' | 'icon-only';
+export type SnapshotNavListVariant = 'list' | 'icon-only' | 'card';
+/** `overlay` floats the edit button over the thumbnail (top-right, reveals on hover); `meta` pins it to the right edge of the title's line (description below), always visible. */
+export type SnapshotNavListEditButtonPosition = 'overlay' | 'meta';
 /**
  * Visual identity: a contact sheet. Every tile is a "frame" — numbered like a strip
  * of negatives — because that's literally what a snapshot thumbnail is. All colors
@@ -21,16 +23,22 @@ export declare class SnapshotNavList extends LitElement {
     variant: SnapshotNavListVariant;
     /** icon-only tile overlay: tint behind the title so it stays legible over any image. Transparent by default — opt into a scrim explicitly. */
     overlayTint: 'dark' | 'light' | 'none';
-    /** overlay tint strength, 0-1 */
-    overlayOpacity: number;
+    /** caption background tint strength, 0-1 */
+    textOverlayOpacity: number;
+    /** image scrim tint strength, 0-1 — 0 keeps the image clear (blur only) */
+    imageOverlayOpacity: number;
     /** backdrop blur behind the title, in px */
     overlayBlur: number;
     /** icon-only only: 'bottom' is the caption strip (default), 'center' centers a larger title. */
     labelPosition: 'bottom' | 'center';
     /** Defaults to the shared singleton — set your own instance (e.g. a namespaced or custom-storage SnapshotService) per <snapshot-nav-list> if needed. */
     snapshotService: SnapshotService;
-    /** Shows a top-right edit button per card. Off by default — clicking it fires `nav-edit` instead of `nav-select`; the host decides what "edit" means (e.g. open its own dialog component). */
+    /** Shows an edit button per card. Off by default — clicking it fires `nav-edit` instead of `nav-select`; the host decides what "edit" means (e.g. open its own dialog component). */
     editable: boolean;
+    /** Where the edit button sits: `overlay` (default) floats it over the thumbnail; `meta` pins it to the right edge of the title row, with the description below. Ignored by the icon-only variant, whose caption is itself an overlay. */
+    editButtonPosition: SnapshotNavListEditButtonPosition;
+    /** Edit button glyph. Same convention as `NavItem.icon`: a plain-text glyph (e.g. an emoji), or markup — a string starting with `<` renders as raw HTML/SVG, so a consumer can pass its own icon (e.g. `<svg>...</svg>`). */
+    editIcon: string;
     private thumbs;
     private loadingIds;
     /** In-flight dedup guard, separate from `loadingIds` (which is only for spinner display) so a repeat `loadThumb` call for an id already being fetched is a no-op. */
@@ -42,9 +50,13 @@ export declare class SnapshotNavList extends LitElement {
     willUpdate(changed: Map<string, unknown>): void;
     updated(changed: Map<string, unknown>): void;
     private loadThumb;
-    private get overlayStyle();
+    /** image scrim: blur + its own (usually 0) tint strength — independent of the caption's. */
+    private get imageOverlayStyle();
+    /** caption background: tint (to pop the text) + the same blur. */
+    private get metaStyle();
     private select;
     private edit;
+    private renderEditButton;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

package/dist/snapshot-nav-list.js

@@ -12,6 +12,7 @@ import { snapshotService as defaultSnapshotService } from './snapshot-service';
 function isMarkupIcon(icon) {
     return icon.trimStart().startsWith('<');
 }
+const DEFAULT_EDIT_ICON = '✎';
 /**
  * Visual identity: a contact sheet. Every tile is a "frame" — numbered like a strip
  * of negatives — because that's literally what a snapshot thumbnail is. All colors
@@ -25,16 +26,22 @@ export class SnapshotNavList extends LitElement {
         this.variant = 'icon-only';
         /** icon-only tile overlay: tint behind the title so it stays legible over any image. Transparent by default — opt into a scrim explicitly. */
         this.overlayTint = 'none';
-        /** overlay tint strength, 0-1 */
-        this.overlayOpacity = 0.35;
+        /** caption background tint strength, 0-1 */
+        this.textOverlayOpacity = 0.35;
+        /** image scrim tint strength, 0-1 — 0 keeps the image clear (blur only) */
+        this.imageOverlayOpacity = 0;
         /** backdrop blur behind the title, in px */
         this.overlayBlur = 0;
         /** icon-only only: 'bottom' is the caption strip (default), 'center' centers a larger title. */
         this.labelPosition = 'bottom';
         /** Defaults to the shared singleton — set your own instance (e.g. a namespaced or custom-storage SnapshotService) per <snapshot-nav-list> if needed. */
         this.snapshotService = defaultSnapshotService;
-        /** Shows a top-right edit button per card. Off by default — clicking it fires `nav-edit` instead of `nav-select`; the host decides what "edit" means (e.g. open its own dialog component). */
+        /** Shows an edit button per card. Off by default — clicking it fires `nav-edit` instead of `nav-select`; the host decides what "edit" means (e.g. open its own dialog component). */
         this.editable = false;
+        /** Where the edit button sits: `overlay` (default) floats it over the thumbnail; `meta` pins it to the right edge of the title row, with the description below. Ignored by the icon-only variant, whose caption is itself an overlay. */
+        this.editButtonPosition = 'overlay';
+        /** Edit button glyph. Same convention as `NavItem.icon`: a plain-text glyph (e.g. an emoji), or markup — a string starting with `<` renders as raw HTML/SVG, so a consumer can pass its own icon (e.g. `<svg>...</svg>`). */
+        this.editIcon = DEFAULT_EDIT_ICON;
         this.thumbs = new Map();
         this.loadingIds = new Set();
         /** In-flight dedup guard, separate from `loadingIds` (which is only for spinner display) so a repeat `loadThumb` call for an id already being fetched is a no-op. */
@@ -171,7 +178,7 @@ export class SnapshotNavList extends LitElement {
       }
     }
 
-    /* tint/blur controls apply only to the image, via this scrim layered on top of it */
+    /* independent from .meta's tint — image-overlay-opacity defaults to 0 so the image stays clear (blur only) */
     .image-overlay {
       position: absolute;
       inset: 0;
@@ -241,6 +248,50 @@ export class SnapshotNavList extends LitElement {
       outline: 2px solid var(--frame-accent);
       outline-offset: 1px;
     }
+    .edit-button svg {
+      width: 1em;
+      height: 1em;
+      display: block;
+      fill: currentColor;
+    }
+
+    /* Transparent by default (display: contents) so the existing per-variant
+       .label/.meta rules — including icon-only's absolute caption strip —
+       keep applying unchanged; it only becomes a real row when the edit
+       button moves in beside the title. */
+    .label-row {
+      display: contents;
+    }
+    /* edit-button-position="meta": button on the title's line, description
+       still on its own line underneath. Not offered for icon-only, whose
+       .meta is an absolutely positioned overlay strip — the overlay button is
+       already the right place there. */
+    :host([edit-button-position='meta']:not([variant='icon-only'])) .label-row {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      min-width: 0;
+    }
+    /* the title takes the whole row so the button lands on the card's right
+       edge, still on the title's own line (the description sits below it);
+       min-width: 0 keeps a long title ellipsising instead of pushing out. */
+    :host([edit-button-position='meta']:not([variant='icon-only'])) .label {
+      flex: 1;
+      min-width: 0;
+    }
+    :host([edit-button-position='meta']:not([variant='icon-only'])) .edit-button {
+      position: static;
+      flex-shrink: 0;
+      /* in-flow, over the host's own background: currentColor-derived instead
+         of the overlay's dark scrim, and always visible (it isn't covering
+         anything, so hiding it until hover would just make it hard to find) */
+      background: color-mix(in srgb, currentColor 10%, transparent);
+      color: inherit;
+      opacity: 1;
+    }
+    :host([edit-button-position='meta']:not([variant='icon-only'])) .edit-button:hover {
+      background: color-mix(in srgb, currentColor 20%, transparent);
+    }
 
     /* list: a compact thumb reads better in a narrow sidebar than the grid's 160x100 */
     :host([variant='list']) .thumb-wrap {
@@ -298,6 +349,72 @@ export class SnapshotNavList extends LitElement {
       font-weight: 600;
       text-align: center;
     }
+
+    /* card: a contained (never cropped) preview above real body text below it —
+       text never sits on top of the image, so unlike icon-only it needs no
+       overlay tint to stay legible. Modeled on a typical "preview card"
+       pattern: framed shot, title + description underneath, shadow on hover. */
+    :host([variant='card']) ul {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(var(--snapshot-nav-list-card-min-width, 220px), 1fr));
+      gap: var(--snapshot-nav-list-card-gap, 1.25rem);
+    }
+    :host([variant='card']) li {
+      flex-direction: column;
+      align-items: stretch;
+      gap: 0;
+      padding: var(--snapshot-nav-list-card-padding, 0.5rem);
+      background: var(--snapshot-nav-list-card-bg, transparent);
+      border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
+      box-shadow: none;
+      transition:
+        box-shadow var(--snapshot-nav-list-card-transition-dur, 0.15s) ease,
+        border-color var(--snapshot-nav-list-card-transition-dur, 0.15s) ease;
+    }
+    :host([variant='card']) li:hover,
+    :host([variant='card']) li:focus-visible {
+      background: var(--snapshot-nav-list-card-bg, transparent);
+      box-shadow: var(--snapshot-nav-list-card-shadow, 0 2px 8px color-mix(in srgb, currentColor 18%, transparent));
+      border-color: color-mix(in srgb, currentColor 22%, transparent);
+    }
+    :host([variant='card']) li:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 3px color-mix(in srgb, var(--frame-accent) 55%, transparent);
+    }
+    :host([variant='card']) li:focus-visible .thumb-wrap {
+      outline: none;
+    }
+    :host([variant='card']) .thumb-wrap {
+      width: 100%;
+      height: auto;
+      aspect-ratio: 2 / 1;
+      border-radius: var(--snapshot-nav-list-radius-sm, 7px);
+      box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 12%, transparent);
+      background: color-mix(in srgb, currentColor 4%, transparent);
+      display: grid;
+      place-items: center;
+    }
+    :host([variant='card']) .thumb-wrap::before,
+    :host([variant='card']) .thumb-wrap::after {
+      display: none;
+    }
+    :host([variant='card']) img.thumb {
+      /* contain, not cover — the whole dashboard stays readable, nothing cropped */
+      object-fit: contain;
+    }
+    :host([variant='card']) .meta {
+      padding: 0.75rem 0.5rem 0.5rem;
+      gap: 0.25rem;
+    }
+    :host([variant='card']) .label {
+      white-space: normal;
+      font-size: 1rem;
+      font-weight: 600;
+    }
+    :host([variant='card']) .description {
+      white-space: normal;
+      font-size: 0.8125rem;
+    }
   `; }
     subscribeToService() {
         this.unsubscribe?.();
@@ -371,13 +488,24 @@ export class SnapshotNavList extends LitElement {
             this.requestUpdate();
         }
     }
-    get overlayStyle() {
+    /** image scrim: blur + its own (usually 0) tint strength — independent of the caption's. */
+    get imageOverlayStyle() {
+        const blur = `${this.overlayBlur}px`;
+        if (this.overlayTint === 'none' || this.imageOverlayOpacity === 0) {
+            return { '--overlay-blur': blur };
+        }
+        const tintColor = this.overlayTint === 'light' ? '#fff' : '#000';
+        const bg = `color-mix(in srgb, ${tintColor} ${Math.round(this.imageOverlayOpacity * 100)}%, transparent)`;
+        return { '--overlay-bg': bg, '--overlay-blur': blur };
+    }
+    /** caption background: tint (to pop the text) + the same blur. */
+    get metaStyle() {
         const blur = `${this.overlayBlur}px`;
         if (this.overlayTint === 'none') {
             return { '--overlay-bg': 'transparent', '--overlay-text': 'inherit', '--overlay-blur': blur };
         }
         const tintColor = this.overlayTint === 'light' ? '#fff' : '#000';
-        const bg = `color-mix(in srgb, ${tintColor} ${Math.round(this.overlayOpacity * 100)}%, transparent)`;
+        const bg = `color-mix(in srgb, ${tintColor} ${Math.round(this.textOverlayOpacity * 100)}%, transparent)`;
         const text = this.overlayTint === 'light' ? '#111' : '#fff';
         return { '--overlay-bg': bg, '--overlay-text': text, '--overlay-blur': blur };
     }
@@ -396,8 +524,24 @@ export class SnapshotNavList extends LitElement {
             composed: true,
         }));
     }
+    renderEditButton(item) {
+        const icon = this.editIcon || DEFAULT_EDIT_ICON;
+        return html `<button
+      type="button"
+      class="edit-button"
+      part="edit-button"
+      aria-label="Edit ${item.label}"
+      @click=${(e) => this.edit(e, item)}
+    >
+      ${isMarkupIcon(icon) ? unsafeHTML(icon) : icon}
+    </button>`;
+    }
     render() {
-        const overlayStyle = this.overlayStyle;
+        const imageOverlayStyle = this.imageOverlayStyle;
+        const metaStyle = this.metaStyle;
+        // icon-only's caption is itself an overlay strip on the image, so there's
+        // no in-flow text row to put the button in — fall back to the overlay.
+        const editInMeta = this.editButtonPosition === 'meta' && this.variant !== 'icon-only';
         return html `
       <ul role="listbox">
         ${this.items.map((item) => html `
@@ -420,21 +564,14 @@ export class SnapshotNavList extends LitElement {
                           >${item.icon ? (isMarkupIcon(item.icon) ? unsafeHTML(item.icon) : item.icon) : ''}</span
                         >
                       </div>`}
-                <div class="image-overlay" part="overlay" style=${styleMap(overlayStyle)}></div>
-                ${this.editable
-            ? html `<button
-                      type="button"
-                      class="edit-button"
-                      part="edit-button"
-                      aria-label="Edit ${item.label}"
-                      @click=${(e) => this.edit(e, item)}
-                    >
-                      ✎
-                    </button>`
-            : ''}
+                <div class="image-overlay" part="overlay" style=${styleMap(imageOverlayStyle)}></div>
+                ${this.editable && !editInMeta ? this.renderEditButton(item) : ''}
               </div>
-              <div class="meta" part="meta" style=${styleMap(overlayStyle)}>
-                <span class="label" part="label">${item.label}</span>
+              <div class="meta" part="meta" style=${styleMap(metaStyle)}>
+                <div class="label-row" part="label-row">
+                  <span class="label" part="label">${item.label}</span>
+                  ${this.editable && editInMeta ? this.renderEditButton(item) : ''}
+                </div>
                 ${item.description ? html `<span class="description" part="description">${item.description}</span>` : ''}
               </div>
             </li>
@@ -453,8 +590,11 @@ __decorate([
     property({ attribute: 'overlay-tint' })
 ], SnapshotNavList.prototype, "overlayTint", void 0);
 __decorate([
-    property({ type: Number, attribute: 'overlay-opacity' })
-], SnapshotNavList.prototype, "overlayOpacity", void 0);
+    property({ type: Number, attribute: 'text-overlay-opacity' })
+], SnapshotNavList.prototype, "textOverlayOpacity", void 0);
+__decorate([
+    property({ type: Number, attribute: 'image-overlay-opacity' })
+], SnapshotNavList.prototype, "imageOverlayOpacity", void 0);
 __decorate([
     property({ type: Number, attribute: 'overlay-blur' })
 ], SnapshotNavList.prototype, "overlayBlur", void 0);
@@ -467,6 +607,12 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], SnapshotNavList.prototype, "editable", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'edit-button-position' })
+], SnapshotNavList.prototype, "editButtonPosition", void 0);
+__decorate([
+    property({ attribute: 'edit-icon' })
+], SnapshotNavList.prototype, "editIcon", void 0);
 __decorate([
     state()
 ], SnapshotNavList.prototype, "thumbs", void 0);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anton-gustafsson/snapshot-core",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "description": "A pluggable snapshot service that turns any DOM element into a stored, shareable image, plus an optional <snapshot-nav-list> web component to display them.",
   "license": "MIT",
   "repository": {