@meoslabs/save-in-meos 0.0.1

package/dist/widget/index.js

@@ -0,0 +1,156 @@
+/**
+ * WHY: Embeddable save-in-meos widget — builds MDP import URLs on user gesture.
+ * WHAT: initSaveButton mounts a branded chip (shadow DOM or fixed classes) + navigates.
+ * WHERE: Bundled as dist/widget.iife.js for script-tag consumers.
+ * GUARDED: No label/style overrides — branding enforced by implementation + checker.
+ */
+import { buildImportIntentV1, buildMeosLink, } from "../import-intent-v1.js";
+import { applyChipPresentation, resolveChipLabel, } from "./chip-theme.js";
+import { buildSaveIconSvg } from "./icon.js";
+import { MEOS_SAVE_DOCUMENT_CSS, MEOS_SAVE_SHADOW_CSS } from "./styles.js";
+export { SAVE_CHIP_HOST_VARS, SAVE_CHIP_PRESETS, resolveChipLabel, } from "./chip-theme.js";
+export const MEOS_SAVE_LABEL = "save in meos";
+/** Visible label when `chipPreset: "compact"` — aria-label stays MEOS_SAVE_LABEL. */
+export const MEOS_SAVE_COMPACT_LABEL = "save";
+export const MEOS_SAVE_CHIP_CLASS = "meos-save-chip";
+export const MEOS_SAVE_ICON_CLASS = "meos-save-chip__icon";
+export const MEOS_SAVE_LABEL_CLASS = "meos-save-chip__label";
+const STYLE_TAG_ID = "meos-save-widget-styles";
+const SHADOW_HOST_ATTR = "data-meos-save-host";
+const WIRE_CLICK_ABORT = Symbol("meos-wire-click-abort");
+let stylesInjected = false;
+/**
+ * Build inner HTML for the branded chip (icon + label).
+ * Pass `chipPreset: "compact"` for the short **save** label.
+ */
+export function buildSaveChipMarkup(preset) {
+    const label = resolveChipLabel(preset);
+    return `${buildSaveIconSvg(MEOS_SAVE_ICON_CLASS)}<span class="${MEOS_SAVE_LABEL_CLASS}">${label}</span>`;
+}
+/** Inject widget styles once at document level (npm hosts that import widget.css may skip). */
+export function ensureWidgetStyles() {
+    if (stylesInjected || typeof document === "undefined")
+        return;
+    if (document.getElementById(STYLE_TAG_ID)) {
+        stylesInjected = true;
+        return;
+    }
+    const style = document.createElement("style");
+    style.id = STYLE_TAG_ID;
+    style.setAttribute("data-meos-save", "");
+    style.textContent = MEOS_SAVE_DOCUMENT_CSS;
+    document.head.appendChild(style);
+    stylesInjected = true;
+}
+function isEmptyMount(el) {
+    return el.childNodes.length === 0 && !el.textContent?.trim();
+}
+function applyBrandedChip(button, preset) {
+    button.type = "button";
+    button.className = MEOS_SAVE_CHIP_CLASS;
+    button.setAttribute("data-meos-save", "");
+    button.setAttribute("aria-label", MEOS_SAVE_LABEL);
+    if (preset === "compact") {
+        button.setAttribute("data-meos-chip-preset", "compact");
+    }
+    button.innerHTML = buildSaveChipMarkup(preset);
+}
+function shadowHostButton(host) {
+    const button = host.shadowRoot?.querySelector("button");
+    return button instanceof HTMLButtonElement ? button : null;
+}
+function mountInShadowHost(host, options) {
+    applyChipPresentation(host, options.theme ?? "auto", options.chip, options.chipPreset);
+    host.setAttribute(SHADOW_HOST_ATTR, "");
+    const existing = shadowHostButton(host);
+    if (existing) {
+        applyBrandedChip(existing, options.chipPreset);
+        wireClick(existing, options, true);
+        return existing;
+    }
+    const shadow = host.attachShadow({ mode: "closed" });
+    const style = document.createElement("style");
+    style.textContent = MEOS_SAVE_SHADOW_CSS;
+    shadow.appendChild(style);
+    const button = document.createElement("button");
+    applyBrandedChip(button, options.chipPreset);
+    shadow.appendChild(button);
+    wireClick(button, options);
+    return button;
+}
+function wireClick(button, options, replace = false) {
+    const host = button;
+    if (replace && host[WIRE_CLICK_ABORT]) {
+        host[WIRE_CLICK_ABORT].abort();
+    }
+    const ac = new AbortController();
+    host[WIRE_CLICK_ABORT] = ac;
+    let capturedSelection;
+    button.addEventListener("pointerdown", () => {
+        capturedSelection = getSelectionText();
+    }, { signal: ac.signal });
+    button.addEventListener("click", (event) => {
+        event.preventDefault();
+        try {
+            const pageUrl = typeof location !== "undefined"
+                ? location.href
+                : (options.u ?? "");
+            const intent = buildImportIntentV1({
+                u: pageUrl,
+                t: options.t ?? capturedSelection ?? getSelectionText(),
+                images: options.images,
+                blocks: options.blocks,
+            });
+            const href = buildMeosLink(intent, options.widgetId);
+            if (typeof location !== "undefined") {
+                location.href = href;
+            }
+        }
+        catch (err) {
+            console.error("[save-in-meos] failed to build import link", err);
+        }
+    }, { signal: ac.signal });
+}
+/**
+ * Wire a mount point (or existing button) to build and navigate to a meos import deeplink.
+ *
+ * - Empty container → closed shadow root with branded chip (integrators cannot restyle).
+ * - Existing button/anchor → branded markup + document-level styles (classes are fixed).
+ */
+export function initSaveButton(target, options = {
+    u: typeof location !== "undefined" ? location.href : "",
+}) {
+    const el = typeof target === "string"
+        ? document.querySelector(target)
+        : target;
+    if (!el)
+        return null;
+    if (isEmptyMount(el) || el.hasAttribute(SHADOW_HOST_ATTR)) {
+        return mountInShadowHost(el, options);
+    }
+    ensureWidgetStyles();
+    let button;
+    if (el instanceof HTMLButtonElement) {
+        button = el;
+    }
+    else if (el instanceof HTMLAnchorElement) {
+        button = document.createElement("button");
+        button.type = "button";
+        el.replaceWith(button);
+    }
+    else {
+        button = document.createElement("button");
+        el.appendChild(button);
+    }
+    applyBrandedChip(button, options.chipPreset);
+    applyChipPresentation(button, options.theme ?? "auto", options.chip, options.chipPreset);
+    wireClick(button, options, true);
+    return button;
+}
+function getSelectionText() {
+    if (typeof window === "undefined" || !window.getSelection)
+        return undefined;
+    const text = window.getSelection()?.toString().trim();
+    return text && text.length > 0 ? text : undefined;
+}
+//# sourceMappingURL=index.js.map

package/dist/widget/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/widget/index.ts"],"names":[],"mappings":"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"}

package/dist/widget/styles.d.ts

@@ -0,0 +1,13 @@
+/**
+ * WHY: initSaveButton injects styles without a separate network fetch (IIFE + npm).
+ * WHAT: Runtime chip CSS — theme tokens + bounded size vars; mirrors widget.css.
+ * WHERE: Injected into document head or shadow root on first initSaveButton call.
+ * GUARDED: check-widget-branding compares required tokens with widget.css.
+ */
+/** Injected into closed shadow roots (:host theme selectors). */
+export declare const MEOS_SAVE_SHADOW_CSS = "\n:host {\n  \n  --meos-save-fg: #000000;\n  --meos-save-border: rgba(0, 0, 0, 0.24);\n  --meos-save-hover-bg: rgba(0, 0, 0, 0.06);\n  --meos-save-hover-border: rgba(0, 0, 0, 0.42);\n\n  color-scheme: light;\n}\n\n:host([data-meos-theme=\"light\"]) {\n  \n  --meos-save-fg: #000000;\n  --meos-save-border: rgba(0, 0, 0, 0.24);\n  --meos-save-hover-bg: rgba(0, 0, 0, 0.06);\n  --meos-save-hover-border: rgba(0, 0, 0, 0.42);\n\n  color-scheme: light;\n}\n\n:host([data-meos-theme=\"dark\"]) {\n  \n  --meos-save-fg: #ffffff;\n  --meos-save-border: rgba(255, 255, 255, 0.3);\n  --meos-save-hover-bg: rgba(255, 255, 255, 0.08);\n  --meos-save-hover-border: rgba(255, 255, 255, 0.46);\n\n  color-scheme: dark;\n}\n\n@media (prefers-color-scheme: dark) {\n  :host([data-meos-theme=\"auto\"]) {\n    \n  --meos-save-fg: #ffffff;\n  --meos-save-border: rgba(255, 255, 255, 0.3);\n  --meos-save-hover-bg: rgba(255, 255, 255, 0.08);\n  --meos-save-hover-border: rgba(255, 255, 255, 0.46);\n\n    color-scheme: dark;\n  }\n}\n\n\n.meos-save-chip {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--meos-save-chip-gap, 0.3125rem);\n  min-height: calc(var(--meos-save-chip-height, 31px) - 1px);\n  max-height: calc(var(--meos-save-chip-height, 31px) + 1px);\n  height: var(--meos-save-chip-height, 31px);\n  padding: 0 var(--meos-save-chip-padding-x, 0.625rem);\n  margin: 0;\n  font-family: var(--meos-font, \"Inconsolata\", ui-monospace, monospace);\n  font-size: 11px;\n  font-weight: 500;\n  line-height: 1;\n  letter-spacing: 0.02em;\n  text-transform: lowercase;\n  color: var(--meos-save-fg, #000000);\n  background: transparent;\n  border: 1px solid var(--meos-save-border, rgba(0, 0, 0, 0.24));\n  border-radius: var(--meos-save-chip-radius, var(--meos-radius, 2px));\n  cursor: pointer;\n  box-sizing: border-box;\n  -webkit-tap-highlight-color: transparent;\n  pointer-events: auto;\n  user-select: none;\n  transition:\n    background 0.12s ease,\n    border-color 0.12s ease,\n    opacity 0.12s ease,\n    transform 0.08s ease;\n  appearance: none;\n  vertical-align: middle;\n}\n\n.meos-save-chip:hover {\n  background: var(--meos-save-hover-bg, rgba(0, 0, 0, 0.06));\n  border-color: var(--meos-save-hover-border, rgba(0, 0, 0, 0.42));\n}\n\n.meos-save-chip:focus-visible {\n  outline: 2px solid currentColor;\n  outline-offset: 2px;\n}\n\n.meos-save-chip:active {\n  opacity: 0.9;\n  transform: scale(0.98);\n}\n\n.meos-save-chip__icon {\n  width: calc(var(--meos-save-icon-size, 16px) * 27.275015 / 30.362297);\n  height: var(--meos-save-icon-size, 16px);\n  flex-shrink: 0;\n  display: block;\n  pointer-events: none;\n  shape-rendering: geometricPrecision;\n  overflow: visible;\n}\n\n.meos-save-chip__label {\n  white-space: nowrap;\n  pointer-events: none;\n}\n\n";
+/** Document-level chip (npm hosts importing widget.css). */
+export declare const MEOS_SAVE_DOCUMENT_CSS = "\n.meos-save-chip,\n.meos-save-chip[data-meos-theme=\"auto\"] {\n  \n  --meos-save-fg: #000000;\n  --meos-save-border: rgba(0, 0, 0, 0.24);\n  --meos-save-hover-bg: rgba(0, 0, 0, 0.06);\n  --meos-save-hover-border: rgba(0, 0, 0, 0.42);\n\n}\n\n.meos-save-chip[data-meos-theme=\"light\"] {\n  \n  --meos-save-fg: #000000;\n  --meos-save-border: rgba(0, 0, 0, 0.24);\n  --meos-save-hover-bg: rgba(0, 0, 0, 0.06);\n  --meos-save-hover-border: rgba(0, 0, 0, 0.42);\n\n}\n\n.meos-save-chip[data-meos-theme=\"dark\"] {\n  \n  --meos-save-fg: #ffffff;\n  --meos-save-border: rgba(255, 255, 255, 0.3);\n  --meos-save-hover-bg: rgba(255, 255, 255, 0.08);\n  --meos-save-hover-border: rgba(255, 255, 255, 0.46);\n\n}\n\n@media (prefers-color-scheme: dark) {\n  .meos-save-chip[data-meos-theme=\"auto\"] {\n    \n  --meos-save-fg: #ffffff;\n  --meos-save-border: rgba(255, 255, 255, 0.3);\n  --meos-save-hover-bg: rgba(255, 255, 255, 0.08);\n  --meos-save-hover-border: rgba(255, 255, 255, 0.46);\n\n  }\n}\n\n\n.meos-save-chip {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--meos-save-chip-gap, 0.3125rem);\n  min-height: calc(var(--meos-save-chip-height, 31px) - 1px);\n  max-height: calc(var(--meos-save-chip-height, 31px) + 1px);\n  height: var(--meos-save-chip-height, 31px);\n  padding: 0 var(--meos-save-chip-padding-x, 0.625rem);\n  margin: 0;\n  font-family: var(--meos-font, \"Inconsolata\", ui-monospace, monospace);\n  font-size: 11px;\n  font-weight: 500;\n  line-height: 1;\n  letter-spacing: 0.02em;\n  text-transform: lowercase;\n  color: var(--meos-save-fg, #000000);\n  background: transparent;\n  border: 1px solid var(--meos-save-border, rgba(0, 0, 0, 0.24));\n  border-radius: var(--meos-save-chip-radius, var(--meos-radius, 2px));\n  cursor: pointer;\n  box-sizing: border-box;\n  -webkit-tap-highlight-color: transparent;\n  pointer-events: auto;\n  user-select: none;\n  transition:\n    background 0.12s ease,\n    border-color 0.12s ease,\n    opacity 0.12s ease,\n    transform 0.08s ease;\n  appearance: none;\n  vertical-align: middle;\n}\n\n.meos-save-chip:hover {\n  background: var(--meos-save-hover-bg, rgba(0, 0, 0, 0.06));\n  border-color: var(--meos-save-hover-border, rgba(0, 0, 0, 0.42));\n}\n\n.meos-save-chip:focus-visible {\n  outline: 2px solid currentColor;\n  outline-offset: 2px;\n}\n\n.meos-save-chip:active {\n  opacity: 0.9;\n  transform: scale(0.98);\n}\n\n.meos-save-chip__icon {\n  width: calc(var(--meos-save-icon-size, 16px) * 27.275015 / 30.362297);\n  height: var(--meos-save-icon-size, 16px);\n  flex-shrink: 0;\n  display: block;\n  pointer-events: none;\n  shape-rendering: geometricPrecision;\n  overflow: visible;\n}\n\n.meos-save-chip__label {\n  white-space: nowrap;\n  pointer-events: none;\n}\n\n";
+/** Full injection bundle for initSaveButton (shadow + document fallback). */
+export declare const MEOS_SAVE_WIDGET_CSS = "\n:host {\n  \n  --meos-save-fg: #000000;\n  --meos-save-border: rgba(0, 0, 0, 0.24);\n  --meos-save-hover-bg: rgba(0, 0, 0, 0.06);\n  --meos-save-hover-border: rgba(0, 0, 0, 0.42);\n\n  color-scheme: light;\n}\n\n:host([data-meos-theme=\"light\"]) {\n  \n  --meos-save-fg: #000000;\n  --meos-save-border: rgba(0, 0, 0, 0.24);\n  --meos-save-hover-bg: rgba(0, 0, 0, 0.06);\n  --meos-save-hover-border: rgba(0, 0, 0, 0.42);\n\n  color-scheme: light;\n}\n\n:host([data-meos-theme=\"dark\"]) {\n  \n  --meos-save-fg: #ffffff;\n  --meos-save-border: rgba(255, 255, 255, 0.3);\n  --meos-save-hover-bg: rgba(255, 255, 255, 0.08);\n  --meos-save-hover-border: rgba(255, 255, 255, 0.46);\n\n  color-scheme: dark;\n}\n\n@media (prefers-color-scheme: dark) {\n  :host([data-meos-theme=\"auto\"]) {\n    \n  --meos-save-fg: #ffffff;\n  --meos-save-border: rgba(255, 255, 255, 0.3);\n  --meos-save-hover-bg: rgba(255, 255, 255, 0.08);\n  --meos-save-hover-border: rgba(255, 255, 255, 0.46);\n\n    color-scheme: dark;\n  }\n}\n\n\n.meos-save-chip {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--meos-save-chip-gap, 0.3125rem);\n  min-height: calc(var(--meos-save-chip-height, 31px) - 1px);\n  max-height: calc(var(--meos-save-chip-height, 31px) + 1px);\n  height: var(--meos-save-chip-height, 31px);\n  padding: 0 var(--meos-save-chip-padding-x, 0.625rem);\n  margin: 0;\n  font-family: var(--meos-font, \"Inconsolata\", ui-monospace, monospace);\n  font-size: 11px;\n  font-weight: 500;\n  line-height: 1;\n  letter-spacing: 0.02em;\n  text-transform: lowercase;\n  color: var(--meos-save-fg, #000000);\n  background: transparent;\n  border: 1px solid var(--meos-save-border, rgba(0, 0, 0, 0.24));\n  border-radius: var(--meos-save-chip-radius, var(--meos-radius, 2px));\n  cursor: pointer;\n  box-sizing: border-box;\n  -webkit-tap-highlight-color: transparent;\n  pointer-events: auto;\n  user-select: none;\n  transition:\n    background 0.12s ease,\n    border-color 0.12s ease,\n    opacity 0.12s ease,\n    transform 0.08s ease;\n  appearance: none;\n  vertical-align: middle;\n}\n\n.meos-save-chip:hover {\n  background: var(--meos-save-hover-bg, rgba(0, 0, 0, 0.06));\n  border-color: var(--meos-save-hover-border, rgba(0, 0, 0, 0.42));\n}\n\n.meos-save-chip:focus-visible {\n  outline: 2px solid currentColor;\n  outline-offset: 2px;\n}\n\n.meos-save-chip:active {\n  opacity: 0.9;\n  transform: scale(0.98);\n}\n\n.meos-save-chip__icon {\n  width: calc(var(--meos-save-icon-size, 16px) * 27.275015 / 30.362297);\n  height: var(--meos-save-icon-size, 16px);\n  flex-shrink: 0;\n  display: block;\n  pointer-events: none;\n  shape-rendering: geometricPrecision;\n  overflow: visible;\n}\n\n.meos-save-chip__label {\n  white-space: nowrap;\n  pointer-events: none;\n}\n\n\n\n.meos-save-chip,\n.meos-save-chip[data-meos-theme=\"auto\"] {\n  \n  --meos-save-fg: #000000;\n  --meos-save-border: rgba(0, 0, 0, 0.24);\n  --meos-save-hover-bg: rgba(0, 0, 0, 0.06);\n  --meos-save-hover-border: rgba(0, 0, 0, 0.42);\n\n}\n\n.meos-save-chip[data-meos-theme=\"light\"] {\n  \n  --meos-save-fg: #000000;\n  --meos-save-border: rgba(0, 0, 0, 0.24);\n  --meos-save-hover-bg: rgba(0, 0, 0, 0.06);\n  --meos-save-hover-border: rgba(0, 0, 0, 0.42);\n\n}\n\n.meos-save-chip[data-meos-theme=\"dark\"] {\n  \n  --meos-save-fg: #ffffff;\n  --meos-save-border: rgba(255, 255, 255, 0.3);\n  --meos-save-hover-bg: rgba(255, 255, 255, 0.08);\n  --meos-save-hover-border: rgba(255, 255, 255, 0.46);\n\n}\n\n@media (prefers-color-scheme: dark) {\n  .meos-save-chip[data-meos-theme=\"auto\"] {\n    \n  --meos-save-fg: #ffffff;\n  --meos-save-border: rgba(255, 255, 255, 0.3);\n  --meos-save-hover-bg: rgba(255, 255, 255, 0.08);\n  --meos-save-hover-border: rgba(255, 255, 255, 0.46);\n\n  }\n}\n\n\n.meos-save-chip {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--meos-save-chip-gap, 0.3125rem);\n  min-height: calc(var(--meos-save-chip-height, 31px) - 1px);\n  max-height: calc(var(--meos-save-chip-height, 31px) + 1px);\n  height: var(--meos-save-chip-height, 31px);\n  padding: 0 var(--meos-save-chip-padding-x, 0.625rem);\n  margin: 0;\n  font-family: var(--meos-font, \"Inconsolata\", ui-monospace, monospace);\n  font-size: 11px;\n  font-weight: 500;\n  line-height: 1;\n  letter-spacing: 0.02em;\n  text-transform: lowercase;\n  color: var(--meos-save-fg, #000000);\n  background: transparent;\n  border: 1px solid var(--meos-save-border, rgba(0, 0, 0, 0.24));\n  border-radius: var(--meos-save-chip-radius, var(--meos-radius, 2px));\n  cursor: pointer;\n  box-sizing: border-box;\n  -webkit-tap-highlight-color: transparent;\n  pointer-events: auto;\n  user-select: none;\n  transition:\n    background 0.12s ease,\n    border-color 0.12s ease,\n    opacity 0.12s ease,\n    transform 0.08s ease;\n  appearance: none;\n  vertical-align: middle;\n}\n\n.meos-save-chip:hover {\n  background: var(--meos-save-hover-bg, rgba(0, 0, 0, 0.06));\n  border-color: var(--meos-save-hover-border, rgba(0, 0, 0, 0.42));\n}\n\n.meos-save-chip:focus-visible {\n  outline: 2px solid currentColor;\n  outline-offset: 2px;\n}\n\n.meos-save-chip:active {\n  opacity: 0.9;\n  transform: scale(0.98);\n}\n\n.meos-save-chip__icon {\n  width: calc(var(--meos-save-icon-size, 16px) * 27.275015 / 30.362297);\n  height: var(--meos-save-icon-size, 16px);\n  flex-shrink: 0;\n  display: block;\n  pointer-events: none;\n  shape-rendering: geometricPrecision;\n  overflow: visible;\n}\n\n.meos-save-chip__label {\n  white-space: nowrap;\n  pointer-events: none;\n}\n\n";
+//# sourceMappingURL=styles.d.ts.map

package/dist/widget/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/widget/styles.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAmFH,iEAAiE;AACjE,eAAO,MAAM,oBAAoB,iwFAwBhC,CAAA;AAED,4DAA4D;AAC5D,eAAO,MAAM,sBAAsB,+uFAqBlC,CAAA;AAED,6EAA6E;AAC7E,eAAO,MAAM,oBAAoB,6+KAAuD,CAAA"}

package/dist/widget/styles.js

@@ -0,0 +1,136 @@
+/**
+ * WHY: initSaveButton injects styles without a separate network fetch (IIFE + npm).
+ * WHAT: Runtime chip CSS — theme tokens + bounded size vars; mirrors widget.css.
+ * WHERE: Injected into document head or shadow root on first initSaveButton call.
+ * GUARDED: check-widget-branding compares required tokens with widget.css.
+ */
+/** Shared chip rules (shadow :host + document .meos-save-chip). */
+const CHIP_RULES = `
+.meos-save-chip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--meos-save-chip-gap, 0.3125rem);
+  min-height: calc(var(--meos-save-chip-height, 31px) - 1px);
+  max-height: calc(var(--meos-save-chip-height, 31px) + 1px);
+  height: var(--meos-save-chip-height, 31px);
+  padding: 0 var(--meos-save-chip-padding-x, 0.625rem);
+  margin: 0;
+  font-family: var(--meos-font, "Inconsolata", ui-monospace, monospace);
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 1;
+  letter-spacing: 0.02em;
+  text-transform: lowercase;
+  color: var(--meos-save-fg, #000000);
+  background: transparent;
+  border: 1px solid var(--meos-save-border, rgba(0, 0, 0, 0.24));
+  border-radius: var(--meos-save-chip-radius, var(--meos-radius, 2px));
+  cursor: pointer;
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
+  pointer-events: auto;
+  user-select: none;
+  transition:
+    background 0.12s ease,
+    border-color 0.12s ease,
+    opacity 0.12s ease,
+    transform 0.08s ease;
+  appearance: none;
+  vertical-align: middle;
+}
+
+.meos-save-chip:hover {
+  background: var(--meos-save-hover-bg, rgba(0, 0, 0, 0.06));
+  border-color: var(--meos-save-hover-border, rgba(0, 0, 0, 0.42));
+}
+
+.meos-save-chip:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
+
+.meos-save-chip:active {
+  opacity: 0.9;
+  transform: scale(0.98);
+}
+
+.meos-save-chip__icon {
+  width: calc(var(--meos-save-icon-size, 16px) * 27.275015 / 30.362297);
+  height: var(--meos-save-icon-size, 16px);
+  flex-shrink: 0;
+  display: block;
+  pointer-events: none;
+  shape-rendering: geometricPrecision;
+  overflow: visible;
+}
+
+.meos-save-chip__label {
+  white-space: nowrap;
+  pointer-events: none;
+}
+`;
+const LIGHT_THEME_VARS = `
+  --meos-save-fg: #000000;
+  --meos-save-border: rgba(0, 0, 0, 0.24);
+  --meos-save-hover-bg: rgba(0, 0, 0, 0.06);
+  --meos-save-hover-border: rgba(0, 0, 0, 0.42);
+`;
+const DARK_THEME_VARS = `
+  --meos-save-fg: #ffffff;
+  --meos-save-border: rgba(255, 255, 255, 0.3);
+  --meos-save-hover-bg: rgba(255, 255, 255, 0.08);
+  --meos-save-hover-border: rgba(255, 255, 255, 0.46);
+`;
+/** Injected into closed shadow roots (:host theme selectors). */
+export const MEOS_SAVE_SHADOW_CSS = `
+:host {
+  ${LIGHT_THEME_VARS}
+  color-scheme: light;
+}
+
+:host([data-meos-theme="light"]) {
+  ${LIGHT_THEME_VARS}
+  color-scheme: light;
+}
+
+:host([data-meos-theme="dark"]) {
+  ${DARK_THEME_VARS}
+  color-scheme: dark;
+}
+
+@media (prefers-color-scheme: dark) {
+  :host([data-meos-theme="auto"]) {
+    ${DARK_THEME_VARS}
+    color-scheme: dark;
+  }
+}
+
+${CHIP_RULES}
+`;
+/** Document-level chip (npm hosts importing widget.css). */
+export const MEOS_SAVE_DOCUMENT_CSS = `
+.meos-save-chip,
+.meos-save-chip[data-meos-theme="auto"] {
+  ${LIGHT_THEME_VARS}
+}
+
+.meos-save-chip[data-meos-theme="light"] {
+  ${LIGHT_THEME_VARS}
+}
+
+.meos-save-chip[data-meos-theme="dark"] {
+  ${DARK_THEME_VARS}
+}
+
+@media (prefers-color-scheme: dark) {
+  .meos-save-chip[data-meos-theme="auto"] {
+    ${DARK_THEME_VARS}
+  }
+}
+
+${CHIP_RULES}
+`;
+/** Full injection bundle for initSaveButton (shadow + document fallback). */
+export const MEOS_SAVE_WIDGET_CSS = `${MEOS_SAVE_SHADOW_CSS}\n${MEOS_SAVE_DOCUMENT_CSS}`;
+//# sourceMappingURL=styles.js.map

package/dist/widget/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/widget/styles.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,mEAAmE;AACnE,MAAM,UAAU,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgElB,CAAA;AAED,MAAM,gBAAgB,GAAG;;;;;CAKxB,CAAA;AAED,MAAM,eAAe,GAAG;;;;;CAKvB,CAAA;AAED,iEAAiE;AACjE,MAAM,CAAC,MAAM,oBAAoB,GAAG;;IAEhC,gBAAgB;;;;;IAKhB,gBAAgB;;;;;IAKhB,eAAe;;;;;;MAMb,eAAe;;;;;EAKnB,UAAU;CACX,CAAA;AAED,4DAA4D;AAC5D,MAAM,CAAC,MAAM,sBAAsB,GAAG;;;IAGlC,gBAAgB;;;;IAIhB,gBAAgB;;;;IAIhB,eAAe;;;;;MAKb,eAAe;;;;EAInB,UAAU;CACX,CAAA;AAED,6EAA6E;AAC7E,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,oBAAoB,KAAK,sBAAsB,EAAE,CAAA"}

package/dist/widget.iife.css

@@ -0,0 +1,101 @@
+/**
+ * WHY: Canonical branded save chip — social-share row size, meos B/W ghost style.
+ * WHAT: Scoped `meos-save-` classes; theme via data-meos-theme + bounded CSS vars.
+ * WHERE: import '@meoslabs/save-in-meos/widget.css' (pairs with fonts.css).
+ * GUARDED: check-widget-branding enforces selectors, theme tokens, and allowed host vars.
+ */
+
+.meos-save-chip,
+.meos-save-chip[data-meos-theme="auto"] {
+  --meos-save-fg: #000000;
+  --meos-save-border: rgba(0, 0, 0, 0.24);
+  --meos-save-hover-bg: rgba(0, 0, 0, 0.06);
+  --meos-save-hover-border: rgba(0, 0, 0, 0.42);
+}
+
+.meos-save-chip[data-meos-theme="light"] {
+  --meos-save-fg: #000000;
+  --meos-save-border: rgba(0, 0, 0, 0.24);
+  --meos-save-hover-bg: rgba(0, 0, 0, 0.06);
+  --meos-save-hover-border: rgba(0, 0, 0, 0.42);
+}
+
+.meos-save-chip[data-meos-theme="dark"] {
+  --meos-save-fg: #ffffff;
+  --meos-save-border: rgba(255, 255, 255, 0.3);
+  --meos-save-hover-bg: rgba(255, 255, 255, 0.08);
+  --meos-save-hover-border: rgba(255, 255, 255, 0.46);
+}
+
+@media (prefers-color-scheme: dark) {
+  .meos-save-chip[data-meos-theme="auto"] {
+    --meos-save-fg: #ffffff;
+    --meos-save-border: rgba(255, 255, 255, 0.3);
+    --meos-save-hover-bg: rgba(255, 255, 255, 0.08);
+    --meos-save-hover-border: rgba(255, 255, 255, 0.46);
+  }
+}
+
+.meos-save-chip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--meos-save-chip-gap, 0.3125rem);
+  min-height: calc(var(--meos-save-chip-height, 31px) - 1px);
+  max-height: calc(var(--meos-save-chip-height, 31px) + 1px);
+  height: var(--meos-save-chip-height, 31px);
+  padding: 0 var(--meos-save-chip-padding-x, 0.625rem);
+  margin: 0;
+  font-family: var(--meos-font, "Inconsolata", ui-monospace, monospace);
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 1;
+  letter-spacing: 0.02em;
+  text-transform: lowercase;
+  color: var(--meos-save-fg, #000000);
+  background: transparent;
+  border: 1px solid var(--meos-save-border, rgba(0, 0, 0, 0.24));
+  border-radius: var(--meos-save-chip-radius, var(--meos-radius, 2px));
+  cursor: pointer;
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
+  pointer-events: auto;
+  user-select: none;
+  transition:
+    background 0.12s ease,
+    border-color 0.12s ease,
+    opacity 0.12s ease,
+    transform 0.08s ease;
+  appearance: none;
+  vertical-align: middle;
+}
+
+.meos-save-chip:hover {
+  background: var(--meos-save-hover-bg, rgba(0, 0, 0, 0.06));
+  border-color: var(--meos-save-hover-border, rgba(0, 0, 0, 0.42));
+}
+
+.meos-save-chip:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
+
+.meos-save-chip:active {
+  opacity: 0.9;
+  transform: scale(0.98);
+}
+
+.meos-save-chip__icon {
+  width: calc(var(--meos-save-icon-size, 16px) * 27.275015 / 30.362297);
+  height: var(--meos-save-icon-size, 16px);
+  flex-shrink: 0;
+  display: block;
+  pointer-events: none;
+  shape-rendering: geometricPrecision;
+  overflow: visible;
+}
+
+.meos-save-chip__label {
+  white-space: nowrap;
+  pointer-events: none;
+}