npm - @rovela-ai/sdk - Versions diffs - 0.19.3 → 0.19.5 - Mend

@rovela-ai/sdk 0.19.3 → 0.19.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (211) hide show

package/docs/design/admin-sidebar-and-band.html ADDED Viewed

@@ -0,0 +1,542 @@
+<!doctype html><html><head><meta charset=utf8><meta name=viewport content="width=device-width,initial-scale=1"><style>:root{color-scheme:light}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#faf9f5;color:#141413}img{max-width:100%}</style></head><body>
+<title>Rovela Admin — Sidebar & The Band</title>
+<style>
+  :root{
+    --pg-bg:#ECE7DE; --pg-card:#F7F3ED; --pg-ink:#262F31; --pg-muted:#657172;
+    --pg-subtle:#8C9899; --pg-border:#DCD5C8; --pg-accent:#0CAF7D; --pg-accent-deep:#087C58;
+    --pg-red:#B3372C; --frame-edge:#D8D1C3;
+  }
+  @media (prefers-color-scheme: dark){
+    :root{ --pg-bg:#191B1C; --pg-card:#212425; --pg-ink:#E8E6E1; --pg-muted:#9BA3A2;
+      --pg-subtle:#6E7877; --pg-border:#343839; --frame-edge:#3A3F40; }
+  }
+  :root[data-theme="dark"]{ --pg-bg:#191B1C; --pg-card:#212425; --pg-ink:#E8E6E1; --pg-muted:#9BA3A2;
+    --pg-subtle:#6E7877; --pg-border:#343839; --frame-edge:#3A3F40; }
+  :root[data-theme="light"]{ --pg-bg:#ECE7DE; --pg-card:#F7F3ED; --pg-ink:#262F31; --pg-muted:#657172;
+    --pg-subtle:#8C9899; --pg-border:#DCD5C8; --frame-edge:#D8D1C3; }
+  *{box-sizing:border-box;margin:0;padding:0}
+  @media (prefers-reduced-motion: reduce){ *{transition:none!important;animation:none!important} }
+  body{background:var(--pg-bg);color:var(--pg-ink);font-family:'Plus Jakarta Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased}
+  .wrap{max-width:1220px;margin:0 auto;padding:0 32px}
+  @media(max-width:760px){.wrap{padding:0 16px}}
+  .hero{padding:64px 0 36px}
+  .hero .eyebrow{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--pg-accent-deep)}
+  @media (prefers-color-scheme: dark){ .hero .eyebrow{color:var(--pg-accent)} }
+  :root[data-theme="dark"] .hero .eyebrow{color:var(--pg-accent)}
+  .hero h1{font-size:clamp(26px,4vw,40px);font-weight:700;letter-spacing:-0.02em;line-height:1.14;margin:10px 0 12px;text-wrap:balance}
+  .hero p{max-width:66ch;color:var(--pg-muted);font-size:15px}
+  section{padding:44px 0 6px}
+  .sec-eyebrow{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--pg-subtle)}
+  .sec-title{font-size:22px;font-weight:700;letter-spacing:-0.015em;margin:6px 0 8px}
+  .sec-note{color:var(--pg-muted);max-width:74ch;margin-bottom:22px}
+  .findings{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
+  .finding{background:var(--pg-card);border:1px solid var(--pg-border);border-radius:12px;padding:16px 18px}
+  .finding .tag{display:inline-flex;font-size:10.5px;font-weight:700;letter-spacing:.06em;border-radius:999px;padding:2px 9px;margin-bottom:8px}
+  .tag.p0{background:#FCE5E3;color:#B3372C}
+  .tag.p1{background:#FCF0D8;color:#8A6116}
+  .tag.p2{background:#E3EFFA;color:#2563A8}
+  .finding h3{font-size:13.5px;font-weight:700;margin-bottom:5px}
+  .finding p{font-size:12.5px;color:var(--pg-muted);line-height:1.55}
+  .finding code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;background:var(--pg-bg);border:1px solid var(--pg-border);border-radius:4px;padding:0 4px}
+  /* boards */
+  .frame{border:1px solid var(--frame-edge);border-radius:14px;overflow:hidden;box-shadow:0 2px 14px rgba(0,0,0,.05);margin-bottom:10px}
+  .frame-bar{display:flex;align-items:center;gap:8px;background:var(--pg-card);border-bottom:1px solid var(--pg-border);padding:8px 14px}
+  .frame-bar .dots{display:flex;gap:5px}
+  .frame-bar .dots i{width:9px;height:9px;border-radius:50%;background:var(--pg-border);display:block}
+  .frame-bar b{font-size:12px;font-weight:700}
+  .frame-bar span.lab{font-size:11.5px;color:var(--pg-subtle)}
+  .frame-scroll{overflow-x:auto}
+  .board{
+    --bg:#F7F3ED; --card:#fff; --sidebar:#F9F7F4; --side-hover:#EFEBE4;
+    --ink:#262F31; --muted:#657172; --subtle:#8C9899; --border:#E5E0D6;
+    --accent:#0CAF7D; --accent-deep:#087C58; --accent-tint:#E3F8F0;
+    min-width:980px; background:var(--bg); color:var(--ink); font-size:13px;
+    display:flex; position:relative; height:470px; overflow:hidden;
+  }
+  .board *{box-sizing:border-box}
+  .b-side{width:240px;flex:none;background:var(--sidebar);border-right:1px solid var(--border);display:flex;flex-direction:column;position:relative}
+  .b-main{flex:1;min-width:0;position:relative;display:flex;flex-direction:column}
+  /* nav shared */
+  .b-nav{padding:8px;flex:1;overflow:hidden;position:relative}
+  .b-eyebrow{font-size:10.5px;font-weight:700;text-transform:uppercase;color:var(--subtle);padding:12px 10px 4px}
+  .b-item{display:flex;align-items:center;gap:9px;height:30px;padding:0 10px;border-radius:6px;font-size:13px;font-weight:500;color:var(--muted);cursor:pointer;transition:background .14s,color .14s;position:relative;user-select:none}
+  .b-item:hover{background:var(--side-hover);color:var(--ink)}
+  .b-item.on{background:var(--accent-tint);color:var(--accent-deep);font-weight:600}
+  .b-item svg{width:16px;height:16px;flex:none}
+  .b-foot{border-top:1px solid var(--border);padding:8px;font-size:12.5px}
+  .b-frow{display:flex;align-items:center;gap:9px;height:28px;padding:0 10px;border-radius:6px;color:var(--muted);cursor:pointer}
+  .b-frow:hover{background:var(--side-hover);color:var(--ink)}
+  .b-frow svg{width:14px;height:14px}
+  .b-user{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:6px;cursor:pointer}
+  .b-user:hover{background:var(--side-hover)}
+  .b-user .av{width:24px;height:24px;border-radius:50%;background:var(--accent-tint);color:var(--accent-deep);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}
+  .b-user b{font-size:12.5px;font-weight:600}
+  /* BEFORE specifics */
+  .v1 .b-brand{height:64px;display:flex;align-items:center;gap:10px;padding:0 14px;border-bottom:1px solid var(--border);flex:none}
+  .v1 .b-logo-raw{display:flex;flex-direction:column;align-items:center;line-height:1;flex:none}
+  .v1 .b-logo-raw .m{display:flex;align-items:center;gap:3px;font-weight:800;font-size:13px;color:#C0392B}
+  .v1 .b-logo-raw .m i{width:13px;height:13px;border-radius:50%;background:#C0392B;display:inline-block}
+  .v1 .b-logo-raw .t{font-size:4.5px;color:#8a8378;margin-top:2px;white-space:nowrap}
+  .v1 .b-item.on::before{content:'';position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:2px;background:var(--accent)}
+  .v1 .b-item svg{stroke-width:2px !important}
+  .v1 .b-phead{padding:24px 24px 20px;background:linear-gradient(to bottom, rgba(12,175,125,.055), transparent);border-bottom:1px solid rgba(38,47,49,.12)}
+  .v1 .b-phead h1{font-size:20px;font-weight:700;letter-spacing:-0.01em}
+  .v1 .b-phead .sub{font-size:12px;color:var(--muted);margin-top:4px}
+  .v1 .b-pow{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--subtle);padding:8px 10px 4px}
+  .v1 .b-pow b{color:var(--pg-accent-deep);font-size:11px}
+  /* AFTER specifics — the unified band */
+  /* PROPOSED — Shopify's architecture: a 52px identity top bar spanning the
+     full width (the ONE hairline; the wash lives here now), then a row of
+     nav-only sidebar + content with a QUIET page header. */
+  .v3{flex-direction:column}
+  .v3 .b-top{height:52px;flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 12px 0 14px;background:linear-gradient(to bottom, rgba(12,175,125,.05), rgba(12,175,125,.012)),#F9F7F4;border-bottom:1px solid rgba(38,47,49,.12);position:relative;z-index:5}
+  .v3 .b-top-left{display:flex;align-items:center;gap:10px;min-width:0;cursor:pointer}
+  .v3 .b-tile{width:28px;height:28px;border-radius:6px;background:#fff;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;flex:none;box-shadow:0 1px 2px rgba(38,47,49,.04)}
+  .v3 .b-tile span{font-weight:800;font-size:12.5px;color:#C0392B}
+  .v3 .b-top-left b{font-size:13.5px;font-weight:700;white-space:nowrap}
+  .v3 .b-admtag{font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:#EFEBE4;border-radius:999px;padding:2px 7px}
+  .v3 .b-top-right{display:flex;align-items:center;gap:4px}
+  .v3 .b-tbtn{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:6px;border:none;background:transparent;font:inherit;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer;transition:background .14s,color .14s}
+  .v3 .b-tbtn:hover{background:rgba(38,47,49,.05);color:var(--ink)}
+  .v3 .b-tbtn svg{width:14px;height:14px}
+  .v3 .b-tdiv{width:1px;height:16px;background:var(--border);margin:0 6px}
+  .v3 .b-tuser{display:flex;align-items:center;gap:4px;cursor:pointer;padding:3px 5px 3px 3px;border-radius:999px;transition:background .14s}
+  .v3 .b-tuser:hover{background:rgba(38,47,49,.05)}
+  .v3 .b-tuser .av{width:26px;height:26px;border-radius:50%;background:var(--accent-tint);color:var(--accent-deep);font-size:10.5px;font-weight:700;display:flex;align-items:center;justify-content:center}
+  .v3 .b-tuser .chev{width:12px;height:12px;color:var(--subtle)}
+  .v3 .b-row{flex:1;display:flex;min-height:0}
+  .v3 .b-side{position:relative}
+  .v3 .b-nav{overflow-y:auto;scrollbar-width:none;padding:10px 8px;min-height:0}
+  .v3 .b-nav::-webkit-scrollbar{width:0;height:0}
+  .v3 .b-item svg{stroke-width:1.5px}
+  .v3 .b-eyebrow{letter-spacing:.14em}
+  .v3 .b-navfade{position:absolute;left:1px;right:1px;height:34px;pointer-events:none;opacity:0;transition:opacity .2s;z-index:4}
+  .v3 .b-navfade.down{bottom:64px;background:linear-gradient(to bottom, rgba(249,247,244,0), #F9F7F4 80%)}
+  .v3 .b-navfade.up{top:0;background:linear-gradient(to top, rgba(249,247,244,0), #F9F7F4 80%)}
+  .v3 .b-navfade.show{opacity:1}
+  .v3 .b-foot{flex:none}
+  .v3 .b-pow{display:flex;align-items:center;gap:4px;font-size:10.5px;color:var(--subtle);padding:6px 10px 2px}
+  .v3 .b-phead3{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:24px 24px 2px}
+  .v3 .b-phead3 h1{font-size:20px;font-weight:700;letter-spacing:-0.01em}
+  .v3 .b-phead3 .sub{font-size:12px;color:var(--muted);margin-top:4px}
+  .v3 .b-phead3 .acts{display:flex;gap:8px;align-items:center;flex:none}
+  .v3 .b-btn{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:6px;font-size:12.5px;font-weight:600;border:1px solid transparent;cursor:pointer}
+  .v3 .b-btn.pri{background:var(--accent);color:#fff}
+  .v3 .b-btn.sec{background:#fff;border-color:#D8D1C3;color:var(--ink)}
+  /* content hints below band */
+  .b-hint{padding:20px 24px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
+  .b-hintcard{background:var(--card);border:1px solid var(--border);border-radius:10px;height:84px;box-shadow:0 1px 2px rgba(38,47,49,.04);padding:12px}
+  .b-hintcard .k{height:8px;width:56px;border-radius:4px;background:#EFEBE4;margin-bottom:12px}
+  .b-hintcard .v{height:16px;width:80px;border-radius:4px;background:#E7E2D8}
+  /* annotations */
+  .anno{position:absolute;left:0;right:0;pointer-events:none;z-index:20}
+  .anno .line{position:absolute;left:0;right:0;border-top:1.5px dashed var(--pg-red);opacity:.85}
+  .anno .line.ok{border-color:#0CAF7D}
+  .anno .pill{position:absolute;right:10px;transform:translateY(-50%);font-size:10.5px;font-weight:700;background:var(--pg-red);color:#fff;border-radius:999px;padding:2px 9px;white-space:nowrap}
+  .anno .pill.ok{background:#087C58}
+  /* flash overlay for the BEFORE demo */
+  .flashveil{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:30;transition:opacity 120ms}
+  .board.flashing .flashveil{opacity:.92}
+  .demo-note{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 4px}
+  .demo-note span{font-size:12px;color:var(--pg-muted);background:var(--pg-card);border:1px solid var(--pg-border);border-radius:999px;padding:4px 12px}
+  .demo-note b{color:var(--pg-ink);font-weight:600}
+  /* spec table */
+  table.spec{width:100%;border-collapse:collapse;font-size:12.5px;background:var(--pg-card);border:1px solid var(--pg-border);border-radius:12px;overflow:hidden}
+  .spec th{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--pg-subtle);text-align:left;padding:10px 14px;border-bottom:1px solid var(--pg-border)}
+  .spec td{padding:9px 14px;border-bottom:1px solid var(--pg-border);vertical-align:top}
+  .spec tr:last-child td{border-bottom:none}
+  .spec td:first-child{font-weight:600;white-space:nowrap}
+  .spec code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;background:var(--pg-bg);border:1px solid var(--pg-border);border-radius:4px;padding:0 4px}
+  .tablewrap{overflow-x:auto;border-radius:12px}
+  /* plan */
+  .plan{display:flex;flex-direction:column;gap:10px}
+  .step{display:flex;gap:14px;background:var(--pg-card);border:1px solid var(--pg-border);border-radius:12px;padding:14px 16px}
+  .step .n{flex:none;width:26px;height:26px;border-radius:8px;background:var(--pg-ink);color:var(--pg-bg);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:2px}
+  .step h3{font-size:13.5px;font-weight:700;margin-bottom:3px}
+  .step h3 .pf{font-size:10.5px;font-weight:700;border-radius:999px;padding:1px 8px;margin-left:8px;vertical-align:1px}
+  .pf.p0{background:#FCE5E3;color:#B3372C}
+  .pf.p1{background:#FCF0D8;color:#8A6116}
+  .pf.p2{background:#E3EFFA;color:#2563A8}
+  .step p{font-size:12.5px;color:var(--pg-muted);line-height:1.55}
+  .step code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;background:var(--pg-bg);border:1px solid var(--pg-border);border-radius:4px;padding:0 4px}
+  footer{padding:40px 0 56px;color:var(--pg-subtle);font-size:12.5px}
+  footer .wrap{border-top:1px solid var(--pg-border);padding-top:22px}
+</style>
+<svg width="0" height="0" style="position:absolute" aria-hidden="true"><defs>
+  <symbol id="i-home" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 10.5 12 3l9 7.5"/><path d="M5.5 8.8V21h13V8.8"/><path d="M9.5 21v-6h5v6"/></symbol>
+  <symbol id="i-receipt" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5.5 3h13v18l-2.2-1.4-2.1 1.4-2.2-1.4L9.9 21l-2.2-1.4L5.5 21z"/><path d="M9 8.5h6M9 12.5h6"/></symbol>
+  <symbol id="i-box" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 8.2 12 3 3 8.2v7.6L12 21l9-5.2z"/><path d="M3 8.2l9 5.1 9-5.1"/><path d="M12 21v-7.7"/></symbol>
+  <symbol id="i-users" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="8" r="3.4"/><path d="M2.8 20c.4-3.3 3-5.2 6.2-5.2s5.8 1.9 6.2 5.2"/><path d="M15.5 5.2a3.2 3.2 0 0 1 0 6"/><path d="M17.3 15.1c2.4.5 4 2.2 4.3 4.9"/></symbol>
+  <symbol id="i-folder" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7.5A2.5 2.5 0 0 1 5.5 5h4l2 2.5h7A2.5 2.5 0 0 1 21 10v7.5a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5z"/></symbol>
+  <symbol id="i-tag" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 11.8 11.8 3H21v9.2L12.2 21z"/><circle cx="16.2" cy="7.8" r="1.3"/></symbol>
+  <symbol id="i-pin" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 21.3S5.2 15 5.2 10.2a6.8 6.8 0 0 1 13.6 0C18.8 15 12 21.3 12 21.3z"/><circle cx="12" cy="10" r="2.4"/></symbol>
+  <symbol id="i-image" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><circle cx="8.4" cy="9.6" r="1.5"/><path d="M21 15.5 16 10.5 6.5 19"/></symbol>
+  <symbol id="i-mail" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3.5 7.5 8.5 6 8.5-6"/></symbol>
+  <symbol id="i-chart" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 20v-7M12 20V5M19 20v-10"/></symbol>
+  <symbol id="i-card" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2.5" y="5.5" width="19" height="13" rx="2"/><path d="M2.5 10h19"/></symbol>
+  <symbol id="i-truck" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 6.5H14V17H2.5z"/><path d="M14 9.5h3.8l2.7 3V17H14"/><circle cx="7" cy="17.6" r="1.9"/><circle cx="16.8" cy="17.6" r="1.9"/></symbol>
+  <symbol id="i-pct" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 19 19 5"/><circle cx="7" cy="7" r="2.4"/><circle cx="17" cy="17" r="2.4"/></symbol>
+  <symbol id="i-sliders" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7h16M4 12h16M4 17h16"/><circle cx="9.5" cy="7" r="1.9" fill="#F9F7F4"/><circle cx="15" cy="12" r="1.9" fill="#F9F7F4"/><circle cx="7.5" cy="17" r="1.9" fill="#F9F7F4"/></symbol>
+  <symbol id="i-edit" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m4.5 19.5.9-3.6L16.6 4.7a2 2 0 0 1 2.8 2.8L8.2 18.7z"/></symbol>
+  <symbol id="i-ext" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M14 4h6v6M20 4 10.5 13.5M17.5 13.5V20h-13V6.5H11"/></symbol>
+  <symbol id="i-chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></symbol>
+  <symbol id="i-plus" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></symbol>
+  <symbol id="i-star" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m12 3.5 2.7 5.4 6 .9-4.3 4.2 1 6-5.4-2.9L6.6 20l1-6L3.3 9.8l6-.9z"/></symbol>
+  <symbol id="i-bag" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5.5 8h13l1 13h-15z"/><path d="M8.5 10.5V7a3.5 3.5 0 0 1 7 0v3.5"/></symbol>
+</defs></svg>
+<header class="hero">
+  <div class="wrap">
+    <div class="eyebrow">Rovela Admin · LEDGER · Sidebar Deep-Dive</div>
+    <h1>The sidebar, rebuilt<br>on Shopify's architecture.</h1>
+    <p>Audit and plan only, nothing implemented. The reason Shopify's bar never feels cramped: their sidebar carries no identity at all. Store, account and store-links live in a slim top bar; the column below is pure navigation. This proposal adopts that architecture — a 52px identity top bar (which dissolves the separator-alignment question into one full-width hairline), a nav-only sidebar that fits without scrolling on any laptop, an elegant fade + auto-hiding scrollbar for stores whose custom pages overflow it, and true SPA navigation underneath so nothing ever flashes.</p>
+  </div>
+</header>
+<!-- ═══════════ AUDIT ═══════════ -->
+<section id="audit">
+  <div class="wrap">
+    <div class="sec-eyebrow">Section 1</div>
+    <h2 class="sec-title">Audit — nine findings, ranked</h2>
+    <p class="sec-note">Everything below is verified in code (AdminNav.tsx, AdminUserMenu.tsx, useAdminSession.ts, admin-theme.css) and on the live EasyElec admin.</p>
+    <div class="findings">
+      <div class="finding"><span class="tag p0">P0 · the flash you saw</span>
+        <h3>Every sidebar click is a full page reload</h3>
+        <p>Nav items render plain <code>&lt;a href&gt;</code> — zero <code>next/link</code> in AdminNav. Each click tears down the whole React tree: the session and store-settings refetch from scratch, and while they load the UI paints fallbacks — your name becomes "Admin" for a few hundred ms, then corrects. It also resets scroll, re-runs every fetch, and makes each navigation feel like 2005. This one fix upgrades the entire admin's perceived speed at once.</p>
+      </div>
+      <div class="finding"><span class="tag p0">P0 · your separator note</span>
+        <h3>Two hairlines, two heights</h3>
+        <p>The sidebar brand row is fixed at <code>64px</code> with its border there; the page-header band varies between ~70 and ~112px depending on eyebrow and subtitle, so its border floats at a different height on every page. Two competing lines in the same zone read as misalignment because they are.</p>
+      </div>
+      <div class="finding"><span class="tag p1">P1</span>
+        <h3>Wrong-value fallbacks instead of skeletons</h3>
+        <p>While loading, the user menu literally renders the string "Admin" and the avatar letter "A"; the store name falls back to "Admin" too. Painting a wrong value and correcting it is the glitch signature. The rule: unknown values render a quiet skeleton, never a placeholder that looks like data.</p>
+      </div>
+      <div class="finding"><span class="tag p1">P1</span>
+        <h3>Raw merchant logo in the brand row</h3>
+        <p>The logo image renders untreated at 32px height — EasyElec's mark has a baked-in tagline that turns to mush. Arbitrary merchant logos need a frame: a white 32px tile with a hairline, logo contained inside, ink monogram as fallback (today's fallback badge is emerald-tinted, spending the accent on decoration).</p>
+      </div>
+      <div class="finding"><span class="tag p1">P1</span>
+        <h3>Active item carries a left accent bar</h3>
+        <p>The active state is a tint pill AND a 3px accent indicator bar. Double-encoding, and the colored-left-bar is a known template tell. The tint pill alone is the Linear/Polaris answer.</p>
+      </div>
+      <div class="finding"><span class="tag p1">P1</span>
+        <h3>Footer is a five-row stack</h3>
+        <p>Settings + Edit store + View store + user menu + Powered by Rovela. It's the heaviest zone of the sidebar and the least used. Settings stays pinned (Shopify's signature), the two store links compact to 28px quiet rows, powered-by drops to a 10.5px single line.</p>
+      </div>
+      <div class="finding"><span class="tag p2">P2</span>
+        <h3>Icons at 2px stroke, 18px box</h3>
+        <p>LAW 07 says 15–16px at 1.5px stroke next to 13px labels. Current nav icons are optically heavier than everything else in the system.</p>
+      </div>
+      <div class="finding"><span class="tag p2">P2</span>
+        <h3>Eyebrow tracking differs from the band's</h3>
+        <p>Sidebar group labels track at ~0.09em while the page-header eyebrow tracks at 0.14em. One eyebrow spec (11px / 600 / uppercase / 0.14em) everywhere; color stays muted in the sidebar so the accent isn't spent.</p>
+      </div>
+      <div class="finding"><span class="tag p2">P2</span>
+        <h3>Nav clips without a scroll affordance</h3>
+        <p>On short viewports the last items (Team, Settings…) sit hidden behind the footer with no cue. The nav area needs <code>overflow-y: auto</code> with a thin scrollbar and soft fade masks top and bottom, so clipped means "scrollable", not "broken". Mobile still needs its drawer — kept as its own later phase.</p>
+      </div>
+    </div>
+  </div>
+</section>
+<!-- ═══════════ BEFORE / AFTER ═══════════ -->
+<section id="boards">
+  <div class="wrap">
+    <div class="sec-eyebrow">Section 2</div>
+    <h2 class="sec-title">See it — today vs proposed</h2>
+    <p class="sec-note">Both boards are interactive. In the first, click any nav item: it simulates today's full-page reload, name flash included. In the second, click around (instant) and scroll the nav (the fade is the scroll indicator). This supersedes the earlier 104px aligned-band idea — you were right that separator alignment isn't worth the vertical budget; moving identity into a top bar dissolves the problem instead of solving it.</p>
+    <!-- BEFORE -->
+    <div class="frame">
+      <div class="frame-bar"><div class="dots"><i></i><i></i><i></i></div><b>Today</b><span class="lab">· click a nav item to feel the reload</span></div>
+      <div class="frame-scroll">
+        <div class="board v1" id="board-before">
+          <aside class="b-side">
+            <div class="b-brand">
+              <div class="b-logo-raw"><span class="m"><i></i>EasyElec</span><span class="t">Vente de matériel électrique et appareillages neufs</span></div>
+              <div style="min-width:0"><b style="font-size:13px;font-weight:700;display:block;line-height:1.2" class="js-store">EasyElec</b><span style="font-size:11px;color:var(--subtle)">Admin</span></div>
+            </div>
+            <nav class="b-nav">
+              <div class="b-item on nav1" data-l="Home"><svg><use href="#i-home"/></svg>Home</div>
+              <div class="b-item nav1" data-l="Orders"><svg><use href="#i-receipt"/></svg>Orders</div>
+              <div class="b-item nav1" data-l="Products"><svg><use href="#i-box"/></svg>Products</div>
+              <div class="b-item nav1" data-l="Customers"><svg><use href="#i-users"/></svg>Customers</div>
+              <div class="b-eyebrow" style="letter-spacing:.09em">Store</div>
+              <div class="b-item nav1" data-l="Categories"><svg><use href="#i-folder"/></svg>Categories</div>
+              <div class="b-item nav1" data-l="Discounts"><svg><use href="#i-tag"/></svg>Discounts</div>
+              <div class="b-item nav1" data-l="Locations"><svg><use href="#i-pin"/></svg>Locations</div>
+              <div class="b-item nav1" data-l="Files"><svg><use href="#i-image"/></svg>Files</div>
+              <div class="b-item nav1" data-l="Emails"><svg><use href="#i-mail"/></svg>Emails</div>
+              <div class="b-item nav1" data-l="Analytics"><svg><use href="#i-chart"/></svg>Analytics</div>
+              <div class="b-eyebrow" style="letter-spacing:.09em">Configuration</div>
+              <div class="b-item nav1" data-l="Payments"><svg><use href="#i-card"/></svg>Payments</div>
+            </nav>
+            <div class="b-foot">
+              <div class="b-frow"><svg><use href="#i-sliders"/></svg>Settings</div>
+              <div class="b-frow"><svg><use href="#i-edit"/></svg>Edit Store</div>
+              <div class="b-frow"><svg><use href="#i-ext"/></svg>View Store</div>
+              <div class="b-user"><span class="av js-av">GB</span><b class="js-user">Ghali Bennis</b><svg style="width:13px;height:13px;color:var(--subtle);margin-left:auto"><use href="#i-chev"/></svg></div>
+              <div class="b-pow">Powered by <b>⟠ Rovela</b></div>
+            </div>
+          </aside>
+          <main class="b-main">
+            <div class="b-phead">
+              <h1 class="js-title">Home</h1>
+              <div class="sub">Good afternoon, Ghali</div>
+            </div>
+            <div class="b-hint">
+              <div class="b-hintcard"><div class="k"></div><div class="v"></div></div>
+              <div class="b-hintcard"><div class="k"></div><div class="v"></div></div>
+              <div class="b-hintcard"><div class="k"></div><div class="v"></div></div>
+              <div class="b-hintcard"><div class="k"></div><div class="v"></div></div>
+            </div>
+          </main>
+          <!-- annotations: two misaligned hairlines -->
+          <div class="anno">
+            <div class="line" style="top:64px;left:0;width:240px;right:auto"></div>
+            <span class="pill" style="top:64px;right:auto;left:126px">sidebar line · 64px</span>
+            <div class="line" style="top:92px;left:240px"></div>
+            <span class="pill" style="top:92px">content line · ~70–112px, varies per page</span>
+          </div>
+          <div class="flashveil"></div>
+        </div>
+      </div>
+    </div>
+    <div class="demo-note">
+      <span><b>What you just saw</b> is the simulation of a real full-document reload: white flash, store + user names reset to "Admin", then correct themselves</span>
+      <span>two red lines never meet</span>
+    </div>
+    <!-- AFTER -->
+    <div class="frame" style="margin-top:26px">
+      <div class="frame-bar"><div class="dots"><i></i><i></i><i></i></div><b>Proposed</b><span class="lab">· click around, then scroll the nav — the fade tells you there's more</span></div>
+      <div class="frame-scroll">
+        <div class="board v3" id="board-after">
+          <div class="b-top">
+            <div class="b-top-left">
+              <div class="b-tile"><span>e</span></div>
+              <b>EasyElec</b><span class="b-admtag">Admin</span>
+            </div>
+            <div class="b-top-right">
+              <button class="b-tbtn"><svg><use href="#i-ext"/></svg>View store</button>
+              <button class="b-tbtn"><svg><use href="#i-edit"/></svg>Edit store</button>
+              <i class="b-tdiv"></i>
+              <div class="b-tuser"><span class="av">GB</span><svg class="chev"><use href="#i-chev"/></svg></div>
+            </div>
+          </div>
+          <div class="b-row">
+            <aside class="b-side">
+              <nav class="b-nav" id="nav-scroll">
+                <div class="b-item on nav2" data-l="Home" data-s="Good afternoon, Ghali"><svg><use href="#i-home"/></svg>Home</div>
+                <div class="b-item nav2" data-l="Orders" data-s="Track, fulfill and refund your customers' orders."><svg><use href="#i-receipt"/></svg>Orders</div>
+                <div class="b-item nav2" data-l="Products" data-s="Manage your product catalog."><svg><use href="#i-box"/></svg>Products</div>
+                <div class="b-item nav2" data-l="Customers" data-s="Everyone with an account or an order in your store."><svg><use href="#i-users"/></svg>Customers</div>
+                <div class="b-eyebrow">Store</div>
+                <div class="b-item nav2" data-l="Categories" data-s="Collections your customers browse."><svg><use href="#i-folder"/></svg>Categories</div>
+                <div class="b-item nav2" data-l="Discounts" data-s="Codes and automatic promotions."><svg><use href="#i-tag"/></svg>Discounts</div>
+                <div class="b-item nav2" data-l="Locations" data-s="Your physical shops."><svg><use href="#i-pin"/></svg>Locations</div>
+                <div class="b-item nav2" data-l="Files" data-s="Every image and video your store uses."><svg><use href="#i-image"/></svg>Files</div>
+                <div class="b-item nav2" data-l="Emails" data-s="The emails your store sends, styled to your brand."><svg><use href="#i-mail"/></svg>Emails</div>
+                <div class="b-item nav2" data-l="Analytics" data-s="Visitors, sessions, and conversion."><svg><use href="#i-chart"/></svg>Analytics</div>
+                <div class="b-eyebrow">Configuration</div>
+                <div class="b-item nav2" data-l="Payments" data-s="How your store gets paid."><svg><use href="#i-card"/></svg>Payments</div>
+                <div class="b-item nav2" data-l="Shipping" data-s="Carriers, zones and rates."><svg><use href="#i-truck"/></svg>Shipping</div>
+                <div class="b-item nav2" data-l="Tax" data-s="How tax applies to your prices."><svg><use href="#i-pct"/></svg>Tax</div>
+                <div class="b-item nav2" data-l="Team" data-s="The people who can sign in to this admin."><svg><use href="#i-users"/></svg>Team</div>
+                <div class="b-eyebrow">Features</div>
+                <div class="b-item nav2" data-l="Reviews" data-s="A custom page this merchant added from the Features Store."><svg><use href="#i-star"/></svg>Reviews</div>
+                <div class="b-item nav2" data-l="Wholesale" data-s="Another merchant-added page — this is why scroll must exist."><svg><use href="#i-bag"/></svg>Wholesale</div>
+              </nav>
+              <div class="b-navfade up" id="fade-up"></div>
+              <div class="b-navfade down" id="fade-down"></div>
+              <div class="b-foot">
+                <div class="b-frow"><svg><use href="#i-sliders"/></svg>Settings</div>
+                <div class="b-pow">Powered by <b style="color:var(--pg-accent-deep)">⟠ Rovela</b></div>
+              </div>
+            </aside>
+            <main class="b-main">
+              <div class="b-phead3">
+                <div>
+                  <h1 class="js-title2">Home</h1>
+                  <div class="sub js-sub2">Good afternoon, Ghali</div>
+                </div>
+                <div class="acts">
+                  <button class="b-btn sec">Last 30 days<svg style="width:12px;height:12px"><use href="#i-chev"/></svg></button>
+                  <button class="b-btn pri"><svg style="width:13px;height:13px"><use href="#i-plus"/></svg>Add product</button>
+                </div>
+              </div>
+              <div class="b-hint">
+                <div class="b-hintcard"><div class="k"></div><div class="v"></div></div>
+                <div class="b-hintcard"><div class="k"></div><div class="v"></div></div>
+                <div class="b-hintcard"><div class="k"></div><div class="v"></div></div>
+                <div class="b-hintcard"><div class="k"></div><div class="v"></div></div>
+              </div>
+            </main>
+          </div>
+          <div class="anno">
+            <div class="line ok" style="top:52px"></div>
+            <span class="pill ok" style="top:52px">the one hairline · full width · 52px top bar carries the wash</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="demo-note">
+      <span><b>Shopify's architecture:</b> identity, store links and your account live in the top bar; the sidebar is pure navigation</span>
+      <span>core nav (15 items) fits with no scroll on any laptop; this demo adds a merchant's custom Features pages to force overflow — <b>scroll the nav</b> and watch the fades</span>
+      <span>scrollbar is hidden until you scroll; the fade is the indicator</span>
+      <span>page header goes quiet: the wash and hairline now live only in the top bar</span>
+      <span>View store / Edit store leave the sidebar AND the dashboard header — one home</span>
+    </div>
+  </div>
+</section>
+<!-- ═══════════ SPEC ═══════════ -->
+<section id="spec">
+  <div class="wrap">
+    <div class="sec-eyebrow">Section 3</div>
+    <h2 class="sec-title">The spec, in numbers</h2>
+    <p class="sec-note">Everything additive on the existing tokens; no <code>.admin-*</code> class is renamed or removed.</p>
+    <div class="tablewrap">
+    <table class="spec">
+      <thead><tr><th style="width:220px">Element</th><th>Proposed</th><th>Today</th></tr></thead>
+      <tbody>
+        <tr><td>Top bar (new)</td><td>52px, full width, in the sidebar tone with the accent wash and the single bottom hairline — the identity band, now one element with nothing to align. Left: 28px white logo tile (hairline, radius 6, <code>object-contain</code>, ink monogram fallback) + store name 13.5/700 + uppercase "Admin" chip, linking to <code>/admin</code>. Right: View store + Edit store as ghost buttons, divider, avatar menu (name, email, account, sign out). On mobile it hosts the hamburger later.</td><td>Doesn't exist — identity, user menu and store links all crowd the sidebar column.</td></tr>
+        <tr><td>Sidebar</td><td>Pure navigation, 240px: the daily four, Store, Configuration (+ merchant Features group when present). Rows 30px / 13 / icons 16px at 1.5 stroke, tint pill active with no indicator bar, eyebrows at the band spec (11 / 600 / 0.14em, muted). Footer is just Settings pinned + a 10.5px powered-by line. Core nav = ~500px: <b>no scroll on anything taller than a 640px viewport</b>.</td><td>Brand block + nav + five-row footer ≈ 690px; scrolls on ordinary laptops, clips with no cue.</td></tr>
+        <tr><td>Page header</td><td>Goes quiet: keeps AdminPageHeader's structure (markup untouched) but drops the wash, full-bleed and bottom border — those now belong to the top bar. Dashboard drops its View/Edit store buttons (they live in the top bar); actions reduce to period + Add product.</td><td>Washed full-bleed band per page whose border height varies 70–112px and competes with the sidebar's 64px line.</td></tr>
+        <tr><td>Navigation clicks</td><td><code>next/link</code> for every internal route. External links stay anchors with <code>target="_blank"</code>. Active detection already uses <code>usePathname()</code> — survives soft navigation untouched.</td><td>Plain <code>&lt;a href&gt;</code> → full reload per click.</td></tr>
+        <tr><td>Loading identity</td><td>Skeleton bars while session/settings load — never "Admin"/"A" placeholder text. Module-level session cache paints the real name instantly on remounts.</td><td>Literal "Admin" + "A" fallbacks that flash and correct.</td></tr>
+        <tr><td>Scroll affordance</td><td><code>overflow-y: auto</code>; scrollbar hidden until scrolling (thin on hover); 34px directional fades that appear <b>only</b> when content continues in that direction — the fade IS the indicator.</td><td>Items clip behind the footer with no cue.</td></tr>
+        <tr><td>Mobile</td><td>Later phase: hamburger in the top bar → 200ms focus-trapped drawer under 768px.</td><td>Sidebar consumes 60% of a phone screen.</td></tr>
+      </tbody>
+    </table>
+    </div>
+  </div>
+</section>
+<!-- ═══════════ PLAN ═══════════ -->
+<section id="plan">
+  <div class="wrap">
+    <div class="sec-eyebrow">Section 4</div>
+    <h2 class="sec-title">Implementation plan — six steps, almost all SDK-side</h2>
+    <p class="sec-note">AdminLayout is an SDK component and templates just mount it, so the top bar + slim sidebar ship to both template mirrors automatically with the version bump. The only template file that moves is the dashboard page (dropping its now-duplicate View/Edit store buttons). Each step is independently shippable.</p>
+    <div class="plan">
+      <div class="step"><span class="n">1</span><div>
+        <h3>Kill the reloads (the flash fix)<span class="pf p0">P0</span></h3>
+        <p>Convert AdminNav's internal links to <code>next/link</code> — nav items, brand link, Settings. The (dashboard) layout then persists across navigation, so the session and settings never refetch on a click and the flash becomes structurally impossible. Files: <code>AdminNav.tsx</code>. Active states need zero work (already pathname-reactive).</p>
+      </div></div>
+      <div class="step"><span class="n">2</span><div>
+        <h3>Skeletons, never wrong values<span class="pf p0">P0</span></h3>
+        <p>Cold loads still fetch once. While loading: skeleton bars, never the literal "Admin"/"A". Module-level last-session cache in <code>useAdminSession</code> so remounts paint the real name instantly. Files: <code>AdminNav.tsx</code>, <code>AdminUserMenu.tsx</code>, <code>useAdminSession.ts</code>.</p>
+      </div></div>
+      <div class="step"><span class="n">3</span><div>
+        <h3>AdminTopBar + slim AdminNav<span class="pf p0">P0</span></h3>
+        <p>New <code>AdminTopBar</code> component (logo tile + store name + Admin chip left; View store, Edit store, avatar menu right). <code>AdminLayout</code> restructures to top bar over sidebar + main. <code>AdminNav</code> slims to navigation only: groups + Settings pinned + the one-line powered-by; the user menu and store links move up. All additive classes in <code>admin-theme.css</code>; nothing renamed. Files: <code>AdminTopBar.tsx</code> (new), <code>AdminLayout.tsx</code>, <code>AdminNav.tsx</code>, <code>admin-theme.css</code>.</p>
+      </div></div>
+      <div class="step"><span class="n">4</span><div>
+        <h3>Quiet page headers + dashboard dedupe<span class="pf p1">P1</span></h3>
+        <p>The page-header band loses its wash, full-bleed margins and bottom border (CSS only — AdminPageHeader markup and every page we standardized stay untouched). Dashboard actions reduce to period + Add product since View/Edit store live in the top bar. Files: <code>admin-theme.css</code> + dashboard <code>page.tsx</code> in both mirrors.</p>
+      </div></div>
+      <div class="step"><span class="n">5</span><div>
+        <h3>Nav metrics pass<span class="pf p1">P1</span></h3>
+        <p>Icons to 16px / 1.5 stroke, remove the active indicator bar, unify eyebrow tracking to 0.14em, ink monogram fallback for the logo tile. Files: <code>AdminNav.tsx</code>, <code>AdminTopBar.tsx</code>, <code>admin-theme.css</code>.</p>
+      </div></div>
+      <div class="step"><span class="n">6</span><div>
+        <h3>Scroll affordance<span class="pf p2">P2</span></h3>
+        <p>Nav <code>overflow-y: auto</code>, scrollbar hidden until scrolling, directional 34px fades that appear only when content continues that way (tiny scroll listener toggling two classes). Core nav fits without any of this on ≥640px viewports; it exists for merchant-added Features pages. Files: <code>AdminNav.tsx</code>, <code>admin-theme.css</code>. (Mobile drawer stays its own later phase, hamburger in the top bar.)</p>
+      </div></div>
+    </div>
+  </div>
+</section>
+<footer>
+  <div class="wrap">
+    Sidebar &amp; Band proposal · audit and plan only, no code shipped · part of the LEDGER design language · July 10, 2026. Verified against AdminNav.tsx, AdminUserMenu.tsx, useAdminSession.ts and admin-theme.css in the working tree.
+  </div>
+</footer>
+<script>
+(function(){
+  // BEFORE: simulate today's full-page reload on nav click
+  var before = document.getElementById('board-before');
+  var busy = false;
+  if(before){
+    var store = before.querySelector('.js-store');
+    var user = before.querySelector('.js-user');
+    var av = before.querySelector('.js-av');
+    var title = before.querySelector('.js-title');
+    before.querySelectorAll('.nav1').forEach(function(it){
+      it.addEventListener('click', function(){
+        if(busy) return; busy = true;
+        var label = it.dataset.l;
+        before.classList.add('flashing');
+        setTimeout(function(){
+          // "reload": fallbacks paint first
+          store.textContent = 'Admin';
+          user.textContent = 'Admin';
+          av.textContent = 'A';
+          title.textContent = label;
+          before.querySelectorAll('.nav1').forEach(function(n){ n.classList.remove('on') });
+          it.classList.add('on');
+          before.classList.remove('flashing');
+          // then the fetches resolve and names correct themselves
+          setTimeout(function(){
+            store.textContent = 'EasyElec';
+            user.textContent = 'Ghali Bennis';
+            av.textContent = 'GB';
+            busy = false;
+          }, 480);
+        }, 160);
+      });
+    });
+  }
+  // AFTER: instant soft navigation
+  var after = document.getElementById('board-after');
+  if(after){
+    var t2 = after.querySelector('.js-title2');
+    var s2 = after.querySelector('.js-sub2');
+    after.querySelectorAll('.nav2').forEach(function(it){
+      it.addEventListener('click', function(){
+        after.querySelectorAll('.nav2').forEach(function(n){ n.classList.remove('on') });
+        it.classList.add('on');
+        t2.textContent = it.dataset.l;
+        s2.textContent = it.dataset.s || '';
+      });
+    });
+  }
+  // AFTER: directional scroll fades — visible only when content continues
+  var nav = document.getElementById('nav-scroll');
+  if(nav){
+    var fu = document.getElementById('fade-up');
+    var fd = document.getElementById('fade-down');
+    var syncFade = function(){
+      fu.classList.toggle('show', nav.scrollTop > 4);
+      fd.classList.toggle('show', nav.scrollTop + nav.clientHeight < nav.scrollHeight - 4);
+    };
+    nav.addEventListener('scroll', syncFade);
+    window.addEventListener('resize', syncFade);
+    syncFade();
+  }
+})();
+</script>
+</body></html>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@rovela-ai/sdk",
-  "version": "0.19.3",
+  "version": "0.19.5",
   "description": "Rovela SDK - Pre-built e-commerce components for AI-powered store generation",
   "type": "module",
   "license": "MIT",
@@ -23,6 +23,8 @@
   },
   "files": [
     "dist",
+    "docs",
+    "templates/store-template",
     "README.md"
   ],
   "main": "./dist/index.js",