@tokenoftrust/storefront-runner 1.4.1 → 1.4.2-rc.0

package/apps/storefront/src/pages/admin.astro

@@ -37,11 +37,13 @@ import OrdersWorkspace from "../components/admin/orders/OrdersWorkspace.astro";
 import AdminProductsTab from "../components/admin/AdminProductsTab.astro";
 import AdminSubscriptionsTab from "../components/admin/AdminSubscriptionsTab.astro";
 import AdminReportingTab from "../components/admin/AdminReportingTab.astro";
+import AdminBlogTab from "../components/admin/AdminBlogTab.astro";
 import AdminPublishTab from "../components/admin/AdminPublishTab.astro";
 import AdminSettingsTab from "../components/admin/AdminSettingsTab.astro";
 import { readViewerSession } from "@/lib/auth/route";
 import { resolveAdminTenantMode } from "@/lib/adminTenantEnvelope";
 import { resolveAdminEntry } from "@/lib/auth/adminEntry";
+import "@/styles/admin.css";
 
 const { tenant, basePath, cspNonce } = Astro.locals;
 const adminPath = `${basePath || ""}/admin`;
@@ -100,7 +102,7 @@ const { envelope: tenantEnvelope, isStaff, pickerTenants, deniedTarget } = admin
     <title>{tenantLabel} Admin</title>
     <script is:inline nonce={cspNonce}>
       (() => {
-        const adminTabs = ["orders", "products", "subscriptions", "customers", "fulfillment", "reporting", "ai-workflows", "publish", "settings"];
+        const adminTabs = ["orders", "products", "subscriptions", "customers", "fulfillment", "reporting", "ai-workflows", "blog", "publish", "settings"];
         const canViewInternalGuide = document.documentElement.dataset.internalAdminGuide === "true";
         const defaultTab = canViewInternalGuide ? "orders" : "settings";
         // A deep link may carry a query suffix in the hash (e.g. #publish?pr=42);
@@ -114,1078 +116,6 @@ const { envelope: tenantEnvelope, isStaff, pickerTenants, deniedTarget } = admin
         document.documentElement.dataset.adminMode = mode;
       })();
     </script>
-    <style is:global nonce={cspNonce}>
-      :root {
-        color-scheme: light;
-        --admin-bg: #f5f7f6;
-        --admin-surface: #ffffff;
-        --admin-surface-soft: #f9fbfa;
-        --admin-surface-tint: #eef6f4;
-        --admin-ink: #16211f;
-        --admin-muted: #64716d;
-        --admin-muted-2: #8c9894;
-        --admin-line: #dce5e2;
-        --admin-line-strong: #bdcbc7;
-        --admin-teal: #007f79;
-        --admin-teal-dark: #005d58;
-        --admin-teal-soft: #dff4f1;
-        --admin-green: #137a55;
-        --admin-green-soft: #e3f5eb;
-        --admin-blue: #2458c7;
-        --admin-blue-soft: #e7efff;
-        --admin-amber: #a45d00;
-        --admin-amber-soft: #fff0d5;
-        --admin-red: #b42318;
-        --admin-red-soft: #fde7e4;
-        --admin-violet: #6941c6;
-        --admin-violet-soft: #efe9ff;
-        --admin-shadow: 0 18px 50px rgba(23, 33, 31, 0.08);
-        --admin-radius: 8px;
-        --admin-radius-sm: 6px;
-        --admin-scroll-offset: 104px;
-        --admin-font:
-          Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
-          "Segoe UI", sans-serif;
-      }
-
-      * {
-        box-sizing: border-box;
-      }
-
-      html {
-        max-width: 100%;
-        height: 100%;
-        overflow: hidden;
-      }
-
-      body {
-        margin: 0;
-        height: 100%;
-        min-height: 100vh;
-        background: var(--admin-bg);
-        color: var(--admin-ink);
-        font: 14px/1.5 var(--admin-font);
-        overflow: hidden;
-      }
-
-      button,
-      input,
-      select {
-        font: inherit;
-      }
-
-      button {
-        cursor: pointer;
-      }
-
-      svg {
-        width: 18px;
-        height: 18px;
-        stroke: currentColor;
-        stroke-width: 1.9;
-        stroke-linecap: round;
-        stroke-linejoin: round;
-        fill: none;
-        flex: 0 0 auto;
-      }
-
-      .shell {
-        display: grid;
-        grid-template-columns: 248px minmax(0, 1fr);
-        height: 100vh;
-        min-height: 0;
-        overflow: hidden;
-      }
-
-      .sidebar {
-        position: sticky;
-        top: 0;
-        height: 100vh;
-        min-height: 0;
-        display: flex;
-        flex-direction: column;
-        gap: 22px;
-        padding: 20px 16px;
-        overflow-y: auto;
-        overscroll-behavior: contain;
-        background: #101b18;
-        color: #eef7f5;
-      }
-
-      .brand {
-        display: flex;
-        align-items: center;
-        gap: 12px;
-        min-height: 42px;
-      }
-
-      .brand-mark {
-        width: 36px;
-        height: 36px;
-        display: grid;
-        place-items: center;
-        border-radius: var(--admin-radius);
-        background: #00a991;
-        color: #06231e;
-        font-weight: 800;
-      }
-
-      .brand b,
-      .store strong {
-        display: block;
-        font-size: 14px;
-        line-height: 1.1;
-      }
-
-      .brand span,
-      .store span {
-        display: block;
-        margin-top: 3px;
-        color: rgba(238, 247, 245, 0.7);
-        font-size: 12px;
-      }
-
-      .store {
-        display: grid;
-        gap: 4px;
-        padding: 12px;
-        border: 1px solid rgba(255, 255, 255, 0.12);
-        border-radius: var(--admin-radius);
-        background: rgba(255, 255, 255, 0.06);
-      }
-
-      /* Cross-surface hop to the developer cockpit — same card language as the
-         sidebar's other blocks, kept visually quieter than the nav tabs. */
-      .cockpit-link {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        padding: 10px 12px;
-        border: 1px solid rgba(255, 255, 255, 0.12);
-        border-radius: var(--admin-radius);
-        background: rgba(255, 255, 255, 0.04);
-        color: rgba(238, 247, 245, 0.85);
-        font-size: 13px;
-        text-decoration: none;
-      }
-      .cockpit-link:hover {
-        background: rgba(255, 255, 255, 0.1);
-        color: #fff;
-      }
-      .cockpit-link svg {
-        width: 15px;
-        height: 15px;
-        stroke: currentColor;
-        fill: none;
-      }
-
-      /* Signed-in-as chip (identity visibility — Trello 13075 postscript: an
-         owner staring at a read-only Publish tab could not tell WHO the shell
-         thought they were). Mirrors .store's card language; the standing line
-         states the resolved principal FOR THIS STORE, not a global role. */
-      .account {
-        display: grid;
-        grid-template-columns: auto 1fr;
-        gap: 10px;
-        align-items: center;
-        padding: 12px;
-        border: 1px solid rgba(255, 255, 255, 0.12);
-        border-radius: var(--admin-radius);
-        background: rgba(255, 255, 255, 0.06);
-        /* Pinned to the sidebar's lower-left (the conventional account slot) —
-           the sidebar is a flex column, so this soaks the remaining space. */
-        margin-top: auto;
-      }
-      .account .account-avatar {
-        display: grid;
-        place-items: center;
-        width: 32px;
-        height: 32px;
-        border-radius: 50%;
-        border: 1px solid rgba(255, 255, 255, 0.2);
-        background: rgba(255, 255, 255, 0.08);
-      }
-      .account .account-avatar svg {
-        width: 16px;
-        height: 16px;
-        stroke: currentColor;
-        fill: none;
-        stroke-width: 1.8;
-      }
-      .account .account-meta {
-        display: grid;
-        gap: 2px;
-        min-width: 0;
-      }
-      .account .account-email {
-        font-weight: 640;
-        font-size: 13px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-      .account .account-standing {
-        color: rgba(238, 247, 245, 0.7);
-        font-size: 11px;
-      }
-      .account .account-standing[data-standing="none"] {
-        color: rgba(255, 196, 120, 0.9);
-      }
-      .account a {
-        color: inherit;
-      }
-      .account .account-signout button {
-        margin-top: 2px;
-        padding: 0;
-        border: 0;
-        background: none;
-        color: rgba(238, 247, 245, 0.6);
-        font-size: 11px;
-        text-decoration: underline;
-        cursor: pointer;
-      }
-      .account .account-signout button:hover {
-        color: rgba(238, 247, 245, 0.9);
-      }
-
-      .tenant-picker {
-        display: grid;
-        gap: 4px;
-        padding: 10px 12px;
-        border: 1px solid rgba(0, 169, 145, 0.4);
-        border-radius: var(--admin-radius);
-        background: rgba(0, 169, 145, 0.1);
-      }
-
-      .tenant-picker label {
-        color: rgba(238, 247, 245, 0.7);
-        font-size: 11px;
-        font-weight: 760;
-        text-transform: uppercase;
-      }
-
-      .tenant-picker select {
-        min-height: 34px;
-        border: 1px solid rgba(255, 255, 255, 0.2);
-        border-radius: var(--admin-radius-sm);
-        background: #101b18;
-        color: #eef7f5;
-      }
-
-      .tenant-picker-denied {
-        padding: 10px 12px;
-        border: 1px solid var(--admin-amber);
-        border-radius: var(--admin-radius);
-        background: rgba(164, 93, 0, 0.16);
-        color: #eef7f5;
-        font-size: 12px;
-      }
-
-      .tenant-picker-denied code {
-        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-      }
-
-      .nav {
-        display: grid;
-        gap: 4px;
-      }
-
-      .nav a {
-        display: flex;
-        align-items: center;
-        gap: 10px;
-        min-height: 40px;
-        padding: 0 10px;
-        border-radius: var(--admin-radius-sm);
-        color: rgba(238, 247, 245, 0.74);
-        text-decoration: none;
-      }
-
-      .nav a.active {
-        background: rgba(0, 169, 145, 0.18);
-        color: #ffffff;
-      }
-
-      .nav-group {
-        display: grid;
-        gap: 3px;
-      }
-
-      .nav-subnav {
-        display: grid;
-        gap: 2px;
-        margin: 0 0 3px 28px;
-        padding-left: 10px;
-        border-left: 1px solid rgba(255, 255, 255, 0.14);
-      }
-
-      .nav-subnav a {
-        min-height: 32px;
-        padding: 0 8px;
-        gap: 8px;
-        font-size: 12px;
-      }
-
-      .nav-subnav svg {
-        width: 16px;
-        height: 16px;
-      }
-
-      .health {
-        margin-top: auto;
-        display: grid;
-        gap: 9px;
-        padding: 12px;
-        border: 1px solid rgba(255, 255, 255, 0.12);
-        border-radius: var(--admin-radius);
-        background: rgba(255, 255, 255, 0.05);
-      }
-
-      .health-row {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: 10px;
-        font-size: 12px;
-        color: rgba(238, 247, 245, 0.72);
-      }
-
-      .health-row strong {
-        color: #ffffff;
-      }
-
-      .main {
-        min-width: 0;
-        min-height: 0;
-        height: 100vh;
-        overflow-x: hidden;
-        overflow-y: auto;
-        overscroll-behavior: contain;
-      }
-
-      .content,
-      .band,
-      .panel,
-      .panel-body,
-      .table-wrap {
-        min-width: 0;
-        max-width: 100%;
-      }
-
-      .topbar {
-        position: sticky;
-        top: 0;
-        z-index: 30;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: 18px;
-        min-height: 68px;
-        padding: 14px 24px;
-        border-bottom: 1px solid var(--admin-line);
-        background: rgba(245, 247, 246, 0.94);
-        backdrop-filter: blur(16px);
-      }
-
-      .page-title h1 {
-        margin: 0;
-        font-size: 22px;
-        font-weight: 760;
-      }
-
-      .page-title p {
-        margin: 2px 0 0;
-        color: var(--admin-muted);
-        font-size: 13px;
-      }
-
-      .page-title,
-      .page-title p,
-      .note,
-      code {
-        min-width: 0;
-        overflow-wrap: anywhere;
-      }
-
-      .actions {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 8px;
-      }
-
-      .btn,
-      .icon-btn {
-        min-height: 38px;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        gap: 8px;
-        border: 1px solid var(--admin-line-strong);
-        border-radius: var(--admin-radius-sm);
-        background: var(--admin-surface);
-        color: var(--admin-ink);
-        text-decoration: none;
-        white-space: nowrap;
-      }
-
-      .btn {
-        padding: 0 13px;
-        font-weight: 680;
-        max-width: 100%;
-      }
-
-      .icon-btn {
-        width: 38px;
-        padding: 0;
-      }
-
-      .btn.primary {
-        border-color: var(--admin-teal-dark);
-        background: var(--admin-teal);
-        color: #ffffff;
-      }
-
-      .floating-ask {
-        position: fixed;
-        right: 24px;
-        bottom: 24px;
-        z-index: 80;
-        min-height: 58px;
-        max-width: min(280px, calc(100vw - 32px));
-        display: inline-flex;
-        align-items: center;
-        gap: 10px;
-        padding: 9px 15px 9px 10px;
-        border: 1px solid rgba(0, 93, 88, 0.24);
-        border-radius: 999px;
-        background: var(--admin-teal);
-        color: #ffffff;
-        box-shadow: 0 16px 38px rgba(22, 33, 31, 0.22);
-      }
-
-      .floating-ask-icon {
-        width: 40px;
-        height: 40px;
-        display: grid;
-        place-items: center;
-        border-radius: 50%;
-        background: rgba(255, 255, 255, 0.16);
-      }
-
-      .floating-ask-label {
-        display: grid;
-        gap: 1px;
-        min-width: 0;
-        text-align: left;
-      }
-
-      .floating-ask-label strong {
-        font-size: 14px;
-        line-height: 1.1;
-      }
-
-      .floating-ask-label small {
-        max-width: 160px;
-        overflow: hidden;
-        color: rgba(255, 255, 255, 0.78);
-        font-size: 11px;
-        font-weight: 680;
-        line-height: 1.2;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-
-      .content {
-        display: grid;
-        grid-template-columns: minmax(0, 1fr);
-        gap: 18px;
-        padding: 20px 24px 40px;
-      }
-
-      .band {
-        display: grid;
-        grid-template-columns: minmax(0, 1fr);
-        gap: 14px;
-      }
-
-      [data-admin-panel],
-      [data-admin-guide-section] {
-        scroll-margin-top: var(--admin-scroll-offset);
-      }
-
-      html.admin-tabs-ready [data-admin-panel] {
-        display: none;
-      }
-
-      html.admin-tabs-ready[data-admin-mode="work-area"][data-admin-tab="orders"] #orders,
-      html.admin-tabs-ready[data-admin-mode="work-area"][data-admin-tab="products"] #products,
-      html.admin-tabs-ready[data-admin-mode="work-area"][data-admin-tab="subscriptions"] #subscriptions,
-      html.admin-tabs-ready[data-admin-mode="work-area"][data-admin-tab="customers"] #customers,
-      html.admin-tabs-ready[data-admin-mode="work-area"][data-admin-tab="fulfillment"] #fulfillment,
-      html.admin-tabs-ready[data-admin-mode="work-area"][data-admin-tab="reporting"] #reporting,
-      html.admin-tabs-ready[data-admin-mode="work-area"][data-admin-tab="ai-workflows"] #ai-workflows,
-      html.admin-tabs-ready[data-admin-mode="work-area"][data-admin-tab="publish"] #publish,
-      html.admin-tabs-ready[data-admin-mode="work-area"][data-admin-tab="settings"] #settings {
-        display: grid;
-      }
-
-      html.admin-tabs-ready[data-admin-mode="work-area"] [data-admin-guide-section],
-      html.admin-tabs-ready[data-admin-mode="work-area"] [data-admin-tab-help] {
-        display: none;
-      }
-
-      html[data-internal-admin-guide="false"] [data-admin-internal-only] {
-        display: none !important;
-      }
-
-      .section-title {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: 12px;
-      }
-
-      .section-title h2 {
-        margin: 0;
-        font-size: 16px;
-      }
-
-      .section-title p {
-        margin: 4px 0 0;
-        color: var(--admin-muted);
-        font-size: 13px;
-      }
-
-      .grid {
-        display: grid;
-        grid-template-columns: minmax(0, 1fr);
-        gap: 12px;
-      }
-
-      .grid.cols-2 {
-        grid-template-columns: repeat(2, minmax(0, 1fr));
-      }
-
-      .grid.cols-3 {
-        grid-template-columns: repeat(3, minmax(0, 1fr));
-      }
-
-      .grid.cols-4 {
-        grid-template-columns: repeat(4, minmax(0, 1fr));
-      }
-
-      .panel {
-        border: 1px solid var(--admin-line);
-        border-radius: var(--admin-radius);
-        background: var(--admin-surface);
-      }
-
-      .panel-head {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: 12px;
-        min-height: 50px;
-        padding: 13px 14px;
-        border-bottom: 1px solid var(--admin-line);
-      }
-
-      .panel-head h3 {
-        margin: 0;
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        font-size: 15px;
-      }
-
-      .panel-body {
-        display: grid;
-        grid-template-columns: minmax(0, 1fr);
-        gap: 12px;
-        padding: 14px;
-      }
-
-      .metric {
-        min-height: 84px;
-        padding: 14px;
-        border: 1px solid var(--admin-line);
-        border-radius: var(--admin-radius);
-        background: var(--admin-surface);
-      }
-
-      .metric span,
-      .field label {
-        display: block;
-        color: var(--admin-muted);
-        font-size: 11px;
-        font-weight: 760;
-        text-transform: uppercase;
-      }
-
-      .metric strong {
-        display: block;
-        margin-top: 9px;
-        font-size: 24px;
-      }
-
-      .metric small {
-        display: block;
-        margin-top: 3px;
-        color: var(--admin-muted);
-        font-size: 12px;
-      }
-
-      .chip {
-        display: inline-flex;
-        align-items: center;
-        gap: 5px;
-        min-height: 23px;
-        padding: 0 8px;
-        border-radius: 999px;
-        background: var(--admin-surface-tint);
-        color: #3f4d49;
-        font-size: 12px;
-        font-weight: 740;
-        white-space: nowrap;
-      }
-
-      .chip.green {
-        background: var(--admin-green-soft);
-        color: var(--admin-green);
-      }
-
-      .chip.teal {
-        background: var(--admin-teal-soft);
-        /* Slightly darker than --admin-teal (#007f79): the shared token only
-           reaches ~4.26:1 against --admin-teal-soft, just under WCAG AA's
-           4.5:1 for this chip's 12px text (hardening-qa a11y pass). Scoped to
-           this rule only — --admin-teal itself stays unchanged since it is
-           also used as a background (e.g. .btn.primary) where the pairing
-           and contrast requirement are different. */
-        color: #007973;
-      }
-
-      .chip.blue {
-        background: var(--admin-blue-soft);
-        color: var(--admin-blue);
-      }
-
-      .chip.amber {
-        background: var(--admin-amber-soft);
-        color: var(--admin-amber);
-      }
-
-      .chip.red {
-        background: var(--admin-red-soft);
-        color: var(--admin-red);
-      }
-
-      .chip.violet {
-        background: var(--admin-violet-soft);
-        color: var(--admin-violet);
-      }
-
-      .swatches {
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
-        gap: 10px;
-      }
-
-      .swatch {
-        overflow: hidden;
-        border: 1px solid var(--admin-line);
-        border-radius: var(--admin-radius-sm);
-        background: var(--admin-surface);
-      }
-
-      .swatch-color {
-        min-height: 58px;
-      }
-
-      .swatch-meta {
-        padding: 10px;
-      }
-
-      .swatch-meta b {
-        display: block;
-        font-size: 13px;
-      }
-
-      .swatch-meta code,
-      .note code {
-        color: var(--admin-muted);
-        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-        font-size: 12px;
-      }
-
-      .field {
-        min-width: 0;
-        padding: 11px;
-        border: 1px solid var(--admin-line);
-        border-radius: var(--admin-radius-sm);
-        background: #fcfdfc;
-      }
-
-      .field strong {
-        display: block;
-        margin-top: 6px;
-        font-size: 13px;
-      }
-
-      .field p {
-        margin: 5px 0 0;
-        color: var(--admin-muted);
-        font-size: 12px;
-      }
-
-      .ship-gate {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: 14px;
-        padding: 14px;
-        border: 1px solid #a6d8c0;
-        border-radius: var(--admin-radius);
-        background: #eefaf3;
-      }
-
-      .ship-gate.amber {
-        border-color: #f1c883;
-        background: #fff6e7;
-      }
-
-      .ship-gate-main,
-      .risk-alert-main {
-        display: flex;
-        align-items: center;
-        gap: 12px;
-        min-width: 0;
-      }
-
-      .seal {
-        width: 42px;
-        height: 42px;
-        display: grid;
-        place-items: center;
-        border-radius: 50%;
-        background: var(--admin-green);
-        color: #ffffff;
-      }
-
-      .ship-gate.amber .seal {
-        background: var(--admin-amber);
-      }
-
-      .ship-gate b,
-      .risk-alert b {
-        display: block;
-        font-size: 15px;
-      }
-
-      .ship-gate span,
-      .risk-alert span {
-        display: block;
-        margin-top: 3px;
-        color: var(--admin-muted);
-        font-size: 12px;
-      }
-
-      .risk-alert {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: 14px;
-        padding: 12px 14px;
-        border: 1px solid #f1c883;
-        border-radius: var(--admin-radius);
-        background: #fff6e7;
-      }
-
-      /* A JS-toggled `.risk-alert` (e.g. the degraded-forge strip) must stay hidden
-         when `hidden` is set — the base display:flex above would otherwise win over
-         the UA [hidden] rule and keep it visible. */
-      .risk-alert[hidden] {
-        display: none;
-      }
-
-      .risk-alert svg {
-        color: var(--admin-amber);
-      }
-
-      .order-assist-grid {
-        display: grid;
-        grid-template-columns: repeat(3, minmax(0, 1fr));
-        gap: 10px;
-      }
-
-      .order-assist-card {
-        display: grid;
-        gap: 7px;
-        min-width: 0;
-        padding: 12px;
-        border: 1px solid var(--admin-line);
-        border-radius: var(--admin-radius-sm);
-        background: var(--admin-surface);
-      }
-
-      .order-assist-card strong {
-        font-size: 14px;
-      }
-
-      .order-assist-card p {
-        margin: 0;
-        color: var(--admin-muted);
-        font-size: 12px;
-      }
-
-      .tabs {
-        display: flex;
-        gap: 6px;
-        max-width: 100%;
-        overflow-x: auto;
-        border-bottom: 1px solid var(--admin-line);
-      }
-
-      .mobile-tabbar {
-        display: none;
-      }
-
-      .tab {
-        flex: 0 0 auto;
-        min-height: 38px;
-        display: inline-flex;
-        align-items: center;
-        padding: 0 12px;
-        border: 0;
-        border-bottom: 2px solid transparent;
-        background: transparent;
-        color: var(--admin-muted);
-        font-weight: 760;
-        text-decoration: none;
-      }
-
-      .tab.active {
-        border-color: var(--admin-teal);
-        color: var(--admin-ink);
-      }
-
-      .table-wrap {
-        overflow-x: auto;
-        border: 1px solid var(--admin-line);
-        border-radius: var(--admin-radius);
-        background: var(--admin-surface);
-      }
-
-      table {
-        width: 100%;
-        min-width: 860px;
-        border-collapse: collapse;
-        font-size: 13px;
-      }
-
-      th {
-        height: 38px;
-        padding: 0 12px;
-        border-bottom: 1px solid var(--admin-line);
-        background: var(--admin-surface-soft);
-        color: var(--admin-muted);
-        font-size: 11px;
-        font-weight: 760;
-        text-align: left;
-        text-transform: uppercase;
-        white-space: nowrap;
-      }
-
-      td {
-        height: 46px;
-        padding: 7px 12px;
-        border-bottom: 1px solid var(--admin-line);
-        vertical-align: middle;
-      }
-
-      tr:last-child td {
-        border-bottom: 0;
-      }
-
-      .subtle {
-        display: block;
-        margin-top: 2px;
-        color: var(--admin-muted);
-        font-size: 12px;
-      }
-
-      .money,
-      .action {
-        text-align: right;
-      }
-
-      .check-row {
-        display: grid;
-        grid-template-columns: minmax(120px, 0.36fr) minmax(0, 1fr) auto;
-        gap: 10px;
-        align-items: center;
-        padding: 10px 0;
-        border-bottom: 1px solid var(--admin-line);
-      }
-
-      .check-row:last-child {
-        border-bottom: 0;
-      }
-
-      .check-row.blocking {
-        margin: 0 -8px;
-        padding: 10px 8px;
-        border: 1px solid #f1c883;
-        border-radius: var(--admin-radius-sm);
-        background: #fff8ec;
-      }
-
-      .check-row b {
-        font-size: 13px;
-      }
-
-      .check-row p {
-        margin: 2px 0 0;
-        color: var(--admin-muted);
-        font-size: 12px;
-      }
-
-      .type-sample h3 {
-        margin: 0 0 8px;
-        font-size: 25px;
-        line-height: 1.12;
-      }
-
-      .type-sample p {
-        margin: 0;
-        color: var(--admin-muted);
-      }
-
-      .note {
-        margin: 0;
-        color: var(--admin-muted);
-        font-size: 13px;
-      }
-
-      @media (max-width: 1120px) {
-        .shell {
-          grid-template-columns: 76px minmax(0, 1fr);
-        }
-
-        .brand b,
-        .brand span,
-        .store,
-        .nav span,
-        .nav-subnav,
-        .health {
-          display: none;
-        }
-
-        .sidebar {
-          align-items: center;
-          padding-inline: 12px;
-        }
-
-        .nav a {
-          justify-content: center;
-          padding: 0;
-        }
-
-        .grid.cols-4,
-        .grid.cols-3,
-        .order-assist-grid {
-          grid-template-columns: repeat(2, minmax(0, 1fr));
-        }
-      }
-
-      @media (max-width: 760px) {
-        html,
-        body {
-          height: auto;
-          min-height: 100%;
-          overflow-x: hidden;
-          overflow-y: auto;
-        }
-
-        .shell {
-          grid-template-columns: 1fr;
-          height: auto;
-          min-height: 100vh;
-          overflow: visible;
-        }
-
-        .main {
-          height: auto;
-          min-height: 0;
-          overflow: visible;
-        }
-
-        .sidebar {
-          position: static;
-          height: auto;
-          overflow: visible;
-          flex-direction: row;
-          align-items: center;
-        }
-
-        .nav {
-          display: none;
-        }
-
-        .mobile-tabbar {
-          position: sticky;
-          top: 0;
-          z-index: 29;
-          display: flex;
-          padding-inline: 16px;
-          background: rgba(245, 247, 246, 0.94);
-          backdrop-filter: blur(16px);
-        }
-
-        .topbar,
-        .ship-gate,
-        .risk-alert,
-        .section-title,
-        .panel-head {
-          align-items: flex-start;
-          flex-direction: column;
-        }
-
-        .content,
-        .topbar {
-          padding-inline: 16px;
-        }
-
-        .floating-ask {
-          right: 16px;
-          bottom: 16px;
-        }
-
-        [data-admin-panel],
-        [data-admin-guide-section] {
-          scroll-margin-top: 16px;
-        }
-
-        .actions {
-          width: 100%;
-        }
-
-        .actions .btn {
-          flex: 1 1 150px;
-        }
-
-        .grid.cols-4,
-        .grid.cols-3,
-        .grid.cols-2,
-        .order-assist-grid {
-          grid-template-columns: 1fr;
-        }
-
-        .check-row {
-          grid-template-columns: 1fr;
-        }
-      }
-    </style>
   </head>
   <body>
     <svg aria-hidden="true" style="position:absolute;width:0;height:0;overflow:hidden">
@@ -1258,6 +188,7 @@ const { envelope: tenantEnvelope, isStaff, pickerTenants, deniedTarget } = admin
           <a href="#fulfillment" data-admin-tab-link><svg><use href="#i-truck"></use></svg><span>Fulfillment</span></a>
           <a href="#reporting" data-admin-tab-link><svg><use href="#i-chart"></use></svg><span>Reporting</span></a>
           <a href="#ai-workflows" data-admin-tab-link><svg><use href="#i-workflows"></use></svg><span>AI Workflows</span></a>
+          <a href="#blog" data-admin-tab-link><svg><use href="#i-file"></use></svg><span>Blog</span></a>
           <a href="#publish" data-admin-tab-link><svg><use href="#i-export"></use></svg><span>Publish</span></a>
           <a href="#settings" data-admin-tab-link><svg><use href="#i-gear"></use></svg><span>Settings</span></a>
         </nav>
@@ -1323,6 +254,7 @@ const { envelope: tenantEnvelope, isStaff, pickerTenants, deniedTarget } = admin
           <a class="tab" href="#fulfillment" role="tab" aria-controls="fulfillment" aria-selected="false" data-admin-tab-link>Fulfillment</a>
           <a class="tab" href="#reporting" role="tab" aria-controls="reporting" aria-selected="false" data-admin-tab-link>Reporting</a>
           <a class="tab" href="#ai-workflows" role="tab" aria-controls="ai-workflows" aria-selected="false" data-admin-tab-link>AI Workflows</a>
+          <a class="tab" href="#blog" role="tab" aria-controls="blog" aria-selected="false" data-admin-tab-link>Blog</a>
           <a class="tab" href="#publish" role="tab" aria-controls="publish" aria-selected="false" data-admin-tab-link>Publish</a>
           <a class="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false" data-admin-tab-link>Settings</a>
         </div>
@@ -1371,6 +303,7 @@ const { envelope: tenantEnvelope, isStaff, pickerTenants, deniedTarget } = admin
                   <a id="admin-tab-fulfillment" class="tab" href="#fulfillment" role="tab" aria-controls="fulfillment" aria-selected="false" data-admin-tab-link>Fulfillment</a>
                   <a id="admin-tab-reporting" class="tab" href="#reporting" role="tab" aria-controls="reporting" aria-selected="false" data-admin-tab-link>Reporting</a>
                   <a id="admin-tab-ai-workflows" class="tab" href="#ai-workflows" role="tab" aria-controls="ai-workflows" aria-selected="false" data-admin-tab-link>AI Workflows</a>
+                  <a id="admin-tab-blog" class="tab" href="#blog" role="tab" aria-controls="blog" aria-selected="false" data-admin-tab-link>Blog</a>
                   <a id="admin-tab-publish" class="tab" href="#publish" role="tab" aria-controls="publish" aria-selected="false" data-admin-tab-link>Publish</a>
                   <a id="admin-tab-settings" class="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false" data-admin-tab-link>Settings</a>
                 </div>
@@ -1497,6 +430,7 @@ const { envelope: tenantEnvelope, isStaff, pickerTenants, deniedTarget } = admin
           <AdminFulfillmentTab envelope={tenantEnvelope} />
           <AdminReportingTab envelope={tenantEnvelope} />
           <AdminAIWorkflowsTab envelope={tenantEnvelope} />
+          <AdminBlogTab envelope={tenantEnvelope} />
           <AdminPublishTab envelope={tenantEnvelope} />
           <AdminSettingsTab envelope={tenantEnvelope} />
 
@@ -1612,245 +546,9 @@ const { envelope: tenantEnvelope, isStaff, pickerTenants, deniedTarget } = admin
       </span>
     </button>
 
-    <script is:inline nonce={cspNonce}>
-      (() => {
-        const tabIds = ["orders", "products", "subscriptions", "customers", "fulfillment", "reporting", "ai-workflows", "publish", "settings"];
-        const tabSet = new Set(tabIds);
-        const tabHashPattern = new RegExp(`^#(${tabIds.join("|")})$`);
-        const canViewInternalGuide = document.documentElement.dataset.internalAdminGuide === "true";
-        const defaultTab = canViewInternalGuide ? "orders" : "settings";
-        const askContexts = {
-          orders: "Orders",
-          products: "Products",
-          subscriptions: "Subscriptions",
-          customers: "Customers",
-          fulfillment: "Fulfillment",
-          reporting: "Reporting",
-          "ai-workflows": "AI Workflows",
-          publish: "Publish",
-          settings: "Settings",
-        };
-
-        const panelIdFromHash = () => {
-          const rawHash = window.location.hash.slice(1);
-          // The tab id is the part before any "?" query suffix (#publish?pr=42);
-          // the raw hash is still used for internal-guide anchor resolution.
-          const hash = rawHash.split("?")[0];
-          if (!rawHash) return defaultTab;
-          if (tabSet.has(hash)) return hash;
-          if (!canViewInternalGuide) return defaultTab;
-
-          const target = rawHash ? document.getElementById(rawHash) : null;
-          const panel = target?.closest?.("[data-admin-panel]");
-          if (panel?.id && tabSet.has(panel.id)) return panel.id;
-
-          return null;
-        };
-
-        const setActiveTab = (id) => {
-          if (!tabSet.has(id)) return;
-
-          document.documentElement.dataset.adminMode = "work-area";
-          document.documentElement.dataset.adminTab = id;
-          setAskContext(id);
-
-          document.querySelectorAll("[data-admin-panel]").forEach((panel) => {
-            const active = panel.id === id;
-            panel.hidden = !active;
-            panel.setAttribute("aria-hidden", active ? "false" : "true");
-          });
-
-          document.querySelectorAll("[data-admin-tab-link]").forEach((link) => {
-            const active = link.hash === `#${id}`;
-            link.classList.toggle("active", active);
-
-            if (link.getAttribute("role") === "tab") {
-              link.setAttribute("aria-selected", active ? "true" : "false");
-              link.tabIndex = active ? 0 : -1;
-            }
-          });
-        };
-
-        const setGuideMode = () => {
-          if (!canViewInternalGuide) {
-            setActiveTab(defaultTab);
-            return;
-          }
-
-          document.documentElement.dataset.adminMode = "guide";
-          setAskContext(defaultTab);
-
-          document.querySelectorAll("[data-admin-panel]").forEach((panel) => {
-            panel.hidden = true;
-            panel.setAttribute("aria-hidden", "true");
-          });
-
-          document.querySelectorAll("[data-admin-tab-link]").forEach((link) => {
-            link.classList.remove("active");
-
-            if (link.getAttribute("role") === "tab") {
-              link.setAttribute("aria-selected", "false");
-              link.tabIndex = 0;
-            }
-          });
-        };
-
-        // Ask context envelope (baseline §Horizontal AI Concepts / Ask,
-        // ai-evidence-substrate item a — mirrors lib/admin/ai/askEnvelope.ts's
-        // buildAskEnvelope; duplicated here in plain JS because is:inline
-        // scripts cannot import modules). No chat backend yet: this is
-        // dev-inspectable only (window.__toTAdminAsk + a CustomEvent), never
-        // sent over the network.
-        const buildAskEnvelopePlain = (id) => {
-          const root = document.documentElement.dataset;
-          const isStaff = root.adminIsStaff === "true";
-          const panel = document.getElementById(id);
-          const selectedRecordId = panel?.querySelector("[data-admin-selected-id]")?.dataset.adminSelectedId || null;
-
-          return {
-            tenant: {
-              adminAppTenant: root.adminAppTenant ?? "",
-              targetTenant: root.adminTargetTenant ?? "",
-              operator: root.adminOperator || null,
-            },
-            activeTab: id,
-            selectedRecordId,
-            role: isStaff ? "internal_staff" : "merchant_operator",
-            permissions: isStaff ? ["internal_admin", "cross_tenant_read"] : ["merchant_admin"],
-            filters: {},
-            evidenceContext: [],
-          };
-        };
-
-        const setAskContext = (id) => {
-          const label = askContexts[id] ?? "Storefront";
-          const askButton = document.querySelector("[data-admin-ask]");
-          const askContext = document.querySelector("[data-admin-ask-context]");
-
-          if (askContext) askContext.textContent = label;
-          if (askButton) {
-            askButton.setAttribute("aria-label", `Ask about ${label}`);
-            askButton.setAttribute("title", `Ask about ${label}`);
-            askButton.dataset.askScope = id;
-          }
-
-          window.__toTAdminAsk = buildAskEnvelopePlain(id);
-        };
-
-        const scrollWorkspaceToTop = () => {
-          const scroller = document.querySelector(".main");
-          const reset = () => {
-            if (scroller) {
-              scroller.scrollTo({ top: 0, left: 0 });
-              return;
-            }
-
-            window.scrollTo({ top: 0, left: 0 });
-          };
-
-          reset();
-          requestAnimationFrame(reset);
-          setTimeout(reset, 0);
-        };
-
-        const scrollToHashTarget = (panelId) => {
-          const hash = window.location.hash.slice(1);
-          const target = hash ? document.getElementById(hash) : null;
-
-          if (!target || tabSet.has(hash) || target.id === panelId) {
-            scrollWorkspaceToTop();
-            return;
-          }
-
-          target?.scrollIntoView({ block: "start" });
-        };
-
-        const activateFromHash = ({ scroll = false } = {}) => {
-          const panelId = panelIdFromHash();
-
-          if (panelId) {
-            setActiveTab(panelId);
-            // Strip any query suffix before deciding whether the hash names a
-            // real tab — a valid deep link like #publish?pr=42 must not be
-            // normalized away to #settings for merchant viewers.
-            const hashTab = window.location.hash.slice(1).split("?")[0];
-            if (!canViewInternalGuide && !tabSet.has(hashTab)) {
-              history.replaceState(null, "", "#settings");
-            }
-            if (scroll) requestAnimationFrame(() => scrollToHashTarget(panelId));
-            return;
-          }
-
-          setGuideMode();
-          if (scroll) {
-            const hash = window.location.hash.slice(1);
-            requestAnimationFrame(() => document.getElementById(hash)?.scrollIntoView({ block: "start" }));
-          }
-        };
-
-        document.querySelector("[data-admin-tenant-picker-select]")?.addEventListener("change", (event) => {
-          const params = new URLSearchParams(window.location.search);
-          params.set("asTenant", event.target.value);
-          window.location.assign(`${window.location.pathname}?${params}${window.location.hash}`);
-        });
-
-        // Emit the Ask envelope on open. No chat backend yet — dev-inspectable
-        // only via window.__toTAdminAsk (already kept current by setAskContext)
-        // and this "tot:admin-ask" CustomEvent.
-        document.querySelector("[data-admin-ask]")?.addEventListener("click", () => {
-          const activeTab = document.documentElement.dataset.adminTab ?? defaultTab;
-          const envelope = buildAskEnvelopePlain(activeTab);
-          window.__toTAdminAsk = envelope;
-          document.dispatchEvent(new CustomEvent("tot:admin-ask", { detail: envelope }));
-          if (window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1") {
-            console.debug("[admin:ask]", envelope);
-          }
-        });
-
-        document.addEventListener("click", (event) => {
-          const target = event.target instanceof Element ? event.target : event.target?.parentElement;
-          const link = target?.closest("a[href^='#']");
-          if (!link || !tabHashPattern.test(link.hash)) return;
-
-          event.preventDefault();
-          const id = link.hash.slice(1);
-          setActiveTab(id);
-          history.pushState(null, "", link.hash);
-          scrollWorkspaceToTop();
-        });
-
-        document.addEventListener("keydown", (event) => {
-          const target = event.target instanceof Element ? event.target : null;
-          const currentTab = target?.closest("[role='tab'][data-admin-tab-link]");
-          if (!currentTab) return;
-
-          // Filter to visible tabs only: the mobile tab bar and the internal
-          // Admin Tab Map can both be present in the DOM at once (one hidden
-          // via CSS depending on viewport/viewer), and this selector matches
-          // role="tab" elements in either — without this filter, arrow/home/
-          // end navigation could walk into a display:none tablist whose
-          // .focus() is a silent no-op.
-          const tabs = Array.from(document.querySelectorAll("[role='tab'][data-admin-tab-link]")).filter(
-            (el) => el.offsetParent !== null,
-          );
-          const currentIndex = tabs.indexOf(currentTab);
-          let nextIndex = currentIndex;
-
-          if (event.key === "ArrowRight") nextIndex = (currentIndex + 1) % tabs.length;
-          if (event.key === "ArrowLeft") nextIndex = (currentIndex - 1 + tabs.length) % tabs.length;
-          if (event.key === "Home") nextIndex = 0;
-          if (event.key === "End") nextIndex = tabs.length - 1;
-
-          if (nextIndex === currentIndex) return;
-
-          event.preventDefault();
-          tabs[nextIndex].focus();
-          tabs[nextIndex].click();
-        });
-
-        window.addEventListener("hashchange", () => activateFromHash({ scroll: true }));
-        activateFromHash({ scroll: Boolean(window.location.hash) });
-      })();
+    <script>
+      import { initAdminShell } from "@/lib/admin/adminShell";
+      initAdminShell();
     </script>
   </body>
 </html>