@withpotter/components 0.13.0-next.101

package/dist/mobile/mobile-redesign-mockups/plan-calendar-schedule-resou-5.js

@@ -0,0 +1,429 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  CalendarDays,
+  Clock,
+  Download,
+  Eye,
+  FileText,
+  Layers,
+  Link2,
+  MoreHorizontal,
+  Palette,
+  Users,
+  UtensilsCrossed,
+  Wand2
+} from "lucide-react";
+import { tokens } from "../mobile-redesign-theme";
+import { Caption, StatusBar } from "./pill-presets-tailwind-utilit";
+import { SettingsRow } from "./wizard-payments";
+import { HubHeader } from "./drill-chrome-sub-app-header-";
+function ResourceDetail() {
+  const todayBookings = [
+    { time: "11:00 AM", name: "Adaeze", size: 2, status: "seated" },
+    {
+      time: "1:30 PM",
+      name: "Lunch hold",
+      size: 4,
+      status: "reserved"
+    },
+    {
+      time: "7:00 PM",
+      name: "Okonkwo party",
+      size: 6,
+      status: "reserved"
+    },
+    { time: "9:30 PM", name: "Open", size: 0, status: "open" }
+  ];
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col", children: [
+    /* @__PURE__ */ jsx(StatusBar, {}),
+    /* @__PURE__ */ jsx(
+      HubHeader,
+      {
+        title: "Table 6",
+        trailing: /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "flex h-9 w-9 items-center justify-center rounded-full",
+            style: { background: tokens.elevated },
+            children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "size-4 text-white" })
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto px-4 pb-24", children: [
+      /* @__PURE__ */ jsxs(
+        "section",
+        {
+          className: "mt-3 rounded-2xl border p-4",
+          style: { borderColor: tokens.border, background: tokens.card },
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between", children: [
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("p", { className: "text-3xs", style: { color: tokens.textMuted }, children: "Now" }),
+                /* @__PURE__ */ jsx("p", { className: "mt-1 text-[22px] font-bold text-white", children: "Free" }),
+                /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    className: "mt-0.5 text-2xs",
+                    style: { color: tokens.textSecondary },
+                    children: "Next reserved 7:00 PM"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "flex h-14 w-14 items-center justify-center rounded-2xl",
+                  style: { background: tokens.elevated },
+                  children: /* @__PURE__ */ jsx(UtensilsCrossed, { className: "size-5 text-[#C9D0DD]" })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "mt-3 grid grid-cols-3 gap-2 border-t pt-3",
+                style: { borderColor: tokens.border },
+                children: [
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx("p", { className: "text-3xs", style: { color: tokens.textMuted }, children: "Seats" }),
+                    /* @__PURE__ */ jsx("p", { className: "mt-1 text-lg font-semibold tabular-nums text-white", children: "6" })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx("p", { className: "text-3xs", style: { color: tokens.textMuted }, children: "Section" }),
+                    /* @__PURE__ */ jsx("p", { className: "mt-1 text-lg font-semibold text-white", children: "Garden" })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx("p", { className: "text-3xs", style: { color: tokens.textMuted }, children: "Today" }),
+                    /* @__PURE__ */ jsx("p", { className: "mt-1 text-lg font-semibold tabular-nums text-white", children: "3 / 4" })
+                  ] })
+                ]
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(Caption, { children: /* @__PURE__ */ jsx("span", { className: "mt-5 inline-block", children: "Utilisation \xB7 last 14 days" }) }),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "mt-2 rounded-2xl border p-4",
+          style: { borderColor: tokens.border, background: tokens.card },
+          children: [
+            /* @__PURE__ */ jsx("div", { className: "flex items-end gap-1.5", style: { height: 56 }, children: [40, 55, 30, 70, 65, 85, 90, 50, 60, 45, 75, 80, 88, 72].map(
+              (h, i) => /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "flex-1 rounded-t-md",
+                  style: {
+                    height: `${h}%`,
+                    background: i === 13 ? tokens.accent : `rgba(17,109,255,${0.25 + h / 100 * 0.5})`
+                  }
+                },
+                i
+              )
+            ) }),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "mt-2 flex items-center justify-between text-3xs",
+                style: { color: tokens.textTertiary },
+                children: [
+                  /* @__PURE__ */ jsx("span", { children: "Apr 11" }),
+                  /* @__PURE__ */ jsx("span", { className: "tabular-nums", style: { color: tokens.text }, children: "72% avg" }),
+                  /* @__PURE__ */ jsx("span", { children: "Apr 24" })
+                ]
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(Caption, { children: /* @__PURE__ */ jsx("span", { className: "mt-5 inline-block", children: "Today" }) }),
+      /* @__PURE__ */ jsx("div", { className: "mt-2 space-y-2", children: todayBookings.map((b, i) => {
+        const tone = b.status === "seated" ? {
+          bg: "rgba(17,109,255,0.14)",
+          label: tokens.accent,
+          text: "Seated"
+        } : b.status === "reserved" ? {
+          bg: "rgba(244,183,64,0.12)",
+          label: tokens.warn,
+          text: "Reserved"
+        } : { bg: tokens.card, label: tokens.good, text: "Open" };
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "flex items-center gap-3 rounded-2xl border p-3",
+            style: { borderColor: tokens.border, background: tone.bg },
+            children: [
+              /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: "w-16 shrink-0 text-2xs font-semibold tabular-nums",
+                  style: { color: tokens.textSecondary },
+                  children: b.time
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsx("p", { className: "truncate text-xs font-medium text-white", children: b.name }),
+                b.size > 0 && /* @__PURE__ */ jsxs(
+                  "p",
+                  {
+                    className: "mt-0.5 text-3xs",
+                    style: { color: tokens.textTertiary },
+                    children: [
+                      b.size,
+                      " guests"
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "rounded-full px-2 py-0.5 text-3xs font-semibold uppercase tracking-wider",
+                  style: { background: tokens.elevated, color: tone.label },
+                  children: tone.text
+                }
+              )
+            ]
+          },
+          i
+        );
+      }) }),
+      /* @__PURE__ */ jsx(Caption, { children: /* @__PURE__ */ jsx("span", { className: "mt-5 inline-block", children: "Configuration" }) }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-2 space-y-2", children: [
+        /* @__PURE__ */ jsx(
+          SettingsRow,
+          {
+            icon: Clock,
+            label: "Booking hours",
+            hint: "11 AM \u2013 10 PM \xB7 daily"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          SettingsRow,
+          {
+            icon: CalendarDays,
+            label: "Block off time",
+            hint: "Mon mornings \xB7 cleaning"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          SettingsRow,
+          {
+            icon: Users,
+            label: "Combine with",
+            hint: "Table 7 \xB7 seats 12"
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+function AppearanceHub() {
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col", children: [
+    /* @__PURE__ */ jsx(StatusBar, {}),
+    /* @__PURE__ */ jsx(
+      HubHeader,
+      {
+        title: "Appearance",
+        trailing: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Preview",
+            className: "flex h-9 items-center gap-1.5 rounded-full px-3 text-2xs font-medium",
+            style: { background: tokens.elevated, color: tokens.textSecondary },
+            children: [
+              /* @__PURE__ */ jsx(Eye, { className: "size-[13px]" }),
+              "Preview"
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto px-4 pb-24", children: [
+      /* @__PURE__ */ jsxs(
+        "section",
+        {
+          className: "mt-3 overflow-hidden rounded-2xl border",
+          style: { borderColor: tokens.border, background: tokens.card },
+          children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "relative h-[148px] w-full",
+                style: {
+                  background: "linear-gradient(135deg, #2A2118 0%, #3F2F1F 45%, #1B1610 100%)"
+                },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: "absolute left-3 top-3 rounded-full px-2 py-0.5 text-3xs font-semibold",
+                      style: {
+                        background: "rgba(74,222,128,0.18)",
+                        color: tokens.good
+                      },
+                      children: "\u25CF Live"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("div", { className: "absolute bottom-3 left-3 right-3", children: [
+                    /* @__PURE__ */ jsx(
+                      "p",
+                      {
+                        className: "text-3xs",
+                        style: { color: "rgba(255,255,255,0.55)" },
+                        children: "Current theme"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("p", { className: "mt-0.5 font-serif text-title font-semibold tracking-tight text-white", children: "Lagos \xB7 Editorial" })
+                  ] })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-3", children: [
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                /* @__PURE__ */ jsx("p", { className: "text-2xs", style: { color: tokens.textTertiary }, children: "Version 2.4 \xB7 updated 3 days ago" }),
+                /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    className: "mt-0.5 text-3xs",
+                    style: { color: tokens.textMuted },
+                    children: "5 pages \xB7 1 unsaved draft"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "flex h-9 items-center gap-1.5 rounded-xl px-3 text-2xs font-semibold",
+                  style: { background: tokens.accent, color: tokens.accentFg },
+                  children: "Customize"
+                }
+              )
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs("section", { className: "mt-5 space-y-2", children: [
+        /* @__PURE__ */ jsx(Caption, { children: "Edit this theme" }),
+        /* @__PURE__ */ jsx(
+          SettingsRow,
+          {
+            icon: FileText,
+            label: "Pages",
+            hint: "5 pages \xB7 Home, Menu, About, Contact, Reservations"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          SettingsRow,
+          {
+            icon: Layers,
+            label: "Sections",
+            hint: "Reorder, hide, or replace sections on any page"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          SettingsRow,
+          {
+            icon: Link2,
+            label: "Navigation",
+            hint: "Header & footer menus \xB7 6 items"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          SettingsRow,
+          {
+            icon: Palette,
+            label: "Branding",
+            hint: "Logo \xB7 4 colors \xB7 2 fonts"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("section", { className: "mt-5 space-y-2", children: [
+        /* @__PURE__ */ jsx(Caption, { children: "Switch theme" }),
+        /* @__PURE__ */ jsx(
+          SettingsRow,
+          {
+            icon: Wand2,
+            label: "Theme library",
+            hint: "12 themes built for restaurants"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          SettingsRow,
+          {
+            icon: Download,
+            label: "Saved drafts",
+            hint: "2 drafts \u2014 Bold (April 18) \xB7 Minimal (April 09)"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("section", { className: "mt-5 space-y-2", children: [
+        /* @__PURE__ */ jsx(Caption, { children: "Publish" }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "rounded-2xl border p-4",
+            style: {
+              borderColor: "rgba(244,183,64,0.32)",
+              background: "rgba(244,183,64,0.06)"
+            },
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "flex h-2 w-2 rounded-full",
+                    style: { background: tokens.warn }
+                  }
+                ),
+                /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold text-white", children: "3 unsaved changes" })
+              ] }),
+              /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: "mt-1 text-2xs",
+                  style: { color: tokens.textSecondary },
+                  children: "Hero image \xB7 Featured menu order \xB7 About body"
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "mt-3 flex gap-2", children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: "flex h-10 flex-1 items-center justify-center rounded-xl border text-xs font-medium text-white",
+                    style: {
+                      borderColor: tokens.border,
+                      background: tokens.elevated
+                    },
+                    children: "Discard"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: "flex h-10 flex-[1.4] items-center justify-center gap-1.5 rounded-xl text-xs font-semibold",
+                    style: { background: tokens.accent, color: tokens.accentFg },
+                    children: "Publish changes"
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+export {
+  AppearanceHub,
+  ResourceDetail
+};
+//# sourceMappingURL=plan-calendar-schedule-resou-5.js.map

package/dist/mobile/mobile-redesign-mockups/plan-calendar-schedule-resou-5.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/mobile/mobile-redesign-mockups/plan-calendar-schedule-resou-5.tsx"],"sourcesContent":["'use client';\n\nimport {\n  CalendarDays,\n  Clock,\n  Download,\n  Eye,\n  FileText,\n  Layers,\n  Link2,\n  MoreHorizontal,\n  Palette,\n  Users,\n  UtensilsCrossed,\n  Wand2,\n} from 'lucide-react';\nimport { tokens } from '../mobile-redesign-theme';\nimport { Caption, Hero, StatusBar } from './pill-presets-tailwind-utilit';\nimport { SettingsRow } from './wizard-payments';\nimport { HubHeader } from './drill-chrome-sub-app-header-';\n\n/**\n * Plan — calendar, schedule, resources\n *\n * One chapter of the mobile visual contract. ~40 screens cite this file as\n * the spec they implement, so the markup here is the artifact and is never\n * converted onto primitives — see CLAUDE.md. Splitting it moves nothing:\n * every screen is the same markup, in a file named for what it draws.\n */\n\nexport function ResourceDetail() {\n  const todayBookings = [\n    { time: '11:00 AM', name: 'Adaeze', size: 2, status: 'seated' as const },\n    {\n      time: '1:30 PM',\n      name: 'Lunch hold',\n      size: 4,\n      status: 'reserved' as const,\n    },\n    {\n      time: '7:00 PM',\n      name: 'Okonkwo party',\n      size: 6,\n      status: 'reserved' as const,\n    },\n    { time: '9:30 PM', name: 'Open', size: 0, status: 'open' as const },\n  ];\n  return (\n    <div className=\"flex h-full flex-col\">\n      <StatusBar />\n      <HubHeader\n        title=\"Table 6\"\n        trailing={\n          <button\n            type=\"button\"\n            className=\"flex h-9 w-9 items-center justify-center rounded-full\"\n            style={{ background: tokens.elevated }}\n          >\n            <MoreHorizontal className=\"size-4 text-white\" />\n          </button>\n        }\n      />\n      <div className=\"flex-1 overflow-y-auto px-4 pb-24\">\n        {/* Hero — capacity + status */}\n        <section\n          className=\"mt-3 rounded-2xl border p-4\"\n          style={{ borderColor: tokens.border, background: tokens.card }}\n        >\n          <div className=\"flex items-start justify-between\">\n            <div>\n              <p className=\"text-3xs\" style={{ color: tokens.textMuted }}>\n                Now\n              </p>\n              <p className=\"mt-1 text-[22px] font-bold text-white\">Free</p>\n              <p\n                className=\"mt-0.5 text-2xs\"\n                style={{ color: tokens.textSecondary }}\n              >\n                Next reserved 7:00 PM\n              </p>\n            </div>\n            <div\n              className=\"flex h-14 w-14 items-center justify-center rounded-2xl\"\n              style={{ background: tokens.elevated }}\n            >\n              <UtensilsCrossed className=\"size-5 text-[#C9D0DD]\" />\n            </div>\n          </div>\n          <div\n            className=\"mt-3 grid grid-cols-3 gap-2 border-t pt-3\"\n            style={{ borderColor: tokens.border }}\n          >\n            <div>\n              <p className=\"text-3xs\" style={{ color: tokens.textMuted }}>\n                Seats\n              </p>\n              <p className=\"mt-1 text-lg font-semibold tabular-nums text-white\">\n                6\n              </p>\n            </div>\n            <div>\n              <p className=\"text-3xs\" style={{ color: tokens.textMuted }}>\n                Section\n              </p>\n              <p className=\"mt-1 text-lg font-semibold text-white\">Garden</p>\n            </div>\n            <div>\n              <p className=\"text-3xs\" style={{ color: tokens.textMuted }}>\n                Today\n              </p>\n              <p className=\"mt-1 text-lg font-semibold tabular-nums text-white\">\n                3 / 4\n              </p>\n            </div>\n          </div>\n        </section>\n\n        {/* Utilisation sparkline */}\n        <Caption>\n          <span className=\"mt-5 inline-block\">Utilisation · last 14 days</span>\n        </Caption>\n        <div\n          className=\"mt-2 rounded-2xl border p-4\"\n          style={{ borderColor: tokens.border, background: tokens.card }}\n        >\n          <div className=\"flex items-end gap-1.5\" style={{ height: 56 }}>\n            {[40, 55, 30, 70, 65, 85, 90, 50, 60, 45, 75, 80, 88, 72].map(\n              (h, i) => (\n                <span\n                  key={i}\n                  className=\"flex-1 rounded-t-md\"\n                  style={{\n                    height: `${h}%`,\n                    background:\n                      i === 13\n                        ? tokens.accent\n                        : `rgba(17,109,255,${0.25 + (h / 100) * 0.5})`,\n                  }}\n                />\n              ),\n            )}\n          </div>\n          <div\n            className=\"mt-2 flex items-center justify-between text-3xs\"\n            style={{ color: tokens.textTertiary }}\n          >\n            <span>Apr 11</span>\n            <span className=\"tabular-nums\" style={{ color: tokens.text }}>\n              72% avg\n            </span>\n            <span>Apr 24</span>\n          </div>\n        </div>\n\n        {/* Today's slots */}\n        <Caption>\n          <span className=\"mt-5 inline-block\">Today</span>\n        </Caption>\n        <div className=\"mt-2 space-y-2\">\n          {todayBookings.map((b, i) => {\n            const tone =\n              b.status === 'seated'\n                ? {\n                    bg: 'rgba(17,109,255,0.14)',\n                    label: tokens.accent,\n                    text: 'Seated',\n                  }\n                : b.status === 'reserved'\n                  ? {\n                      bg: 'rgba(244,183,64,0.12)',\n                      label: tokens.warn,\n                      text: 'Reserved',\n                    }\n                  : { bg: tokens.card, label: tokens.good, text: 'Open' };\n            return (\n              <div\n                key={i}\n                className=\"flex items-center gap-3 rounded-2xl border p-3\"\n                style={{ borderColor: tokens.border, background: tone.bg }}\n              >\n                <p\n                  className=\"w-16 shrink-0 text-2xs font-semibold tabular-nums\"\n                  style={{ color: tokens.textSecondary }}\n                >\n                  {b.time}\n                </p>\n                <div className=\"min-w-0 flex-1\">\n                  <p className=\"truncate text-xs font-medium text-white\">\n                    {b.name}\n                  </p>\n                  {b.size > 0 && (\n                    <p\n                      className=\"mt-0.5 text-3xs\"\n                      style={{ color: tokens.textTertiary }}\n                    >\n                      {b.size} guests\n                    </p>\n                  )}\n                </div>\n                <span\n                  className=\"rounded-full px-2 py-0.5 text-3xs font-semibold uppercase tracking-wider\"\n                  style={{ background: tokens.elevated, color: tone.label }}\n                >\n                  {tone.text}\n                </span>\n              </div>\n            );\n          })}\n        </div>\n\n        {/* Settings */}\n        <Caption>\n          <span className=\"mt-5 inline-block\">Configuration</span>\n        </Caption>\n        <div className=\"mt-2 space-y-2\">\n          <SettingsRow\n            icon={Clock}\n            label=\"Booking hours\"\n            hint=\"11 AM – 10 PM · daily\"\n          />\n          <SettingsRow\n            icon={CalendarDays}\n            label=\"Block off time\"\n            hint=\"Mon mornings · cleaning\"\n          />\n          <SettingsRow\n            icon={Users}\n            label=\"Combine with\"\n            hint=\"Table 7 · seats 12\"\n          />\n        </div>\n      </div>\n    </div>\n  );\n}\n\n// ─────────────────────────────────────────────────────────────\n// Appearance — run the storefront from a phone\n// ─────────────────────────────────────────────────────────────\nexport function AppearanceHub() {\n  return (\n    <div className=\"flex h-full flex-col\">\n      <StatusBar />\n      <HubHeader\n        title=\"Appearance\"\n        trailing={\n          <button\n            type=\"button\"\n            aria-label=\"Preview\"\n            className=\"flex h-9 items-center gap-1.5 rounded-full px-3 text-2xs font-medium\"\n            style={{ background: tokens.elevated, color: tokens.textSecondary }}\n          >\n            <Eye className=\"size-[13px]\" />\n            Preview\n          </button>\n        }\n      />\n      <div className=\"flex-1 overflow-y-auto px-4 pb-24\">\n        {/* Current theme card — image hero with status + version */}\n        <section\n          className=\"mt-3 overflow-hidden rounded-2xl border\"\n          style={{ borderColor: tokens.border, background: tokens.card }}\n        >\n          <div\n            className=\"relative h-[148px] w-full\"\n            style={{\n              background:\n                'linear-gradient(135deg, #2A2118 0%, #3F2F1F 45%, #1B1610 100%)',\n            }}\n          >\n            <div\n              className=\"absolute left-3 top-3 rounded-full px-2 py-0.5 text-3xs font-semibold\"\n              style={{\n                background: 'rgba(74,222,128,0.18)',\n                color: tokens.good,\n              }}\n            >\n              ● Live\n            </div>\n            <div className=\"absolute bottom-3 left-3 right-3\">\n              <p\n                className=\"text-3xs\"\n                style={{ color: 'rgba(255,255,255,0.55)' }}\n              >\n                Current theme\n              </p>\n              <p className=\"mt-0.5 font-serif text-title font-semibold tracking-tight text-white\">\n                Lagos · Editorial\n              </p>\n            </div>\n          </div>\n          <div className=\"flex items-center justify-between px-4 py-3\">\n            <div className=\"min-w-0\">\n              <p className=\"text-2xs\" style={{ color: tokens.textTertiary }}>\n                Version 2.4 · updated 3 days ago\n              </p>\n              <p\n                className=\"mt-0.5 text-3xs\"\n                style={{ color: tokens.textMuted }}\n              >\n                5 pages · 1 unsaved draft\n              </p>\n            </div>\n            <button\n              type=\"button\"\n              className=\"flex h-9 items-center gap-1.5 rounded-xl px-3 text-2xs font-semibold\"\n              style={{ background: tokens.accent, color: tokens.accentFg }}\n            >\n              Customize\n            </button>\n          </div>\n        </section>\n\n        <section className=\"mt-5 space-y-2\">\n          <Caption>Edit this theme</Caption>\n          <SettingsRow\n            icon={FileText}\n            label=\"Pages\"\n            hint=\"5 pages · Home, Menu, About, Contact, Reservations\"\n          />\n          <SettingsRow\n            icon={Layers}\n            label=\"Sections\"\n            hint=\"Reorder, hide, or replace sections on any page\"\n          />\n          <SettingsRow\n            icon={Link2}\n            label=\"Navigation\"\n            hint=\"Header & footer menus · 6 items\"\n          />\n          <SettingsRow\n            icon={Palette}\n            label=\"Branding\"\n            hint=\"Logo · 4 colors · 2 fonts\"\n          />\n        </section>\n\n        <section className=\"mt-5 space-y-2\">\n          <Caption>Switch theme</Caption>\n          <SettingsRow\n            icon={Wand2}\n            label=\"Theme library\"\n            hint=\"12 themes built for restaurants\"\n          />\n          <SettingsRow\n            icon={Download}\n            label=\"Saved drafts\"\n            hint=\"2 drafts — Bold (April 18) · Minimal (April 09)\"\n          />\n        </section>\n\n        <section className=\"mt-5 space-y-2\">\n          <Caption>Publish</Caption>\n          <div\n            className=\"rounded-2xl border p-4\"\n            style={{\n              borderColor: 'rgba(244,183,64,0.32)',\n              background: 'rgba(244,183,64,0.06)',\n            }}\n          >\n            <div className=\"flex items-center gap-2\">\n              <span\n                className=\"flex h-2 w-2 rounded-full\"\n                style={{ background: tokens.warn }}\n              />\n              <p className=\"text-xs font-semibold text-white\">\n                3 unsaved changes\n              </p>\n            </div>\n            <p\n              className=\"mt-1 text-2xs\"\n              style={{ color: tokens.textSecondary }}\n            >\n              Hero image · Featured menu order · About body\n            </p>\n            <div className=\"mt-3 flex gap-2\">\n              <button\n                type=\"button\"\n                className=\"flex h-10 flex-1 items-center justify-center rounded-xl border text-xs font-medium text-white\"\n                style={{\n                  borderColor: tokens.border,\n                  background: tokens.elevated,\n                }}\n              >\n                Discard\n              </button>\n              <button\n                type=\"button\"\n                className=\"flex h-10 flex-[1.4] items-center justify-center gap-1.5 rounded-xl text-xs font-semibold\"\n                style={{ background: tokens.accent, color: tokens.accentFg }}\n              >\n                Publish changes\n              </button>\n            </div>\n          </div>\n        </section>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/mobile/mobile-redesign-mockups/plan-calendar-schedule-resou.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Plan — calendar, schedule, resources
+ *
+ * One chapter of the mobile visual contract. ~40 screens cite this file as
+ * the spec they implement, so the markup here is the artifact and is never
+ * converted onto primitives — see CLAUDE.md. Splitting it moves nothing:
+ * every screen is the same markup, in a file named for what it draws.
+ */
+export declare function CalendarMonth(): import("react").JSX.Element;