@0001-labs/design-system-1 0.3.0-alpha.28 → 0.3.1

package/dist/index.d.ts

@@ -8,6 +8,8 @@ import "./0-face/device";
 import "./0-face/i18n";
 export * from "./0-face/device";
 export * from "./0-face/grid";
+export * from "./0-face/constraints";
+export * from "./0-face/constraint-panel";
 export * from "./0-face/tooltips";
 export * from "./0-face/i18n";
 export * from "./0-face/languages";
@@ -17,11 +19,13 @@ export * from "./0-face/format";
 export * from "./0-face/preferences";
 export * from "./0-face/pricing";
 export * from "./0-face/theme";
+export * from "./0-face/shape";
 export * from "./0-face/keys";
 export * from "./0-face/sidebar";
 export * from "./2-core/ds-badge";
 export * from "./2-core/ds-tag";
 export * from "./2-core/ds-button";
+export * from "./2-core/ds-activity";
 export * from "./2-core/ds-checkbox";
 export * from "./2-core/ds-radio";
 export * from "./2-core/ds-switch";
@@ -34,6 +38,7 @@ export * from "./2-core/ds-empty";
 export * from "./2-core/ds-gap";
 export * from "./2-core/ds-icon";
 export * from "./2-core/ds-input";
+export * from "./2-core/ds-number";
 export * from "./2-core/ds-file-picker";
 export * from "./2-core/ds-composer";
 export * from "./2-core/ds-message";
@@ -47,7 +52,6 @@ export * from "./3-unit/ds-accordion";
 export * from "./2-core/ds-avatar";
 export * from "./3-unit/ds-avatar-group";
 export * from "./3-unit/ds-calendar";
-export * from "./3-unit/ds-calendar-large";
 export * from "./3-unit/ds-bento";
 export * from "./3-unit/ds-carousel";
 export * from "./3-unit/ds-form";
@@ -55,6 +59,7 @@ export * from "./3-unit/ds-list";
 export * from "./3-unit/ds-matrix";
 export * from "./3-unit/ds-row";
 export * from "./3-unit/ds-table";
+export * from "./3-unit/ds-table-of-contents";
 export * from "./4-page/ds-container";
 export * from "./4-page/ds-grid";
 export * from "./4-page/ds-page";
@@ -72,4 +77,10 @@ export * from "./3-unit/ds-sidebar";
 export * from "./2-core/ds-chart";
 export * from "./0-face/component-visibility";
 export * from "./2-core/ds-image";
+export { reportFailure, FAILURE_EVENT } from "./0-face/failures";
+export type { Failure } from "./0-face/failures";
+export * from "./2-core/ds-window";
+export * from "./2-core/ds-device-bezel";
+export * from "./2-core/ds-app-chrome";
+export { BEZELS, bezelById, screenGeometry } from "./5-visual-kit/bezels";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../DS1/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAOH,OAAO,iBAAiB,CAAC;AAGzB,OAAO,eAAe,CAAC;AAMvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,iBAAiB,CAAC;AAChC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AAMjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC;AACxC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AAMpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAMlC,cAAc,uBAAuB,CAAC;AACtC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AAErC,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AAEpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC;AAExC,cAAc,qBAAqB,CAAC;AAEpC,cAAc,mBAAmB,CAAC;AAElC,cAAc,+BAA+B,CAAC;AAE9C,cAAc,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../DS1/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAOH,OAAO,iBAAiB,CAAC;AAGzB,OAAO,eAAe,CAAC;AAMvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,sBAAsB,CAAC;AACrC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,iBAAiB,CAAC;AAChC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AAMjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AAMpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,+BAA+B,CAAC;AAM9C,cAAc,uBAAuB,CAAC;AACtC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AAErC,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AAEpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC;AAExC,cAAc,qBAAqB,CAAC;AAEpC,cAAc,mBAAmB,CAAC;AAElC,cAAc,+BAA+B,CAAC;AAE9C,cAAc,mBAAmB,CAAC;AAElC,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AACjE,YAAY,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAEjD,cAAc,oBAAoB,CAAC;AACnC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/index.js

@@ -16,6 +16,8 @@ import "./0-face/i18n";
 // ============================================================================
 export * from "./0-face/device";
 export * from "./0-face/grid";
+export * from "./0-face/constraints";
+export * from "./0-face/constraint-panel";
 export * from "./0-face/tooltips";
 export * from "./0-face/i18n";
 export * from "./0-face/languages";
@@ -25,6 +27,7 @@ export * from "./0-face/format";
 export * from "./0-face/preferences";
 export * from "./0-face/pricing";
 export * from "./0-face/theme";
+export * from "./0-face/shape";
 export * from "./0-face/keys";
 export * from "./0-face/sidebar";
 // ============================================================================
@@ -33,6 +36,7 @@ export * from "./0-face/sidebar";
 export * from "./2-core/ds-badge";
 export * from "./2-core/ds-tag";
 export * from "./2-core/ds-button";
+export * from "./2-core/ds-activity";
 export * from "./2-core/ds-checkbox";
 export * from "./2-core/ds-radio";
 export * from "./2-core/ds-switch";
@@ -45,6 +49,7 @@ export * from "./2-core/ds-empty";
 export * from "./2-core/ds-gap";
 export * from "./2-core/ds-icon";
 export * from "./2-core/ds-input";
+export * from "./2-core/ds-number";
 export * from "./2-core/ds-file-picker";
 export * from "./2-core/ds-composer";
 export * from "./2-core/ds-message";
@@ -61,7 +66,6 @@ export * from "./3-unit/ds-accordion";
 export * from "./2-core/ds-avatar";
 export * from "./3-unit/ds-avatar-group";
 export * from "./3-unit/ds-calendar";
-export * from "./3-unit/ds-calendar-large";
 export * from "./3-unit/ds-bento";
 export * from "./3-unit/ds-carousel";
 export * from "./3-unit/ds-form";
@@ -69,6 +73,7 @@ export * from "./3-unit/ds-list";
 export * from "./3-unit/ds-matrix";
 export * from "./3-unit/ds-row";
 export * from "./3-unit/ds-table";
+export * from "./3-unit/ds-table-of-contents";
 // ============================================================================
 // 4-page: Layout Components
 // ============================================================================
@@ -89,3 +94,8 @@ export * from "./3-unit/ds-sidebar";
 export * from "./2-core/ds-chart";
 export * from "./0-face/component-visibility";
 export * from "./2-core/ds-image";
+export { reportFailure, FAILURE_EVENT } from "./0-face/failures";
+export * from "./2-core/ds-window";
+export * from "./2-core/ds-device-bezel";
+export * from "./2-core/ds-app-chrome";
+export { BEZELS, bezelById, screenGeometry } from "./5-visual-kit/bezels";

package/dist/instagram-CKofs55A.js

@@ -0,0 +1,50 @@
+import { a as A, l as w, r as i, s as b } from "./lit-Ce_uWYM4.js";
+//#region DS1/5-visual-kit/instagram.ts
+/** Presentation based on the supplied October 2026 iPhone Reels reference. Its frame and media are `instagram-frame.ts`, drawn before this loads. */
+var instagramStyles = i`
+  .reels::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(#0005,transparent 23%,transparent 55%,#0009); }
+  .reels button { width:44px; height:44px; border-radius:8px; color:white; }
+  .reels svg { width:27px; height:27px; stroke-width:1.8; }
+  .reels-header { position:absolute; top:68px; left:12px; right:12px; display:flex; align-items:center; justify-content:space-between; }
+  .reels-tabs { display:flex; gap:14px; font-size:24px; font-weight:700; }
+  .reels-tabs span:last-child { color:#ffffffa6; }
+  .reels-actions { position:absolute; right:10px; bottom:118px; display:grid; gap:15px; text-align:center; }
+  .reels-action { display:grid; justify-items:center; font-size:13px; line-height:18px; }
+  .reels-action button { height:36px; }
+  .reels-action span:empty { display:none; }
+  .reels-author { position:absolute; left:16px; right:64px; bottom:120px; font-size:14px; }
+  .reels-identity { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
+  .reels-avatar { flex:none; width:40px; height:40px; border:2px solid #fb44b8; border-radius:50%; padding:2px; background:#ffd52a; color:#111; display:grid; place-items:center; overflow:hidden; }
+  .reels-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
+  .reels-name { font-weight:650; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+  .reels-verified { font-size:15px; }
+  .reels .reels-follow { width:auto; height:28px; padding:0 9px; border:1px solid #ffffff80; font-size:14px; }
+  .reels-caption { margin:0; line-height:20px; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
+  .reels-progress { position:absolute; bottom:98px; left:16px; right:16px; height:2px; background:#ffffff40; border-radius:2px; overflow:hidden; }
+  .reels-progress i { display:block; height:100%; background:white; transform-origin:left; }
+  .reels-nav { position:absolute; bottom:26px; left:50px; right:50px; height:52px; padding:3px; border:1px solid #ffffff40; border-radius:30px; background:#3339; backdrop-filter:blur(20px); display:flex; align-items:center; justify-content:space-around; }
+  .reels-nav button { flex:1; border-radius:30px; height:44px; }
+  .reels-nav .selected { background:#ffffff30; }
+`;
+var paths = {
+	plus: "M12 3v18M3 12h18",
+	heart: "M12 21 3.5 13C-3 6 6-1 12 6 18-1 27 6 20.5 13Z",
+	comment: "M21 20 20 15a9 9 0 1 0-5 5Z",
+	repost: "m15 2 4 4-4 4M19 6H7a4 4 0 0 0-4 4v3m6 9-4-4 4-4M5 18h12a4 4 0 0 0 4-4v-3",
+	send: "m3 3 19 1-8 18-4-11Z M10 11 22 4",
+	more: "M4 8h16M4 14h11",
+	home: "m3 10 9-8 9 8v11h-6v-8H9v8H3Z",
+	reels: "M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Z m5 4 7 5-7 5Z",
+	search: "M17 17 22 22M20 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0",
+	profile: "M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0M3 12h18M12 3v18",
+	filters: "M2 6h20M2 18h20M7 3v6M17 15v6"
+};
+function instagram(o) {
+	const button = (action, label, selected = false) => b`<button type="button" class=${selected ? "selected" : ""} aria-label=${label} ?disabled=${!o.interactive} tabindex=${o.interactive ? 0 : -1} @click=${() => o.action(action)}>${w`<svg viewBox="0 0 24 24" aria-hidden="true"><path d=${paths[action] ?? paths.profile}></path></svg>`}</button>`;
+	const action = (name, label, count) => b`<div class="reels-action">${button(name, label)}<span>${count}</span></div>`;
+	return b`<div class="reels"><div class="reels-media"><slot></slot></div><div class="reels-header">${button("plus", "Create")}<div class="reels-tabs"><span>Reels</span><span>Friends</span></div>${button("filters", "Feed preferences")}</div><div class="reels-actions">${action("heart", "Like", o.likes)}${action("comment", "Comment", o.comments)}${action("repost", "Repost", o.reposts)}${action("send", "Share", o.shares)}${action("more", "More", "")}</div><div class="reels-author"><div class="reels-identity"><span class="reels-avatar">${o.avatar ? b`<img src=${o.avatar} alt="">` : b`<span>◎</span>`}</span><span class="reels-name">${o.username}</span>${o.verified ? b`<span class="reels-verified" aria-label="Verified">✹</span>` : A}<button class="reels-follow" ?disabled=${!o.interactive} tabindex=${o.interactive ? 0 : -1} @click=${() => o.action("follow")}>Follow</button></div><p class="reels-caption">${o.caption}</p></div><div class="reels-progress" aria-hidden="true"><i style=${`transform:scaleX(${Math.min(1, Math.max(0, o.progress))})`}></i></div><nav class="reels-nav" aria-label="Instagram">${button("home", "Home")}${button("reels", "Reels", true)}${button("send", "Messages")}${button("search", "Search")}${button("profile", "Profile")}</nav></div>`;
+}
+//#endregion
+export { instagram, instagramStyles };
+
+//# sourceMappingURL=instagram-CKofs55A.js.map

package/dist/instagram-CKofs55A.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"instagram-CKofs55A.js","names":["nothing"],"sources":["../DS1/5-visual-kit/instagram.ts"],"sourcesContent":["import { css, html, svg, nothing } from 'lit';\n\n/** Presentation based on the supplied October 2026 iPhone Reels reference. Its frame and media are `instagram-frame.ts`, drawn before this loads. */\nexport const instagramStyles = css`\n  .reels::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(#0005,transparent 23%,transparent 55%,#0009); }\n  .reels button { width:44px; height:44px; border-radius:8px; color:white; }\n  .reels svg { width:27px; height:27px; stroke-width:1.8; }\n  .reels-header { position:absolute; top:68px; left:12px; right:12px; display:flex; align-items:center; justify-content:space-between; }\n  .reels-tabs { display:flex; gap:14px; font-size:24px; font-weight:700; }\n  .reels-tabs span:last-child { color:#ffffffa6; }\n  .reels-actions { position:absolute; right:10px; bottom:118px; display:grid; gap:15px; text-align:center; }\n  .reels-action { display:grid; justify-items:center; font-size:13px; line-height:18px; }\n  .reels-action button { height:36px; }\n  .reels-action span:empty { display:none; }\n  .reels-author { position:absolute; left:16px; right:64px; bottom:120px; font-size:14px; }\n  .reels-identity { display:flex; align-items:center; gap:8px; margin-bottom:12px; }\n  .reels-avatar { flex:none; width:40px; height:40px; border:2px solid #fb44b8; border-radius:50%; padding:2px; background:#ffd52a; color:#111; display:grid; place-items:center; overflow:hidden; }\n  .reels-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }\n  .reels-name { font-weight:650; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }\n  .reels-verified { font-size:15px; }\n  .reels .reels-follow { width:auto; height:28px; padding:0 9px; border:1px solid #ffffff80; font-size:14px; }\n  .reels-caption { margin:0; line-height:20px; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }\n  .reels-progress { position:absolute; bottom:98px; left:16px; right:16px; height:2px; background:#ffffff40; border-radius:2px; overflow:hidden; }\n  .reels-progress i { display:block; height:100%; background:white; transform-origin:left; }\n  .reels-nav { position:absolute; bottom:26px; left:50px; right:50px; height:52px; padding:3px; border:1px solid #ffffff40; border-radius:30px; background:#3339; backdrop-filter:blur(20px); display:flex; align-items:center; justify-content:space-around; }\n  .reels-nav button { flex:1; border-radius:30px; height:44px; }\n  .reels-nav .selected { background:#ffffff30; }\n`;\nconst paths: Record<string,string> = {\n  plus:'M12 3v18M3 12h18', heart:'M12 21 3.5 13C-3 6 6-1 12 6 18-1 27 6 20.5 13Z',\n  comment:'M21 20 20 15a9 9 0 1 0-5 5Z', repost:'m15 2 4 4-4 4M19 6H7a4 4 0 0 0-4 4v3m6 9-4-4 4-4M5 18h12a4 4 0 0 0 4-4v-3',\n  send:'m3 3 19 1-8 18-4-11Z M10 11 22 4', more:'M4 8h16M4 14h11',\n  home:'m3 10 9-8 9 8v11h-6v-8H9v8H3Z', reels:'M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Z m5 4 7 5-7 5Z',\n  search:'M17 17 22 22M20 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0', profile:'M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0M3 12h18M12 3v18', filters:'M2 6h20M2 18h20M7 3v6M17 15v6',\n};\ninterface ReelsOptions { interactive:boolean; username:string; caption:string; avatar:string; verified:boolean; likes:string; comments:string; reposts:string; shares:string; progress:number; action:(action:string)=>void }\nexport function instagram(o:ReelsOptions) {\n  const button=(action:string,label:string,selected=false)=>html`<button type=\"button\" class=${selected?'selected':''} aria-label=${label} ?disabled=${!o.interactive} tabindex=${o.interactive?0:-1} @click=${()=>o.action(action)}>${svg`<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=${paths[action] ?? paths.profile}></path></svg>`}</button>`;\n  const action=(name:string,label:string,count:string)=>html`<div class=\"reels-action\">${button(name,label)}<span>${count}</span></div>`;\n  return html`<div class=\"reels\"><div class=\"reels-media\"><slot></slot></div><div class=\"reels-header\">${button('plus','Create')}<div class=\"reels-tabs\"><span>Reels</span><span>Friends</span></div>${button('filters','Feed preferences')}</div><div class=\"reels-actions\">${action('heart','Like',o.likes)}${action('comment','Comment',o.comments)}${action('repost','Repost',o.reposts)}${action('send','Share',o.shares)}${action('more','More','')}</div><div class=\"reels-author\"><div class=\"reels-identity\"><span class=\"reels-avatar\">${o.avatar?html`<img src=${o.avatar} alt=\"\">`:html`<span>◎</span>`}</span><span class=\"reels-name\">${o.username}</span>${o.verified?html`<span class=\"reels-verified\" aria-label=\"Verified\">✹</span>`:nothing}<button class=\"reels-follow\" ?disabled=${!o.interactive} tabindex=${o.interactive?0:-1} @click=${()=>o.action('follow')}>Follow</button></div><p class=\"reels-caption\">${o.caption}</p></div><div class=\"reels-progress\" aria-hidden=\"true\"><i style=${`transform:scaleX(${Math.min(1,Math.max(0,o.progress))})`}></i></div><nav class=\"reels-nav\" aria-label=\"Instagram\">${button('home','Home')}${button('reels','Reels',true)}${button('send','Messages')}${button('search','Search')}${button('profile','Profile')}</nav></div>`;\n}\n"],"mappings":";;;AAGA,IAAa,kBAAkB,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;AAyBlC,IAAM,QAA+B;CACnC,MAAK;CAAoB,OAAM;CAC/B,SAAQ;CAA+B,QAAO;CAC9C,MAAK;CAAoC,MAAK;CAC9C,MAAK;CAAiC,OAAM;CAC5C,QAAO;CAAoD,SAAQ;CAAwD,SAAQ;AACrI;AAEA,SAAgB,UAAU,GAAgB;CACxC,MAAM,UAAQ,QAAc,OAAa,WAAS,UAAQ,CAAI,+BAA+B,WAAS,aAAW,GAAG,cAAc,MAAM,aAAa,CAAC,EAAE,YAAY,YAAY,EAAE,cAAY,IAAE,GAAG,gBAAc,EAAE,OAAO,MAAM,EAAE,GAAG,CAAG,uDAAuD,MAAM,WAAW,MAAM,QAAQ,gBAAgB;CAC9U,MAAM,UAAQ,MAAY,OAAa,UAAe,CAAI,6BAA6B,OAAO,MAAK,KAAK,EAAE,QAAQ,MAAM;CACxH,OAAO,CAAI,4FAA4F,OAAO,QAAO,QAAQ,EAAE,sEAAsE,OAAO,WAAU,kBAAkB,EAAE,mCAAmC,OAAO,SAAQ,QAAO,EAAE,KAAK,IAAI,OAAO,WAAU,WAAU,EAAE,QAAQ,IAAI,OAAO,UAAS,UAAS,EAAE,OAAO,IAAI,OAAO,QAAO,SAAQ,EAAE,MAAM,IAAI,OAAO,QAAO,QAAO,EAAE,EAAE,yFAAyF,EAAE,SAAO,CAAI,YAAY,EAAE,OAAO,YAAU,CAAI,iBAAiB,kCAAkC,EAAE,SAAS,SAAS,EAAE,WAAS,CAAI,gEAA8DA,EAAQ,yCAAyC,CAAC,EAAE,YAAY,YAAY,EAAE,cAAY,IAAE,GAAG,gBAAc,EAAE,OAAO,QAAQ,EAAE,iDAAiD,EAAE,QAAQ,oEAAoE,oBAAoB,KAAK,IAAI,GAAE,KAAK,IAAI,GAAE,EAAE,QAAQ,CAAC,EAAE,GAAG,2DAA2D,OAAO,QAAO,MAAM,IAAI,OAAO,SAAQ,SAAQ,IAAI,IAAI,OAAO,QAAO,UAAU,IAAI,OAAO,UAAS,QAAQ,IAAI,OAAO,WAAU,SAAS,EAAE;AACttC"}

package/dist/instagram-CcYf5oiM.js

@@ -0,0 +1,48 @@
+import { a as o, l as p, r as d, s as t } from "./lit-DGUVm1Ce.js";
+var c = d`
+  .reels::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(#0005,transparent 23%,transparent 55%,#0009); }
+  .reels button { width:44px; height:44px; border-radius:8px; color:white; }
+  .reels svg { width:27px; height:27px; stroke-width:1.8; }
+  .reels-header { position:absolute; top:68px; left:12px; right:12px; display:flex; align-items:center; justify-content:space-between; }
+  .reels-tabs { display:flex; gap:14px; font-size:24px; font-weight:700; }
+  .reels-tabs span:last-child { color:#ffffffa6; }
+  .reels-actions { position:absolute; right:10px; bottom:118px; display:grid; gap:15px; text-align:center; }
+  .reels-action { display:grid; justify-items:center; font-size:13px; line-height:18px; }
+  .reels-action button { height:36px; }
+  .reels-action span:empty { display:none; }
+  .reels-author { position:absolute; left:16px; right:64px; bottom:120px; font-size:14px; }
+  .reels-identity { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
+  .reels-avatar { flex:none; width:40px; height:40px; border:2px solid #fb44b8; border-radius:50%; padding:2px; background:#ffd52a; color:#111; display:grid; place-items:center; overflow:hidden; }
+  .reels-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
+  .reels-name { font-weight:650; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+  .reels-verified { font-size:15px; }
+  .reels .reels-follow { width:auto; height:28px; padding:0 9px; border:1px solid #ffffff80; font-size:14px; }
+  .reels-caption { margin:0; line-height:20px; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
+  .reels-progress { position:absolute; bottom:98px; left:16px; right:16px; height:2px; background:#ffffff40; border-radius:2px; overflow:hidden; }
+  .reels-progress i { display:block; height:100%; background:white; transform-origin:left; }
+  .reels-nav { position:absolute; bottom:26px; left:50px; right:50px; height:52px; padding:3px; border:1px solid #ffffff40; border-radius:30px; background:#3339; backdrop-filter:blur(20px); display:flex; align-items:center; justify-content:space-around; }
+  .reels-nav button { flex:1; border-radius:30px; height:44px; }
+  .reels-nav .selected { background:#ffffff30; }
+`, n = {
+  plus: "M12 3v18M3 12h18",
+  heart: "M12 21 3.5 13C-3 6 6-1 12 6 18-1 27 6 20.5 13Z",
+  comment: "M21 20 20 15a9 9 0 1 0-5 5Z",
+  repost: "m15 2 4 4-4 4M19 6H7a4 4 0 0 0-4 4v3m6 9-4-4 4-4M5 18h12a4 4 0 0 0 4-4v-3",
+  send: "m3 3 19 1-8 18-4-11Z M10 11 22 4",
+  more: "M4 8h16M4 14h11",
+  home: "m3 10 9-8 9 8v11h-6v-8H9v8H3Z",
+  reels: "M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Z m5 4 7 5-7 5Z",
+  search: "M17 17 22 22M20 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0",
+  profile: "M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0M3 12h18M12 3v18",
+  filters: "M2 6h20M2 18h20M7 3v6M17 15v6"
+};
+function h(e) {
+  const s = (i, r, l = !1) => t`<button type="button" class=${l ? "selected" : ""} aria-label=${r} ?disabled=${!e.interactive} tabindex=${e.interactive ? 0 : -1} @click=${() => e.action(i)}>${p`<svg viewBox="0 0 24 24" aria-hidden="true"><path d=${n[i] ?? n.profile}></path></svg>`}</button>`, a = (i, r, l) => t`<div class="reels-action">${s(i, r)}<span>${l}</span></div>`;
+  return t`<div class="reels"><div class="reels-media"><slot></slot></div><div class="reels-header">${s("plus", "Create")}<div class="reels-tabs"><span>Reels</span><span>Friends</span></div>${s("filters", "Feed preferences")}</div><div class="reels-actions">${a("heart", "Like", e.likes)}${a("comment", "Comment", e.comments)}${a("repost", "Repost", e.reposts)}${a("send", "Share", e.shares)}${a("more", "More", "")}</div><div class="reels-author"><div class="reels-identity"><span class="reels-avatar">${e.avatar ? t`<img src=${e.avatar} alt="">` : t`<span>◎</span>`}</span><span class="reels-name">${e.username}</span>${e.verified ? t`<span class="reels-verified" aria-label="Verified">✹</span>` : o}<button class="reels-follow" ?disabled=${!e.interactive} tabindex=${e.interactive ? 0 : -1} @click=${() => e.action("follow")}>Follow</button></div><p class="reels-caption">${e.caption}</p></div><div class="reels-progress" aria-hidden="true"><i style=${`transform:scaleX(${Math.min(1, Math.max(0, e.progress))})`}></i></div><nav class="reels-nav" aria-label="Instagram">${s("home", "Home")}${s("reels", "Reels", !0)}${s("send", "Messages")}${s("search", "Search")}${s("profile", "Profile")}</nav></div>`;
+}
+export {
+  h as instagram,
+  c as instagramStyles
+};
+
+//# sourceMappingURL=instagram-CcYf5oiM.js.map

package/dist/instagram-CcYf5oiM.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"instagram-CcYf5oiM.js","names":["nothing","A","w","i","b","instagramStyles","paths","instagram","o","button","action","label","selected","name","count"],"sources":["../DS1/5-visual-kit/instagram.ts"],"sourcesContent":["import { css, html, svg, nothing } from 'lit';\n\n/** Presentation based on the supplied October 2026 iPhone Reels reference. Its frame and media are `instagram-frame.ts`, drawn before this loads. */\nexport const instagramStyles = css`\n  .reels::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(#0005,transparent 23%,transparent 55%,#0009); }\n  .reels button { width:44px; height:44px; border-radius:8px; color:white; }\n  .reels svg { width:27px; height:27px; stroke-width:1.8; }\n  .reels-header { position:absolute; top:68px; left:12px; right:12px; display:flex; align-items:center; justify-content:space-between; }\n  .reels-tabs { display:flex; gap:14px; font-size:24px; font-weight:700; }\n  .reels-tabs span:last-child { color:#ffffffa6; }\n  .reels-actions { position:absolute; right:10px; bottom:118px; display:grid; gap:15px; text-align:center; }\n  .reels-action { display:grid; justify-items:center; font-size:13px; line-height:18px; }\n  .reels-action button { height:36px; }\n  .reels-action span:empty { display:none; }\n  .reels-author { position:absolute; left:16px; right:64px; bottom:120px; font-size:14px; }\n  .reels-identity { display:flex; align-items:center; gap:8px; margin-bottom:12px; }\n  .reels-avatar { flex:none; width:40px; height:40px; border:2px solid #fb44b8; border-radius:50%; padding:2px; background:#ffd52a; color:#111; display:grid; place-items:center; overflow:hidden; }\n  .reels-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }\n  .reels-name { font-weight:650; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }\n  .reels-verified { font-size:15px; }\n  .reels .reels-follow { width:auto; height:28px; padding:0 9px; border:1px solid #ffffff80; font-size:14px; }\n  .reels-caption { margin:0; line-height:20px; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }\n  .reels-progress { position:absolute; bottom:98px; left:16px; right:16px; height:2px; background:#ffffff40; border-radius:2px; overflow:hidden; }\n  .reels-progress i { display:block; height:100%; background:white; transform-origin:left; }\n  .reels-nav { position:absolute; bottom:26px; left:50px; right:50px; height:52px; padding:3px; border:1px solid #ffffff40; border-radius:30px; background:#3339; backdrop-filter:blur(20px); display:flex; align-items:center; justify-content:space-around; }\n  .reels-nav button { flex:1; border-radius:30px; height:44px; }\n  .reels-nav .selected { background:#ffffff30; }\n`;\nconst paths: Record<string,string> = {\n  plus:'M12 3v18M3 12h18', heart:'M12 21 3.5 13C-3 6 6-1 12 6 18-1 27 6 20.5 13Z',\n  comment:'M21 20 20 15a9 9 0 1 0-5 5Z', repost:'m15 2 4 4-4 4M19 6H7a4 4 0 0 0-4 4v3m6 9-4-4 4-4M5 18h12a4 4 0 0 0 4-4v-3',\n  send:'m3 3 19 1-8 18-4-11Z M10 11 22 4', more:'M4 8h16M4 14h11',\n  home:'m3 10 9-8 9 8v11h-6v-8H9v8H3Z', reels:'M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Z m5 4 7 5-7 5Z',\n  search:'M17 17 22 22M20 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0', profile:'M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0M3 12h18M12 3v18', filters:'M2 6h20M2 18h20M7 3v6M17 15v6',\n};\ninterface ReelsOptions { interactive:boolean; username:string; caption:string; avatar:string; verified:boolean; likes:string; comments:string; reposts:string; shares:string; progress:number; action:(action:string)=>void }\nexport function instagram(o:ReelsOptions) {\n  const button=(action:string,label:string,selected=false)=>html`<button type=\"button\" class=${selected?'selected':''} aria-label=${label} ?disabled=${!o.interactive} tabindex=${o.interactive?0:-1} @click=${()=>o.action(action)}>${svg`<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=${paths[action] ?? paths.profile}></path></svg>`}</button>`;\n  const action=(name:string,label:string,count:string)=>html`<div class=\"reels-action\">${button(name,label)}<span>${count}</span></div>`;\n  return html`<div class=\"reels\"><div class=\"reels-media\"><slot></slot></div><div class=\"reels-header\">${button('plus','Create')}<div class=\"reels-tabs\"><span>Reels</span><span>Friends</span></div>${button('filters','Feed preferences')}</div><div class=\"reels-actions\">${action('heart','Like',o.likes)}${action('comment','Comment',o.comments)}${action('repost','Repost',o.reposts)}${action('send','Share',o.shares)}${action('more','More','')}</div><div class=\"reels-author\"><div class=\"reels-identity\"><span class=\"reels-avatar\">${o.avatar?html`<img src=${o.avatar} alt=\"\">`:html`<span>◎</span>`}</span><span class=\"reels-name\">${o.username}</span>${o.verified?html`<span class=\"reels-verified\" aria-label=\"Verified\">✹</span>`:nothing}<button class=\"reels-follow\" ?disabled=${!o.interactive} tabindex=${o.interactive?0:-1} @click=${()=>o.action('follow')}>Follow</button></div><p class=\"reels-caption\">${o.caption}</p></div><div class=\"reels-progress\" aria-hidden=\"true\"><i style=${`transform:scaleX(${Math.min(1,Math.max(0,o.progress))})`}></i></div><nav class=\"reels-nav\" aria-label=\"Instagram\">${button('home','Home')}${button('reels','Reels',true)}${button('send','Messages')}${button('search','Search')}${button('profile','Profile')}</nav></div>`;\n}\n"],"mappings":";AAGA,IAAaK,IAAkBF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAyBzBG,IAA+B;AAAA,EACnC,MAAK;AAAA,EAAoB,OAAM;AAAA,EAC/B,SAAQ;AAAA,EAA+B,QAAO;AAAA,EAC9C,MAAK;AAAA,EAAoC,MAAK;AAAA,EAC9C,MAAK;AAAA,EAAiC,OAAM;AAAA,EAC5C,QAAO;AAAA,EAAoD,SAAQ;AAAA,EAAwD,SAAQ;AACrI;AAEA,SAAgBC,EAAUC,GAAgB;AACxC,QAAMC,IAAA,CAAQC,GAAcC,GAAaC,IAAS,OAAQR,gCAAmCQ,IAAS,aAAW,EAAA,eAAiBD,CAAA,cAAmB,CAACH,EAAE,WAAA,aAAwBA,EAAE,cAAY,IAAE,EAAA,WAAG,MAAcA,EAAE,OAAOE,CAAM,CAAA,IAAKR,wDAA0DI,EAAMI,CAAA,KAAWJ,EAAM,OAAA,gBAAQ,aACxTI,IAAA,CAAQG,GAAYF,GAAaG,MAAeV,8BAAiCK,EAAOI,GAAKF,CAAK,CAAA,SAAUG,CAAA;AAClH,SAAOV,6FAAgGK,EAAO,QAAO,QAAQ,CAAA,uEAAwEA,EAAO,WAAU,kBAAkB,CAAA,oCAAqCC,EAAO,SAAQ,QAAOF,EAAE,KAAK,CAAA,GAAIE,EAAO,WAAU,WAAUF,EAAE,QAAQ,CAAA,GAAIE,EAAO,UAAS,UAASF,EAAE,OAAO,CAAA,GAAIE,EAAO,QAAO,SAAQF,EAAE,MAAM,CAAA,GAAIE,EAAO,QAAO,QAAO,EAAE,CAAA,0FAA2FF,EAAE,SAAOJ,aAAgBI,EAAE,MAAA,aAAiBJ,iBAAI,mCAAmDI,EAAE,QAAA,UAAkBA,EAAE,WAASJ,iEAAkEJ,CAAAA,0CAAiD,CAACQ,EAAE,WAAA,aAAwBA,EAAE,cAAY,IAAE,EAAA,WAAG,MAAcA,EAAE,OAAO,QAAQ,CAAA,kDAAmDA,EAAE,OAAA,qEAA4E,oBAAoB,KAAK,IAAI,GAAE,KAAK,IAAI,GAAEA,EAAE,QAAQ,CAAC,CAAA,GAAE,4DAA8DC,EAAO,QAAO,MAAM,CAAA,GAAIA,EAAO,SAAQ,SAAQ,EAAI,CAAA,GAAIA,EAAO,QAAO,UAAU,CAAA,GAAIA,EAAO,UAAS,QAAQ,CAAA,GAAIA,EAAO,WAAU,SAAS,CAAA;AACptC"}