docs(design): drop the tab bar recipe now that Miakapp draws the bar

packages/cli/assets/design/components.css

@@ -128,12 +128,4 @@
 }
 .mk-stale-banner::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--mk-warn); }
 
-/* Bottom navigation */
-.mk-tabbar {
-  display: flex; justify-content: space-around; padding: 8px;
-  border-radius: var(--mk-pill);
-}
-.mk-tabbar a { padding: 8px 14px; border-radius: var(--mk-pill); color: var(--mk-ink-2); text-decoration: none; font-size: var(--mk-text-xs); font-weight: 700; display: grid; justify-items: center; gap: 2px; }
-.mk-tabbar a[aria-current] { background: var(--mk-selected); color: var(--mk-ink); }
-
 :focus-visible { outline: 3px solid var(--mk-accent); outline-offset: 2px; }

packages/cli/assets/design/gallery.html

@@ -331,14 +331,6 @@
 }
 .mk-stale-banner::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--mk-warn); }
 
-/* Bottom navigation */
-.mk-tabbar {
-  display: flex; justify-content: space-around; padding: 8px;
-  border-radius: var(--mk-pill);
-}
-.mk-tabbar a { padding: 8px 14px; border-radius: var(--mk-pill); color: var(--mk-ink-2); text-decoration: none; font-size: var(--mk-text-xs); font-weight: 700; display: grid; justify-items: center; gap: 2px; }
-.mk-tabbar a[aria-current] { background: var(--mk-selected); color: var(--mk-ink); }
-
 :focus-visible { outline: 3px solid var(--mk-accent); outline-offset: 2px; }
 
 
@@ -418,6 +410,14 @@
 .rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
 .rules .mk-glass { padding: 16px 18px; font-size: 14px; line-height: 1.45; color: var(--mk-ink-2); }
 .rules b { color: var(--mk-ink); display: block; margin-bottom: 4px; font-size: 15px; }
+
+/* Mock of the Miakapp bar (drawn by Miakapp, not by the app) */
+.mk-tabbar {
+  display: flex; justify-content: space-around; padding: 8px;
+  border-radius: var(--mk-pill);
+}
+.mk-tabbar a { padding: 8px 14px; border-radius: var(--mk-pill); color: var(--mk-ink-2); text-decoration: none; font-size: var(--mk-text-xs); font-weight: 700; display: grid; justify-items: center; gap: 2px; }
+.mk-tabbar a[aria-current] { background: var(--mk-selected); color: var(--mk-ink); }
 .miakapp-bar { align-items: center; gap: 2px; }
 .miakapp-bar .agent-slot { display: flex; gap: 2px; padding: 0 4px; border-left: 1px dashed var(--mk-hairline); border-right: 1px dashed var(--mk-hairline); }
 .miakapp-bar .avatar { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; background: var(--mk-on); color: var(--mk-on-ink); }
@@ -610,7 +610,7 @@ <h2 class="sec">Example screens · tap the tiles</h2>
     </div>
   </div>
 
-  <p class="barnote"><b>The bottom bar is drawn by Miakapp, not by your app</b>: Home, and Me (the resident’s homes and sign-in methods). Do not draw your own global navigation. The buttons between the dashed lines are the home’s own, set with <code>home.bar.setButtons()</code>.</p>
+  <p class="barnote"><b>The bottom bar is drawn by Miakapp, not by your app</b>: Home, and Me (the resident’s homes and sign-in methods). Do not draw your own bottom navigation, and keep 96 px free at the bottom of your page. The buttons between the dashed lines are the home’s own, set with <code>home.bar.setButtons()</code> (two at most).</p>
 
   <h2 class="sec">Themes · click to try</h2>
   <div class="themes">

packages/cli/assets/design/guide.md

@@ -12,7 +12,7 @@ The files sit next to this guide, in the design directory printed at the end:
 | File | What it is |
 |---|---|
 | `tokens.css` | `--mk-*` variables (color, glass, radius, type, space, motion) for four themes |
-| `components.css` | Recipes on top of the tokens: glass, device tile, scene, switch, level slider, stale banner, tab bar |
+| `components.css` | Recipes on top of the tokens: glass, device tile, scene, switch, level slider, stale banner |
 | `fonts.css` | Manrope as a `data:` URL, ready for the frame, which has no network (OFL, see `OFL-Manrope.txt`) |
 | `gallery.html` | Example screens built only with the files above: home, room, energy, wall tablet. Open it in a browser, switch themes, read its source |
 

packages/cli/design/gallery.template.html

@@ -85,6 +85,14 @@
 .rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
 .rules .mk-glass { padding: 16px 18px; font-size: 14px; line-height: 1.45; color: var(--mk-ink-2); }
 .rules b { color: var(--mk-ink); display: block; margin-bottom: 4px; font-size: 15px; }
+
+/* Mock of the Miakapp bar (drawn by Miakapp, not by the app) */
+.mk-tabbar {
+  display: flex; justify-content: space-around; padding: 8px;
+  border-radius: var(--mk-pill);
+}
+.mk-tabbar a { padding: 8px 14px; border-radius: var(--mk-pill); color: var(--mk-ink-2); text-decoration: none; font-size: var(--mk-text-xs); font-weight: 700; display: grid; justify-items: center; gap: 2px; }
+.mk-tabbar a[aria-current] { background: var(--mk-selected); color: var(--mk-ink); }
 .miakapp-bar { align-items: center; gap: 2px; }
 .miakapp-bar .agent-slot { display: flex; gap: 2px; padding: 0 4px; border-left: 1px dashed var(--mk-hairline); border-right: 1px dashed var(--mk-hairline); }
 .miakapp-bar .avatar { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; background: var(--mk-on); color: var(--mk-on-ink); }
@@ -277,7 +285,7 @@ <h2 class="sec">Example screens · tap the tiles</h2>
     </div>
   </div>
 
-  <p class="barnote"><b>The bottom bar is drawn by Miakapp, not by your app</b>: Home, and Me (the resident’s homes and sign-in methods). Do not draw your own global navigation. The buttons between the dashed lines are the home’s own, set with <code>home.bar.setButtons()</code>.</p>
+  <p class="barnote"><b>The bottom bar is drawn by Miakapp, not by your app</b>: Home, and Me (the resident’s homes and sign-in methods). Do not draw your own bottom navigation, and keep 96 px free at the bottom of your page. The buttons between the dashed lines are the home’s own, set with <code>home.bar.setButtons()</code> (two at most).</p>
 
   <h2 class="sec">Themes · click to try</h2>
   <div class="themes">

packages/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@miakapp/cli",
-  "version": "4.0.0-alpha.14",
+  "version": "4.0.0-alpha.15",
   "description": "Agent-first Miakapp command line: check, build, publish, activate and roll back home interfaces",
   "type": "module",
   "engines": {

packages/cli/src/version.ts

@@ -12,4 +12,4 @@
  */
 export const PACKAGE_NAME = '@miakapp/cli';
 
-export const CLI_VERSION = '4.0.0-alpha.14';
+export const CLI_VERSION = '4.0.0-alpha.15';