minutework 0.1.39 → 0.1.41

package/assets/templates/vuilder-shell/src/app/docs/[...slug]/page.tsx

@@ -0,0 +1,15 @@
+import { StaticPublicPage } from "@/features/public-shell/components/static-public-page";
+
+export const metadata = {
+  title: "Docs",
+};
+
+export default function DocsPage() {
+  return (
+    <StaticPublicPage
+      eyebrow="Docs"
+      title="Documentation page"
+      body="Helpful context for customer workflows."
+    />
+  );
+}

package/assets/templates/vuilder-shell/src/app/docs/page.tsx

@@ -0,0 +1,15 @@
+import { StaticPublicPage } from "@/features/public-shell/components/static-public-page";
+
+export const metadata = {
+  title: "Docs",
+};
+
+export default function DocsIndexPage() {
+  return (
+    <StaticPublicPage
+      eyebrow="Docs"
+      title="Customer documentation"
+      body="Guides, onboarding notes, and product documentation."
+    />
+  );
+}

package/assets/templates/vuilder-shell/src/app/globals.css

@@ -0,0 +1,70 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "../design-system/tokens/index.css";
+
+@layer base {
+  html {
+    height: 100%;
+  }
+
+  body {
+    min-height: 100%;
+    margin: 0;
+  }
+
+  * {
+    @apply border-border outline-ring/50;
+    box-sizing: border-box;
+  }
+
+  body {
+    @apply bg-background text-foreground antialiased;
+  }
+
+  a {
+    color: inherit;
+  }
+}
+
+@layer components {
+  .public-site-background {
+    background:
+      linear-gradient(
+        180deg,
+        var(--color-background) 0%,
+        color-mix(in oklab, var(--color-surface-raised) 68%, white) 100%
+      );
+  }
+
+  .public-site-orb {
+    background:
+      radial-gradient(
+        circle at top left,
+        color-mix(in oklab, var(--color-primary) 28%, white) 0%,
+        transparent 48%
+      ),
+      radial-gradient(
+        circle at top right,
+        color-mix(in oklab, var(--color-chart-2) 18%, white) 0%,
+        transparent 42%
+      );
+  }
+
+  .marketing-hero-surface {
+    background:
+      linear-gradient(
+        135deg,
+        color-mix(in oklab, var(--color-surface) 78%, white) 0%,
+        color-mix(in oklab, var(--color-primary) 8%, white) 100%
+      );
+  }
+
+  .marketing-hero-orb {
+    background:
+      radial-gradient(
+        circle at center,
+        color-mix(in oklab, var(--color-chart-2) 14%, white) 0%,
+        transparent 70%
+      );
+  }
+}

package/assets/templates/vuilder-shell/src/app/layout.tsx

@@ -0,0 +1,69 @@
+import "./globals.css";
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import { cookies } from "next/headers";
+import type { ReactNode } from "react";
+
+import { AppProviders } from "./providers";
+import { resolvePublicMetadataBase } from "@/lib/public-site";
+import {
+  isThemeMode,
+  THEME_COOKIE_NAME,
+  type ThemeMode,
+} from "@/lib/theme-config";
+
+const geistSans = Geist({
+  subsets: ["latin"],
+  variable: "--font-sans",
+});
+
+const geistMono = Geist_Mono({
+  subsets: ["latin"],
+  variable: "--font-mono",
+});
+
+export function generateMetadata(): Metadata {
+  const metadataBase = resolvePublicMetadataBase();
+  const appName = process.env.MW_TEMPLATE_APP_NAME || "Vuilder Shell";
+
+  return {
+    ...(metadataBase ? { metadataBase } : {}),
+    title: {
+      default: appName,
+      template: `%s | ${appName}`,
+    },
+    description: "Customer-facing branded tenant shell.",
+    openGraph: {
+      title: appName,
+      description: "Customer-facing branded tenant shell.",
+      siteName: appName,
+      type: "website",
+      ...(process.env.MW_PUBLIC_BASE_URL ? { url: process.env.MW_PUBLIC_BASE_URL } : {}),
+    },
+  };
+}
+
+export default async function RootLayout({ children }: { children: ReactNode }) {
+  const cookieStore = await cookies();
+  const themeCookie = cookieStore.get(THEME_COOKIE_NAME)?.value;
+  const initialTheme: ThemeMode = isThemeMode(themeCookie) ? themeCookie : "system";
+  const resolvedThemeClass =
+    initialTheme === "light" || initialTheme === "dark" ? initialTheme : undefined;
+  const colorScheme =
+    initialTheme === "light" || initialTheme === "dark" ? initialTheme : undefined;
+
+  return (
+    <html
+      lang="en"
+      suppressHydrationWarning
+      className={resolvedThemeClass}
+      style={colorScheme ? { colorScheme } : undefined}
+    >
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} bg-background font-sans text-foreground antialiased`}
+      >
+        <AppProviders initialTheme={initialTheme}>{children}</AppProviders>
+      </body>
+    </html>
+  );
+}

package/assets/templates/vuilder-shell/src/app/login/route.test.ts

@@ -0,0 +1,33 @@
+import { describe, expect, it, vi } from "vitest";
+
+const mocks = vi.hoisted(() => ({
+  applyVuilderShellHandoffStateToResponse: vi.fn(),
+  createVuilderShellHandoffState: vi.fn(() => "state-1"),
+}));
+
+vi.mock("@/lib/platform/session.server", () => ({
+  applyVuilderShellHandoffStateToResponse:
+    mocks.applyVuilderShellHandoffStateToResponse,
+  createVuilderShellHandoffState: mocks.createVuilderShellHandoffState,
+}));
+
+import { GET } from "./route";
+
+describe("GET /login", () => {
+  it("sets shell handoff state and redirects to central SSO", () => {
+    const response = GET(
+      new Request("https://shell.example.com/login?return_to=%2Fw%2Ffleet-alpha"),
+    );
+
+    expect(response.status).toBe(307);
+    expect(response.headers.get("location")).toBe(
+      "http://127.0.0.1:3400/login?returnTo=http%3A%2F%2F127.0.0.1%3A3301%2Fw%2Ffleet-alpha%2Fconnect%3Fmw_shell_state%3Dstate-1",
+    );
+    expect(response.headers.get("cache-control")).toBe("no-store");
+    expect(response.headers.get("referrer-policy")).toBe("no-referrer");
+    expect(mocks.applyVuilderShellHandoffStateToResponse).toHaveBeenCalledWith(
+      expect.any(Response),
+      "state-1",
+    );
+  });
+});

package/assets/templates/vuilder-shell/src/app/login/route.ts

@@ -0,0 +1,21 @@
+import { NextResponse } from "next/server";
+
+import { buildCentralSsoLoginUrl } from "@/lib/auth-routes.server";
+import {
+  applyVuilderShellHandoffStateToResponse,
+  createVuilderShellHandoffState,
+} from "@/lib/platform/session.server";
+
+export function GET(request: Request) {
+  const url = new URL(request.url);
+  const returnPath =
+    url.searchParams.get("return_to") ?? url.searchParams.get("returnTo");
+  const handoffState = createVuilderShellHandoffState();
+  const response = NextResponse.redirect(
+    buildCentralSsoLoginUrl(returnPath, handoffState),
+  );
+  response.headers.set("Cache-Control", "no-store");
+  response.headers.set("Referrer-Policy", "no-referrer");
+  applyVuilderShellHandoffStateToResponse(response, handoffState);
+  return response;
+}

package/assets/templates/vuilder-shell/src/app/page.tsx

@@ -0,0 +1,16 @@
+import { StaticPublicPage } from "@/features/public-shell/components/static-public-page";
+
+export const metadata = {
+  title: "Vuilder Shell",
+  description: "Customer-facing branded tenant shell.",
+};
+
+export default function HomePage() {
+  return (
+    <StaticPublicPage
+      eyebrow="Vuilder Shell"
+      title="A branded customer workspace connected to MinuteWork"
+      body="Customer workspace routes stay branded while identity, provisioning, and app-pack install authority stay on the platform."
+    />
+  );
+}

package/assets/templates/vuilder-shell/src/app/pricing/page.tsx

@@ -0,0 +1,15 @@
+import { StaticPublicPage } from "@/features/public-shell/components/static-public-page";
+
+export const metadata = {
+  title: "Pricing",
+};
+
+export default function PricingPage() {
+  return (
+    <StaticPublicPage
+      eyebrow="Pricing"
+      title="Plans for customer access"
+      body="Clear plan options for customer workspaces."
+    />
+  );
+}

package/assets/templates/vuilder-shell/src/app/providers.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import type { ReactNode } from "react";
+
+import { ThemeProvider } from "@/lib/theme";
+import type { ThemeMode } from "@/lib/theme-config";
+
+export function AppProviders({
+  children,
+  initialTheme,
+}: {
+  children: ReactNode;
+  initialTheme: ThemeMode;
+}) {
+  return (
+    <ThemeProvider
+      attribute="class"
+      defaultTheme={initialTheme}
+      enableSystem
+      disableTransitionOnChange
+    >
+      {children}
+    </ThemeProvider>
+  );
+}

package/assets/templates/vuilder-shell/src/app/robots.ts

@@ -0,0 +1,21 @@
+import type { MetadataRoute } from "next";
+
+import { resolvePublicMetadataBase } from "@/lib/public-site";
+
+export default function robots(): MetadataRoute.Robots {
+  const metadataBase = resolvePublicMetadataBase();
+  return {
+    rules: [
+      {
+        userAgent: "*",
+        allow: "/",
+      },
+    ],
+    ...(metadataBase
+      ? {
+          sitemap: new URL("/sitemap.xml", metadataBase).toString(),
+          host: metadataBase.host,
+        }
+      : {}),
+  };
+}

package/assets/templates/vuilder-shell/src/app/sitemap.ts

@@ -0,0 +1,33 @@
+import type { MetadataRoute } from "next";
+
+import { appRoutes } from "@/lib/app-routes";
+import { resolvePublicSiteUrl } from "@/lib/public-site";
+
+function buildSitemapUrl(pathname: string) {
+  return resolvePublicSiteUrl(pathname)?.toString() ?? pathname;
+}
+
+export default function sitemap(): MetadataRoute.Sitemap {
+  return [
+    {
+      url: buildSitemapUrl(appRoutes.publicHome),
+      changeFrequency: "weekly",
+      priority: 1,
+    },
+    {
+      url: buildSitemapUrl(appRoutes.pricing),
+      changeFrequency: "monthly",
+      priority: 0.8,
+    },
+    {
+      url: buildSitemapUrl(appRoutes.docsIndex),
+      changeFrequency: "weekly",
+      priority: 0.8,
+    },
+    {
+      url: buildSitemapUrl(appRoutes.blogIndex),
+      changeFrequency: "weekly",
+      priority: 0.8,
+    },
+  ];
+}

package/assets/templates/vuilder-shell/src/app/w/[workspace_slug]/connect/page.tsx

@@ -0,0 +1,31 @@
+import { notFound } from "next/navigation";
+
+import { VuilderConnectScreen } from "@/features/vuilder-shell/components/vuilder-connect-screen";
+import { loadWorkspaceShellSession } from "@/lib/platform/client.server";
+import { readPlatformAuthState } from "@/lib/platform/session.server";
+
+type WorkspaceConnectPageProps = {
+  params: Promise<{
+    workspace_slug: string;
+  }>;
+};
+
+export const metadata = {
+  title: "Connect Workspace",
+};
+
+export default async function WorkspaceConnectPage({
+  params,
+}: WorkspaceConnectPageProps) {
+  const { workspace_slug: workspaceSlug } = await params;
+  const authState = await readPlatformAuthState();
+  const shellSession = (await loadWorkspaceShellSession(authState, workspaceSlug))
+    .data;
+  const { membership, session, workspaceCanView } = shellSession;
+
+  if (session.authenticated && (!membership || !workspaceCanView)) {
+    notFound();
+  }
+
+  return <VuilderConnectScreen session={session} workspaceSlug={workspaceSlug} />;
+}

package/assets/templates/vuilder-shell/src/app/w/[workspace_slug]/page.tsx

@@ -0,0 +1,54 @@
+import { notFound, redirect } from "next/navigation";
+
+import { AuthenticatedAppLayoutShell } from "@/features/shell/components/authenticated-app-layout-shell";
+import { VuilderWorkspaceScreen } from "@/features/vuilder-shell/components/vuilder-workspace-screen";
+import { loadWorkspaceShellSession } from "@/lib/platform/client.server";
+import { appRoutes } from "@/lib/app-routes";
+import { readPlatformAuthState } from "@/lib/platform/session.server";
+
+type WorkspacePageProps = {
+  params: Promise<{
+    workspace_slug: string;
+  }>;
+};
+
+export const metadata = {
+  title: "Workspace",
+};
+
+export default async function WorkspacePage({ params }: WorkspacePageProps) {
+  const { workspace_slug: workspaceSlug } = await params;
+  const appName = process.env.MW_TEMPLATE_APP_NAME || "Vuilder Shell";
+  const authState = await readPlatformAuthState();
+  const shellSession = (await loadWorkspaceShellSession(authState, workspaceSlug))
+    .data;
+  const { membership, session, workspaceCanOpen, workspaceCanView } =
+    shellSession;
+
+  if (!session.authenticated) {
+    redirect(appRoutes.loginForWorkspace(workspaceSlug));
+  }
+
+  if (!membership || !workspaceCanView) {
+    notFound();
+  }
+
+  if (!workspaceCanOpen) {
+    redirect(appRoutes.workspaceConnect(workspaceSlug));
+  }
+
+  return (
+    <AuthenticatedAppLayoutShell
+      appName={appName}
+      membership={membership}
+      session={session}
+    >
+      <VuilderWorkspaceScreen
+        appName={appName}
+        membership={membership}
+        session={session}
+        workspaceSlug={workspaceSlug}
+      />
+    </AuthenticatedAppLayoutShell>
+  );
+}

package/assets/templates/vuilder-shell/src/components/ui/button.tsx

@@ -0,0 +1,59 @@
+import * as React from "react";
+
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+  }) {
+  const Comp = asChild ? Slot : "button";
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { Button, buttonVariants };

package/assets/templates/vuilder-shell/src/components/ui/input.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 dark:bg-input/30 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Input };

package/assets/templates/vuilder-shell/src/design-system/docs/governance.mdx

@@ -0,0 +1,26 @@
+import { Meta } from "@storybook/addon-docs/blocks";
+
+<Meta title="Design System/Governance" />
+
+# Governance
+
+The design system lives under `src/design-system` and is the only public visual API for application code.
+
+## Import contract
+
+- Allowed in route and feature code: `@/design-system/primitives/*`, `@/design-system/patterns/*`, `@/design-system/recipes/*`, and `@/design-system/tokens/manifest`.
+- Forbidden outside `src/design-system`: `@/components/ui/*`, `@radix-ui/*`, and direct raw token CSS imports.
+
+## Authoring rules
+
+- Literal color values belong only in `src/design-system/tokens`.
+- Route and feature code compose primitives and patterns instead of creating one-off inline visual systems.
+- Inline styles are allowed only for CSS variable references or truly dynamic layout values.
+- Reused UI should be promoted into `src/design-system/patterns`.
+
+## Enforcement
+
+- `pnpm validate` runs template validation, type generation, token regeneration, `pnpm design-system:check`, and the app test/build pipeline.
+- `pnpm design-system:check` validates imports, raw values, and story coverage.
+- `pnpm build-storybook` keeps documentation coverage intact.
+- `pnpm design-system:visual` is optional for local visual baselines, but `tools/design-system/__screenshots__/` is not shipped in the canonical template bundle.

package/assets/templates/vuilder-shell/src/design-system/patterns/panel-frame.stories.tsx

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+
+import { Button } from "@/design-system/primitives/button";
+import { PanelFrame } from "@/design-system/patterns/panel-frame";
+
+const meta = {
+  title: "Design System/Patterns/Panel Frame",
+  component: PanelFrame,
+  tags: ["autodocs"],
+} satisfies Meta<typeof PanelFrame>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Raised: Story = {
+  render: () => (
+    <PanelFrame tone="raised" className="w-96 space-y-4">
+      <div className="space-y-1">
+        <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+          Tenant thread
+        </p>
+        <h3 className="text-lg font-semibold text-foreground">Missing rent receipt</h3>
+        <p className="text-sm text-muted-foreground">
+          Keep recurring workspace panels visually consistent across login, command, and status
+          surfaces.
+        </p>
+      </div>
+      <div className="flex gap-2">
+        <Button size="sm">Follow up</Button>
+        <Button size="sm" variant="outline">
+          Open details
+        </Button>
+      </div>
+    </PanelFrame>
+  ),
+};
+
+export const Sidebar: Story = {
+  render: () => (
+    <PanelFrame tone="sidebar" radius="none" className="w-80 space-y-3 border-l">
+      <h3 className="text-sm font-semibold text-foreground">Shell surface</h3>
+      <p className="text-sm text-muted-foreground">
+        Use the sidebar tone for docked navigation or support surfaces.
+      </p>
+    </PanelFrame>
+  ),
+};

package/assets/templates/vuilder-shell/src/design-system/patterns/panel-frame.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+
+import { type VariantProps } from "class-variance-authority";
+
+import { panelFrameVariants } from "@/design-system/recipes/chrome";
+import { cn } from "@/lib/utils";
+
+type PanelFrameProps = React.ComponentProps<"div"> &
+  VariantProps<typeof panelFrameVariants>;
+
+function PanelFrame({
+  className,
+  tone,
+  radius,
+  padding,
+  ...props
+}: PanelFrameProps) {
+  return (
+    <div
+      className={cn(panelFrameVariants({ tone, radius, padding }), className)}
+      {...props}
+    />
+  );
+}
+
+export { PanelFrame, panelFrameVariants };

package/assets/templates/vuilder-shell/src/design-system/patterns/status-badge.stories.tsx

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+
+import { StatusBadge } from "@/design-system/patterns/status-badge";
+
+const meta = {
+  title: "Design System/Patterns/Status Badge",
+  component: StatusBadge,
+  tags: ["autodocs"],
+} satisfies Meta<typeof StatusBadge>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const AllTones: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-2">
+      <StatusBadge tone="default">Draft</StatusBadge>
+      <StatusBadge tone="primary">AI suggested</StatusBadge>
+      <StatusBadge tone="success">Completed</StatusBadge>
+      <StatusBadge tone="warning">Needs review</StatusBadge>
+      <StatusBadge tone="danger">Failed</StatusBadge>
+      <StatusBadge tone="info">Queued</StatusBadge>
+    </div>
+  ),
+};

package/assets/templates/vuilder-shell/src/design-system/patterns/status-badge.tsx

@@ -0,0 +1,35 @@
+import * as React from "react";
+
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const statusBadgeVariants = cva(
+  "inline-flex items-center rounded px-2 py-0.5 text-xs font-medium",
+  {
+    variants: {
+      tone: {
+        default: "bg-muted text-muted-foreground",
+        primary: "bg-primary/15 text-text-link",
+        success: "bg-success/20 text-success",
+        warning: "bg-warning/20 text-warning",
+        danger: "bg-danger/20 text-danger",
+        info: "bg-info/20 text-info",
+      },
+    },
+    defaultVariants: {
+      tone: "default",
+    },
+  },
+);
+
+type StatusBadgeProps = React.ComponentProps<"span"> &
+  VariantProps<typeof statusBadgeVariants>;
+
+function StatusBadge({ className, tone, ...props }: StatusBadgeProps) {
+  return (
+    <span className={cn(statusBadgeVariants({ tone }), className)} {...props} />
+  );
+}
+
+export { StatusBadge, statusBadgeVariants };