@squadbase/vantage-template 0.1.1-dev1.da9fa09 → 0.1.1-dev1.e37e90d

package/base-template/src/components/build-recovery.tsx

@@ -29,6 +29,12 @@ import { Button, Spinner } from "@squadbase/vantage/ui"
  */
 const FRAMEWORK_ERROR_SELECTOR = '[role="alert"] h2'
 
+/** `import.meta.hot` のうち、ここで使う分だけ。 */
+interface ViteHot {
+  on(event: string, cb: () => void): void
+  off?(event: string, cb: () => void): void
+}
+
 /** 書き込みの連鎖が落ち着くのを待ってからリロードする。 */
 const RELOAD_DELAY_MS = 1200
 
@@ -43,6 +49,21 @@ const SETTLE_MS = 5000
 
 const RELOAD_COUNT_KEY = "vantage:build-recovery-reloads"
 
+/**
+ * 書きかけのファイルを下書きとして表示している間、Vantage のクライアントが立てる目印。
+ * 下書き中の描画エラーはフレームワークが直前に通った版へ戻すので、ここでは覆わず、
+ * リロードもしない(リロードすると下書きの表示ごと消える)。
+ */
+declare global {
+  interface Window {
+    __VANTAGE_DRAFT__?: { active: boolean }
+  }
+}
+
+function isDraftActive(): boolean {
+  return window.__VANTAGE_DRAFT__?.active === true
+}
+
 /** コピーしたことが伝わればいいので、確認表示はすぐ元に戻す。 */
 const COPIED_FEEDBACK_MS = 2000
 
@@ -90,6 +111,7 @@ export function RecoveringState({ error }: { error?: unknown }) {
       const attempts = readReloadCount()
       if (attempts < MAX_RELOADS) {
         const timer = setTimeout(() => {
+          if (isDraftActive()) return
           writeReloadCount(attempts + 1)
           window.location.reload()
         }, RELOAD_DELAY_MS)
@@ -181,6 +203,11 @@ export function BuildRecovery({ children }: { children: ReactNode }) {
     const host = hostRef.current
     if (!host) return
     const sync = () => {
+      // 下書きの表示中は覆わない。終わった時点でエラー画面が残っていれば、次の sync で覆う。
+      if (isDraftActive()) {
+        setMessage(null)
+        return
+      }
       const heading = host.querySelector(FRAMEWORK_ERROR_SELECTOR)
       // 覆って見えなくする以上、支援技術にも読ませない。`role="alert"` のままだと
       // 「Something went wrong」がそのまま読み上げられてしまう。属性は observe の
@@ -192,7 +219,16 @@ export function BuildRecovery({ children }: { children: ReactNode }) {
     sync()
     const observer = new MutationObserver(sync)
     observer.observe(host, { childList: true, subtree: true })
-    return () => observer.disconnect()
+    // 下書きの有無が変わったときに見直す(目印の更新を待つため 1 tick 遅らせる)。
+    const onDraftState = () => setTimeout(sync, 0)
+    // 生成される `ImportMeta` は `env` しか宣言しない(HMR の型を入れるとアプリが vite/client を
+    // 入れたときに二重宣言になる)ので、ここだけ局所キャストで読む。
+    const hot = (import.meta as unknown as { hot?: ViteHot }).hot
+    hot?.on("vantage:draft-state", onDraftState)
+    return () => {
+      observer.disconnect()
+      hot?.off?.("vantage:draft-state", onDraftState)
+    }
   }, [])
 
   const crashed = message !== null

package/base-template/src/components/user-card.tsx

@@ -11,6 +11,16 @@ import {
   cn,
 } from "@squadbase/vantage/ui"
 
+export function UserCard() {
+  const userState = useUser()
+
+  if (userState.status === "success") {
+    return <UserInfo user={userState.data} />
+  }
+
+  return <UserInfoFallback />
+}
+
 /**
  * Squadbase-authenticated user chip for the app shell.
  *
@@ -120,13 +130,3 @@ function UserInfoFallback() {
     </div>
   )
 }
-
-export function UserCard() {
-  const userState = useUser()
-
-  if (userState.status === "success") {
-    return <UserInfo user={userState.data} />
-  }
-
-  return <UserInfoFallback />
-}

package/base-template/src/styles.css

@@ -17,30 +17,117 @@
   /* --radius: 0.625rem; */
 }
 
-/* Page typeface. Latin system faces first, then Japanese system faces so kana and
-   kanji do not fall back to a thin locale default. Put a Latin webfont in front if
-   you add one, but keep the Japanese families. */
+/* Page typeface. `--font-sans` (Vantage theme.css, overridable by the theme range
+   below or here) already lists Latin system faces and then Japanese ones, so kana
+   and kanji do not fall back to a thin locale default. Change the typeface by
+   overriding `--font-sans`; keep the Japanese families if you put a webfont in
+   front. */
 body {
-  font-family:
-    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Sans",
-    "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif;
+  font-family: var(--font-sans);
 }
 
-/* vantage-template:chart-preset — regenerated by `chart`; edits here are lost */
+/* squadkit-theme — regenerated by `theme`; edits here are lost */
+/* theme: neutral */
 :root {
-  --chart-1: var(--color-blue-600);
-  --chart-2: var(--color-teal-500);
-  --chart-3: var(--color-fuchsia-500);
-  --chart-4: var(--color-violet-500);
-  --chart-5: var(--color-gray-400);
+  --radius: 0.5rem;
+  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, ui-sans-serif, system-ui, sans-serif;
+  --background: oklch(0.975 0.004 255);
+  --card: oklch(1 0 0);
+  --popover: oklch(1 0 0);
+  --secondary: oklch(0.965 0.005 255);
+  --muted: oklch(0.965 0.005 255);
+  --accent: oklch(0.955 0.01 255);
+  --sidebar: oklch(0.985 0.003 255);
+  --sidebar-accent: oklch(0.955 0.01 255);
+  --border: oklch(0.93 0.006 255);
+  --input: oklch(0.9 0.01 255);
+  --sidebar-border: oklch(0.915 0.008 255);
+  --foreground: oklch(0.21 0.02 260);
+  --card-foreground: oklch(0.21 0.02 260);
+  --popover-foreground: oklch(0.21 0.02 260);
+  --secondary-foreground: oklch(0.25 0.02 260);
+  --muted-foreground: oklch(0.5 0.02 258);
+  --accent-foreground: oklch(0.25 0.02 260);
+  --sidebar-foreground: oklch(0.21 0.02 260);
+  --sidebar-accent-foreground: oklch(0.25 0.02 260);
+  --primary: oklch(0.55 0.2 262);
+  --primary-foreground: oklch(0.985 0 0);
+  --ring: oklch(0.7 0.12 262);
+  --sidebar-primary: oklch(0.55 0.2 262);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-ring: oklch(0.7 0.12 262);
+  --chart-1: oklch(0.55 0.2 262);
+  --chart-2: oklch(0.62 0.17 118);
+  --chart-3: oklch(0.5 0.19 352);
+  --chart-4: oklch(0.62 0.1 195);
+  --chart-5: oklch(0.44 0.18 300);
+  --positive: oklch(0.52 0.14 150);
+  --positive-subtle: oklch(0.96 0.04 150);
+  --positive-fill: oklch(0.62 0.15 150);
+  --negative: oklch(0.53 0.19 25);
+  --negative-subtle: oklch(0.96 0.03 25);
+  --negative-fill: oklch(0.62 0.17 25);
+  --warning: oklch(0.53 0.12 70);
+  --warning-subtle: oklch(0.96 0.05 85);
+  --warning-fill: oklch(0.79 0.16 82);
+  --info: oklch(0.52 0.16 255);
+  --info-subtle: oklch(0.96 0.03 250);
+  --info-fill: oklch(0.62 0.15 250);
+  --neutral: oklch(0.52 0 0);
+  --neutral-subtle: oklch(0.96 0 0);
+  --neutral-fill: oklch(0.62 0 0);
+  --destructive: oklch(0.53 0.21 27.325);
+  --destructive-foreground: oklch(0.985 0 0);
 }
 
 .dark,
 [data-theme="dark"] {
-  --chart-1: var(--color-blue-400);
-  --chart-2: var(--color-teal-400);
-  --chart-3: var(--color-fuchsia-400);
-  --chart-4: var(--color-violet-400);
-  --chart-5: var(--color-gray-500);
+  --background: oklch(0.16 0.012 262);
+  --card: oklch(0.215 0.015 262);
+  --popover: oklch(0.235 0.016 262);
+  --secondary: oklch(0.27 0.016 262);
+  --muted: oklch(0.27 0.016 262);
+  --accent: oklch(0.3 0.02 262);
+  --sidebar: oklch(0.2 0.014 262);
+  --sidebar-accent: oklch(0.3 0.02 262);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --foreground: oklch(0.96 0.005 255);
+  --card-foreground: oklch(0.96 0.005 255);
+  --popover-foreground: oklch(0.96 0.005 255);
+  --secondary-foreground: oklch(0.96 0.005 255);
+  --muted-foreground: oklch(0.72 0.02 258);
+  --accent-foreground: oklch(0.96 0.005 255);
+  --sidebar-foreground: oklch(0.96 0.005 255);
+  --sidebar-accent-foreground: oklch(0.96 0.005 255);
+  --primary: oklch(0.68 0.19 262);
+  --primary-foreground: oklch(0.145 0.02 262);
+  --ring: oklch(0.6 0.15 262);
+  --sidebar-primary: oklch(0.68 0.19 262);
+  --sidebar-primary-foreground: oklch(0.145 0.02 262);
+  --sidebar-ring: oklch(0.6 0.15 262);
+  --chart-1: oklch(0.56 0.19 262);
+  --chart-2: oklch(0.75 0.17 118);
+  --chart-3: oklch(0.64 0.19 352);
+  --chart-4: oklch(0.78 0.105 195);
+  --chart-5: oklch(0.71 0.17 300);
+  --positive: oklch(0.76 0.15 150);
+  --positive-subtle: oklch(0.27 0.05 150);
+  --positive-fill: oklch(0.56 0.13 150);
+  --negative: oklch(0.74 0.15 22);
+  --negative-subtle: oklch(0.27 0.06 25);
+  --negative-fill: oklch(0.56 0.15 22);
+  --warning: oklch(0.8 0.14 80);
+  --warning-subtle: oklch(0.27 0.05 75);
+  --warning-fill: oklch(0.73 0.145 78);
+  --info: oklch(0.75 0.12 250);
+  --info-subtle: oklch(0.27 0.06 255);
+  --info-fill: oklch(0.56 0.13 250);
+  --neutral: oklch(0.85 0 0);
+  --neutral-subtle: oklch(0.27 0 0);
+  --neutral-fill: oklch(0.56 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --destructive-foreground: oklch(0.145 0.02 262);
 }
-/* vantage-template:chart-preset:end */
+/* squadkit-theme:end */