@meoslabs/save-in-meos 0.0.1

package/package.json

@@ -0,0 +1,102 @@
+{
+  "name": "@meoslabs/save-in-meos",
+  "version": "0.0.1",
+  "description": "meos deeplink protocol (MDP) codec and save-in-meos embed widget for third-party sites",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/meoslabs/save-in-meos.git"
+  },
+  "homepage": "https://github.com/meoslabs/save-in-meos#readme",
+  "bugs": {
+    "url": "https://github.com/meoslabs/save-in-meos/issues"
+  },
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "unpkg": "dist/widget.iife.js",
+  "jsdelivr": "dist/widget.iife.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./fonts.css": "./src/widget/fonts.css",
+    "./widget.css": "./src/widget/widget.css",
+    "./widget": {
+      "types": "./dist/widget/index.d.ts",
+      "import": "./dist/widget/index.js",
+      "default": "./dist/widget/index.js"
+    },
+    "./browser": {
+      "default": "./dist/widget.iife.js"
+    },
+    "./widget.iife.js": "./dist/widget.iife.js",
+    "./save-in-meos.min.js": "./dist/save-in-meos.min.js",
+    "./widget.iife.css": "./dist/widget.iife.css"
+  },
+  "files": [
+    "dist/index.js",
+    "dist/index.d.ts",
+    "dist/import-intent-v1.js",
+    "dist/import-intent-v1.d.ts",
+    "dist/widget/",
+    "dist/widget.iife.js",
+    "dist/widget.iife.js.map",
+    "dist/widget.iife.css",
+    "dist/save-in-meos.min.js",
+    "src/widget/fonts.css",
+    "src/widget/widget.css",
+    "assets/fonts/",
+    "LICENSE",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "build:widget": "tsx scripts/build-widget.ts",
+    "demo": "npm run build:widget && cd examples && npx --yes serve . -p 4173",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "check:mdp-contract": "tsx scripts/check-mdp-contract.ts",
+    "check:widget-branding": "tsx scripts/check-widget-branding.ts",
+    "check:mdp": "npm run check:mdp-contract && npm run check:widget-branding",
+    "check:public-scrub": "tsx scripts/check-public-scrub.ts",
+    "check:ci": "tsx scripts/check-ci-workflows.ts",
+    "prepublishOnly": "npm run build && npm run build:widget && npm run check:mdp && npm run check:public-scrub",
+    "prepare": "husky"
+  },
+  "keywords": [
+    "meos",
+    "mdp",
+    "deeplink",
+    "widget",
+    "import"
+  ],
+  "author": {
+    "name": "meoslabs",
+    "email": "founders@usemeos.com",
+    "url": "https://meos.do"
+  },
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "devDependencies": {
+    "@types/node": "^22.15.0",
+    "@types/pako": "^2.0.4",
+    "esbuild": "^0.28.0",
+    "husky": "^9.1.7",
+    "tsx": "^4.19.4",
+    "typescript": "^5.8.3",
+    "vitest": "^4.1.8"
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "dependencies": {
+    "pako": "^2.1.0"
+  }
+}

package/src/widget/fonts.css

@@ -0,0 +1,27 @@
+/**
+ * WHY: Integrators must not load Inconsolata from Google Fonts CDN.
+ *      This file ships bundled woff2 (OFL-1.1) matching meos product typography.
+ * WHAT: @font-face declarations for widget + demo surfaces.
+ * WHERE: import '@meoslabs/save-in-meos/fonts.css'
+ */
+
+@font-face {
+  font-family: "Inconsolata";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("../../assets/fonts/inconsolata/Inconsolata-Regular.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Inconsolata";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("../../assets/fonts/inconsolata/Inconsolata-Medium.woff2") format("woff2");
+}
+
+:root {
+  --meos-font: "Inconsolata", ui-monospace, monospace;
+  --meos-radius: 0;
+}

package/src/widget/widget.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;
+}