@chesapeake/stack 0.1.7 → 0.1.8

package/CHANGELOG.md

@@ -6,6 +6,15 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to
 [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.1.8] - 2026-11-08
+
+### Added
+
+- `lib/layoutTier`, `lib/useMediaQuery`, `lib/useLayoutTier`: compact /
+  hybrid / comfortable viewport tiers (Tailwind-aligned breakpoints)
+- `StandardLayout` sets `data-layout-tier` and slightly tighter shell padding on
+  small viewports
+
 ## [0.1.7] - 2026-10-11
 
 ### Added

package/README.md

@@ -17,6 +17,10 @@ system consists of:
 - `styles/index.css` that includes Tailwind CSS, design tokens, base styles, and
   component styles
 - `tailwind.preset.ts` for use in `tailwind.config.ts`
+- **Layout tiers** (`compact` / `hybrid` / `comfortable`): `useLayoutTier`,
+  `LAYOUT_TIER_*` constants, and `data-layout-tier` on `StandardLayout`. See
+  denoise-ui `docs/responsive-layout.md` for product rules; apps own feature
+  toolbars.
 
 ## Installation
 

package/components/ux/StandardLayout/StandardLayout.tsx

@@ -5,6 +5,7 @@
 import { useState } from "react";
 import { Button } from "../../../components/ui/button";
 import { useAuth } from "../auth";
+import { useLayoutTier } from "../../../lib/useLayoutTier.ts";
 import { ProfilePage } from "./ProfilePage";
 import type { AuthUser } from "../auth/context";
 
@@ -46,6 +47,8 @@ export function StandardLayout({
   maxWidth,
 }: StandardLayoutProps) {
   const [showProfile, setShowProfile] = useState(false);
+  const layoutTier = useLayoutTier();
+  const shellPadding = "p-3 md:p-4";
   const { user: authUser } = useAuth();
 
   // Determine if user is logged in based on authUser
@@ -94,11 +97,14 @@ export function StandardLayout({
     return (
       <div
         className={`h-screen flex flex-col overflow-hidden ${className ?? ""}`}
+        data-layout-tier={layoutTier}
       >
         {/* Toolbar/Header */}
         <div className="border-b bg-background flex-shrink-0">
           <div className="flex justify-center">
-            <div className={`w-full ${getMaxWidthClass(maxWidth)} p-4`}>
+            <div
+              className={`w-full ${getMaxWidthClass(maxWidth)} ${shellPadding}`}
+            >
               <div className="flex justify-between items-center">
                 {headerContent ? (
                   <div className="flex items-center gap-2 w-full">
@@ -242,11 +248,14 @@ export function StandardLayout({
   return (
     <div
       className={`h-screen flex flex-col overflow-hidden ${className ?? ""}`}
+      data-layout-tier={layoutTier}
     >
       {/* Toolbar/Header */}
       <div className="border-b bg-background flex-shrink-0">
         <div className="flex justify-center">
-          <div className={`w-full ${getMaxWidthClass(maxWidth)} p-4`}>
+          <div
+            className={`w-full ${getMaxWidthClass(maxWidth)} ${shellPadding}`}
+          >
             <div className="flex justify-between items-center">
               {headerContent ? (
                 <div className="flex items-center gap-2 w-full">

package/components/ux/StandardLayout/index.ts

@@ -14,6 +14,20 @@ export {
   PageHeader,
   PageLayout,
 } from "./PageLayout.tsx";
+
+export {
+  LAYOUT_TIER_COMPACT_MAX_PX,
+  LAYOUT_TIER_COMFORTABLE_MIN_PX,
+  LAYOUT_TIER_DIALOG_MIN_MEDIA,
+  LAYOUT_TIER_MEDIA,
+  resolveLayoutTier,
+  type LayoutTier,
+} from "../../../lib/layoutTier.ts";
+export {
+  useLayoutTier,
+  useLayoutTierWidth,
+} from "../../../lib/useLayoutTier.ts";
+export { useMediaQuery } from "../../../lib/useMediaQuery.ts";
 export type {
   PageContainerProps,
   PageContentProps,

package/components/ux/runner/RunnerStatusCard.tsx

@@ -1,23 +1,52 @@
 import type { ReactNode } from "react";
 import { Card } from "../../ui/card.tsx";
 
+/** Per-checkout readiness reported by the paired runner. */
+export interface RepositoryReadinessEntry {
+  repository: string;
+  ready: boolean;
+  reason?: string;
+}
+
 export interface RunnerStatusCardProps {
   name: string;
   state: string;
   details?: string;
   repositories?: string[];
+  /** Slug highlighted as the kickstart target for this page. */
+  targetRepository?: string;
+  /** Optional readiness per registered slug. */
+  repositoryReadiness?: RepositoryReadinessEntry[];
   children?: ReactNode;
   jobs?: ReactNode;
 }
 
+function readinessForSlug(
+  slug: string,
+  entries: RepositoryReadinessEntry[] | undefined
+): RepositoryReadinessEntry | undefined {
+  if (!entries?.length) return undefined;
+  const lower = slug.toLowerCase();
+  return entries.find((entry) => entry.repository.toLowerCase() === lower);
+}
+
 export function RunnerStatusCard({
   name,
   state,
   details,
   repositories = [],
+  targetRepository,
+  repositoryReadiness,
   children,
   jobs,
 }: RunnerStatusCardProps) {
+  const targetLower = targetRepository?.trim().toLowerCase();
+  const slugs = repositories.length
+    ? repositories
+    : targetRepository
+      ? [targetRepository]
+      : [];
+
   return (
     <Card
       className="space-y-3 rounded-md border p-4"
@@ -39,11 +68,35 @@ export function RunnerStatusCard({
       </div>
       <div>
         <p className="text-sm font-medium">Repository access</p>
-        {repositories.length ? (
+        {slugs.length ? (
           <ul className="text-muted-foreground mt-1 list-inside list-disc text-sm">
-            {repositories.map((repository) => (
-              <li key={repository}>{repository}</li>
-            ))}
+            {slugs.map((repository) => {
+              const readiness = readinessForSlug(
+                repository,
+                repositoryReadiness
+              );
+              const isTarget =
+                targetLower != null && repository.toLowerCase() === targetLower;
+              return (
+                <li
+                  key={repository}
+                  className={
+                    isTarget ? "text-foreground font-medium" : undefined
+                  }
+                  title={readiness?.reason}
+                >
+                  {repository}
+                  {isTarget ? " · kickstart target" : ""}
+                  {readiness != null
+                    ? readiness.ready
+                      ? " · ready"
+                      : ` · not ready${
+                          readiness.reason ? `: ${readiness.reason}` : ""
+                        }`
+                    : ""}
+                </li>
+              );
+            })}
           </ul>
         ) : (
           <p className="text-muted-foreground mt-1 text-sm">

package/index.ts

@@ -29,4 +29,7 @@ export * from "./components/retail/index.ts";
 export * from "./types/retail-location.ts";
 export * from "./lib/utils.ts";
 export * from "./lib/githubIssue.ts";
+export * from "./lib/layoutTier.ts";
+export * from "./lib/useMediaQuery.ts";
+export * from "./lib/useLayoutTier.ts";
 export { default as tailwindPreset } from "./tailwind.preset.ts";

package/lib/layoutTier.test.ts

@@ -0,0 +1,16 @@
+// Copyright 2026 Chesapeake Computing
+// SPDX-License-Identifier: Apache-2.0
+
+import assert from "node:assert/strict";
+import test from "node:test";
+import { resolveLayoutTier } from "./layoutTier.ts";
+
+await test("resolveLayoutTier boundaries", () => {
+  assert.equal(resolveLayoutTier(390), "compact");
+  assert.equal(resolveLayoutTier(767), "compact");
+  assert.equal(resolveLayoutTier(768), "hybrid");
+  assert.equal(resolveLayoutTier(683), "compact");
+  assert.equal(resolveLayoutTier(1023), "hybrid");
+  assert.equal(resolveLayoutTier(1024), "comfortable");
+  assert.equal(resolveLayoutTier(1920), "comfortable");
+});

package/lib/layoutTier.ts

@@ -0,0 +1,26 @@
+// Copyright 2026 Chesapeake Computing
+// SPDX-License-Identifier: Apache-2.0
+
+/** Three-tier layout names aligned with Tailwind default breakpoints. */
+export type LayoutTier = "compact" | "hybrid" | "comfortable";
+
+/** Max width (px) for compact tier (below md). */
+export const LAYOUT_TIER_COMPACT_MAX_PX = 767;
+
+/** Min width (px) for comfortable tier (lg and up). */
+export const LAYOUT_TIER_COMFORTABLE_MIN_PX = 1024;
+
+export const LAYOUT_TIER_MEDIA = {
+  compact: `(max-width: ${String(LAYOUT_TIER_COMPACT_MAX_PX)}px)`,
+  hybrid: `(min-width: 768px) and (max-width: ${String(LAYOUT_TIER_COMFORTABLE_MIN_PX - 1)}px)`,
+  comfortable: `(min-width: ${String(LAYOUT_TIER_COMFORTABLE_MIN_PX)}px)`,
+} as const;
+
+/** Dialog vs drawer: at md and above use dialog shell. */
+export const LAYOUT_TIER_DIALOG_MIN_MEDIA = "(min-width: 768px)";
+
+export function resolveLayoutTier(viewportWidthPx: number): LayoutTier {
+  if (viewportWidthPx <= LAYOUT_TIER_COMPACT_MAX_PX) return "compact";
+  if (viewportWidthPx < LAYOUT_TIER_COMFORTABLE_MIN_PX) return "hybrid";
+  return "comfortable";
+}

package/lib/useLayoutTier.ts

@@ -0,0 +1,32 @@
+// Copyright 2026 Chesapeake Computing
+// SPDX-License-Identifier: Apache-2.0
+
+/** @jsxImportSource react */
+import {
+  LAYOUT_TIER_MEDIA,
+  type LayoutTier,
+  resolveLayoutTier,
+} from "./layoutTier.ts";
+import { useMediaQuery } from "./useMediaQuery.ts";
+import { useMemo } from "react";
+
+/**
+ * Current viewport layout tier (compact / hybrid / comfortable).
+ */
+export function useLayoutTier(): LayoutTier {
+  const compact = useMediaQuery(LAYOUT_TIER_MEDIA.compact);
+  const comfortable = useMediaQuery(LAYOUT_TIER_MEDIA.comfortable);
+
+  return useMemo(() => {
+    if (compact) return "compact";
+    if (comfortable) return "comfortable";
+    return "hybrid";
+  }, [compact, comfortable]);
+}
+
+export function useLayoutTierWidth(): number {
+  if (typeof window === "undefined") return 1280;
+  return window.innerWidth;
+}
+
+export { resolveLayoutTier };

package/lib/useMediaQuery.ts

@@ -0,0 +1,29 @@
+// Copyright 2026 Chesapeake Computing
+// SPDX-License-Identifier: Apache-2.0
+
+/** @jsxImportSource react */
+import { useEffect, useState } from "react";
+
+/**
+ * Subscribe to a CSS media query; returns whether it currently matches.
+ */
+export function useMediaQuery(query: string): boolean {
+  const [matches, setMatches] = useState(() => {
+    if (typeof window === "undefined") return false;
+    return window.matchMedia(query).matches;
+  });
+
+  useEffect(() => {
+    const media = window.matchMedia(query);
+    const onChange = () => {
+      setMatches(media.matches);
+    };
+    onChange();
+    media.addEventListener("change", onChange);
+    return () => {
+      media.removeEventListener("change", onChange);
+    };
+  }, [query]);
+
+  return matches;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chesapeake/stack",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "A simple, reusable React component library and design system built on shadcn/ui with Tailwind CSS",
   "type": "module",
   "packageManager": "npm@10.2.0",
@@ -134,6 +134,9 @@
     "./components/ux/auth/github/types": "./components/ux/auth/github/types.ts",
     "./lib/utils": "./lib/utils.ts",
     "./lib/githubIssue": "./lib/githubIssue.ts",
+    "./lib/layoutTier": "./lib/layoutTier.ts",
+    "./lib/useMediaQuery": "./lib/useMediaQuery.ts",
+    "./lib/useLayoutTier": "./lib/useLayoutTier.ts",
     "./types/user": "./types/user.ts",
     "./types/retail-location": "./types/retail-location.ts",
     "./styles": "./styles/index.css",