rei-kit 0.8.0 → 0.9.1

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.1",
   "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",