rei-kit 0.8.0 → 0.9.0

package/README.md

@@ -108,12 +108,13 @@ import { createSupabaseClient } from 'rei-kit/supabase'
 
 ### Wiring the styles
 
-Four lines, and all four are load-bearing:
+Four lines, and every one is load-bearing:
 
 ```css
 /* your app's main.css */
 @import 'tailwindcss';
 @import 'rei-kit/tokens.css'; /* colour roles, the dark variant, measures, utilities */
+@import 'rei-kit/shell/mobile.css'; /* or shell/web.css — see The shell, below */
 @import 'rei-kit/styles.css'; /* compiled component styles */
 
 /* Tailwind generates a utility only where it has seen the class, and it does
@@ -125,10 +126,10 @@ Four lines, and all four are load-bearing:
 The path is relative to the CSS file, so adjust the `../` depth to where your
 `main.css` sits.
 
-**Leaving any of the four out fails quietly:** the build succeeds, the
+**Leaving any of these out fails quietly:** the build succeeds, the
 components mount, and they come out unstyled. Nothing type-checks this, so it
 is worth a test — Hibi's `kit-styling.spec.ts` reads its own stylesheet and
-asserts all four, at unit-test speed. Copy it.
+asserts them, at unit-test speed. Copy it.
 
 That test exists because the failure is real: Hibi shipped with the tab bar
 invisible once, and separately spent three versions restating `tokens.css`
@@ -183,12 +184,22 @@ it — the same mistake as a hex inside a component, one axis over.
 }
 ```
 
-### The phone shell
+### The shell
 
-`tokens.css` also carries the geometry of a phone shell — `shell-frame`,
-`page-slide`, `page-auth` and the slide transitions between screens. All of it
-is opt-in: nothing applies unless you put the class on an element, so a wide
-app can ignore it. Two of the three consumers use it.
+Tokens are what every app needs. A shell is a decision about what shape the app
+is, so it is a separate import and there are two of them.
+
+|                            |                                                                                                                                                                      |
+| -------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `rei-kit/shell/mobile.css` | `shell-frame` (a 430px column at viewport height), `page-slide` and `page-auth` scroll containers, and the sliding transition between screens                        |
+| `rei-kit/shell/web.css`    | `.shell` — the page's column as a class, for a header or footer whose bar spans the window while its contents line up with the text — and a short fade between pages |
+
+Both are opt-in throughout: nothing applies until a class lands on an element,
+and both read `--measure-page` rather than declaring a width of their own.
+
+They were one file until 0.9.0, and it was `tokens.css` — so a wide course site
+downloaded a 430px column, a full-viewport height and an iOS sheet curve in
+order to ignore them, and had no counterpart of its own.
 
 ### Prerendering
 

package/dist/index.js

@@ -2385,7 +2385,7 @@ function createI18nRuntime(options) {
 *
 * The fallback keeps `vitest` and `vite dev` honest, where no define runs.
 */
-var VERSION = "0.8.0";
+var VERSION = "0.9.0";
 //#endregion
 export { AppError, BaseAlert_default as BaseAlert, BaseBadge_default as BaseBadge, BaseButton_default as BaseButton, BaseCard_default as BaseCard, BaseCheckbox_default as BaseCheckbox, BaseInput_default as BaseInput, BaseRadioGroup_default as BaseRadioGroup, BaseSelect_default as BaseSelect, BaseSheet_default as BaseSheet, BaseTextarea_default as BaseTextarea, EmptyState_default as EmptyState, ErrorBoundary_default as ErrorBoundary, FormField_default as FormField, GoogleButton_default as GoogleButton, LocaleLinks_default as LocaleLinks, PageContainer_default as PageContainer, PageHeader_default as PageHeader, PriceCard_default as PriceCard, ProgressBar_default as ProgressBar, SectionHeading_default as SectionHeading, SegmentedControl_default as SegmentedControl, SettingsGroup_default as SettingsGroup, SettingsRow_default as SettingsRow, SkeletonList_default as SkeletonList, StatCard_default as StatCard, TabBar_default as TabBar, ToastHost_default as ToastHost, ToneDot_default as ToneDot, VERSION, addDays, applyTheme, createI18nRuntime, downloadJson, eachDayOfYear, formatDate, fromDateKey, isApplePortable, isInstalled, isThemePreference, lastNDays, leadingBlanks, needsIosInstall, readStoredTheme, registerErrorMapper, relativeDayLabel, safeRedirect, setFormatLocale, setThemeStorageKey, startOfWeek, tapFeedback, toAppError, toDateKey, todayKey, useDebouncedCallback, useDragScroll, useMediaQuery, useOnline, useTheme, useToast, useToday, useVisualViewport };
 

package/dist/shell/mobile.css

@@ -0,0 +1,93 @@
+/* rei-kit — the phone shell.
+ *
+ * Split out of `tokens.css` in 0.9.0. It had been shipped to every consumer
+ * including a wide site that used none of it: a 430px column, a full-viewport
+ * height and an iOS sheet curve, downloaded by a course site so it could
+ * ignore them. Tokens are what every app needs; a shell is a decision about
+ * what shape the app is.
+ *
+ * Import it alongside the tokens when the app is phone-shaped:
+ *
+ *   @import 'rei-kit/tokens.css';
+ *   @import 'rei-kit/shell/mobile.css';
+ *
+ * Everything here is opt-in. Nothing applies until a class lands on an element.
+ */
+
+@layer components {
+  /* Geometry of the phone shell. Shared by the shell itself and by overlays
+   that must line up with it (BaseSheet teleports outside the app tree). */
+  .shell-frame {
+    height: 100dvh;
+    @apply w-full max-w-[430px] md:h-[880px] md:max-h-[92vh];
+  }
+
+  /* ---- Screen wrapper ----
+   Lands on every view's root element (see App.vue), so this is the one place
+   that owns the scroll box, the side gutter and the room the floating tab bar
+   needs at the bottom. Views only decide their own inner layout. */
+  /* Auth screens have no tab bar and no action button, so they get none of the
+   bottom clearance the app screens need. */
+  .page-auth {
+    @apply no-scrollbar h-full w-full overflow-y-auto px-4;
+  }
+
+  .page-slide {
+    /* pb clears the floating tab bar and the action button above it, so the
+     last row of any list stays reachable. */
+    @apply no-scrollbar h-full w-full overflow-y-auto px-4 pb-44;
+  }
+
+  .slide-forward-enter-active,
+  .slide-forward-leave-active,
+  .slide-backward-enter-active,
+  .slide-backward-leave-active {
+    position: absolute;
+    inset: 0;
+    will-change: transform, opacity;
+    /* iOS sheet curve: quick take-off, long soft landing. */
+    transition:
+      transform 340ms cubic-bezier(0.32, 0.72, 0, 1),
+      opacity 340ms cubic-bezier(0.32, 0.72, 0, 1),
+      filter 340ms cubic-bezier(0.32, 0.72, 0, 1);
+  }
+
+  /* The incoming screen travels the full width; the outgoing one moves a
+   quarter of it and dims. The speed difference reads as depth. */
+  .slide-forward-enter-from {
+    transform: translate3d(100%, 0, 0);
+  }
+  .slide-forward-leave-to {
+    transform: translate3d(-25%, 0, 0) scale(0.96);
+    opacity: 0;
+    filter: brightness(0.92);
+  }
+
+  .slide-backward-enter-from {
+    transform: translate3d(-100%, 0, 0);
+  }
+  .slide-backward-leave-to {
+    transform: translate3d(25%, 0, 0) scale(0.96);
+    opacity: 0;
+    filter: brightness(0.92);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .slide-forward-enter-active,
+  .slide-forward-leave-active,
+  .slide-backward-enter-active,
+  .slide-backward-leave-active {
+    /* Not 0ms: some browsers never fire transitionend at zero, which would
+       leave Vue waiting before removing the element. */
+    transition-duration: 1ms;
+  }
+
+  .slide-forward-enter-from,
+  .slide-backward-enter-from,
+  .slide-forward-leave-to,
+  .slide-backward-leave-to {
+    transform: none;
+    filter: none;
+  }
+}

package/dist/shell/web.css

@@ -0,0 +1,78 @@
+/* rei-kit — the wide shell.
+ *
+ * The counterpart to `shell/mobile.css`, for an app that is a site rather than
+ * a phone: a column with gutters, and a transition between pages that is a
+ * fade rather than a slide.
+ *
+ * Extracted from the kit's first wide consumer rather than invented. A shell
+ * is a decision about what shape the app is, and this one had already been
+ * made and written down once.
+ *
+ *   @import 'rei-kit/tokens.css';
+ *   @import 'rei-kit/shell/web.css';
+ *
+ * Opt-in throughout. Nothing applies until a class lands on an element.
+ */
+
+@layer components {
+  /* The page's column, as a class.
+   *
+   * `PageContainer` is the same measure as a component, and is the right
+   * choice when the container is the element. This is for the ones where it is
+   * not: a `<header>` whose bar spans the window while its contents line up
+   * with the text, a `<footer>`, a hero that paints edge to edge. Wrapping
+   * those in a component means an extra div whose only job is a max-width.
+   *
+   * Both read `--measure-page`, so a page cannot disagree with itself by 80px
+   * depending on which one it used. */
+  .shell {
+    margin-inline: auto;
+    inline-size: 100%;
+    max-inline-size: var(--measure-page);
+    padding-inline: 1.25rem;
+  }
+
+  @media (min-width: 640px) {
+    .shell {
+      padding-inline: 2rem;
+    }
+  }
+}
+
+/* ---- Between pages ----
+   Short, and only ever a fade with a few pixels of travel. A page transition
+   that can be described afterwards is too long: the reader asked to go
+   somewhere, and the animation's whole job is to stop the new page arriving as
+   a flash of unrelated content.
+
+   Leaving is half the length of arriving. The old page is not worth watching,
+   and matching the two makes every navigation feel like it is being
+   considered. */
+.page-enter-active {
+  transition:
+    opacity 260ms ease-out,
+    transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.page-leave-active {
+  transition:
+    opacity 130ms ease-in,
+    transform 130ms ease-in;
+}
+
+.page-enter-from {
+  opacity: 0;
+  transform: translateY(8px);
+}
+
+.page-leave-to {
+  opacity: 0;
+  transform: translateY(-4px);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .page-enter-active,
+  .page-leave-active {
+    transition: none;
+  }
+}

package/dist/tokens.css

@@ -67,85 +67,3 @@
 @utility pb-safe {
   padding-bottom: calc(var(--pb-safe, 0px) + env(safe-area-inset-bottom, 0px));
 }
-
-/* ── The phone shell ────────────────────────────────────────────────────────
-   Geometry shared by the shell and by anything that has to line up with it —
-   a sheet teleported outside the app tree, for instance. Opt in by putting
-   .shell-frame on the container; nothing here applies on its own. */
-@layer components {
-  /* Geometry of the phone shell. Shared by the shell itself and by overlays
-   that must line up with it (BaseSheet teleports outside the app tree). */
-  .shell-frame {
-    height: 100dvh;
-    @apply w-full max-w-[430px] md:h-[880px] md:max-h-[92vh];
-  }
-
-  /* ---- Screen wrapper ----
-   Lands on every view's root element (see App.vue), so this is the one place
-   that owns the scroll box, the side gutter and the room the floating tab bar
-   needs at the bottom. Views only decide their own inner layout. */
-  /* Auth screens have no tab bar and no action button, so they get none of the
-   bottom clearance the app screens need. */
-  .page-auth {
-    @apply no-scrollbar h-full w-full overflow-y-auto px-4;
-  }
-
-  .page-slide {
-    /* pb clears the floating tab bar and the action button above it, so the
-     last row of any list stays reachable. */
-    @apply no-scrollbar h-full w-full overflow-y-auto px-4 pb-44;
-  }
-
-  .slide-forward-enter-active,
-  .slide-forward-leave-active,
-  .slide-backward-enter-active,
-  .slide-backward-leave-active {
-    position: absolute;
-    inset: 0;
-    will-change: transform, opacity;
-    /* iOS sheet curve: quick take-off, long soft landing. */
-    transition:
-      transform 340ms cubic-bezier(0.32, 0.72, 0, 1),
-      opacity 340ms cubic-bezier(0.32, 0.72, 0, 1),
-      filter 340ms cubic-bezier(0.32, 0.72, 0, 1);
-  }
-
-  /* The incoming screen travels the full width; the outgoing one moves a
-   quarter of it and dims. The speed difference reads as depth. */
-  .slide-forward-enter-from {
-    transform: translate3d(100%, 0, 0);
-  }
-  .slide-forward-leave-to {
-    transform: translate3d(-25%, 0, 0) scale(0.96);
-    opacity: 0;
-    filter: brightness(0.92);
-  }
-
-  .slide-backward-enter-from {
-    transform: translate3d(-100%, 0, 0);
-  }
-  .slide-backward-leave-to {
-    transform: translate3d(25%, 0, 0) scale(0.96);
-    opacity: 0;
-    filter: brightness(0.92);
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .slide-forward-enter-active,
-  .slide-forward-leave-active,
-  .slide-backward-enter-active,
-  .slide-backward-leave-active {
-    /* Not 0ms: some browsers never fire transitionend at zero, which would
-       leave Vue waiting before removing the element. */
-    transition-duration: 1ms;
-  }
-
-  .slide-forward-enter-from,
-  .slide-backward-enter-from,
-  .slide-forward-leave-to,
-  .slide-backward-leave-to {
-    transform: none;
-    filter: none;
-  }
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rei-kit",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "Vue 3 and Tailwind 4 design system and shared runtime. Extracted from Hibi.",
   "license": "MIT",
   "author": "Ramazan Doğan",
@@ -21,6 +21,8 @@
       "import": "./dist/index.js"
     },
     "./tokens.css": "./dist/tokens.css",
+    "./shell/mobile.css": "./dist/shell/mobile.css",
+    "./shell/web.css": "./dist/shell/web.css",
     "./styles.css": "./dist/styles.css",
     "./supabase": {
       "types": "./dist/supabase/index.d.ts",