@yourrealm/bottom-sheet 0.0.0-stage → 0.1.0

package/dist/styled.css

@@ -0,0 +1,113 @@
+/*
+ * @yourrealm/bottom-sheet/styled: the preset look, plus the structural CSS it builds on. Import it once, before
+ * Tailwind:  @import "@yourrealm/bottom-sheet/styled.css";
+ */
+@import "./styles.css";
+/*
+ * The polished preset. Override with the --ybs-* tokens.
+ * Light/dark follow the app's `color-scheme` (inherited from <html>), via light-dark(): an app with its own theme
+ * switch that sets `color-scheme` gets a matching sheet; `html { color-scheme: light dark }` follows the OS.
+ */
+@layer ybs {
+:root { --ybs-css-styled: 1; }
+[data-ybs-root] {
+  --ybs-sheet-bg: light-dark(#fff, #1c1c1e);
+  --ybs-sheet-fg: light-dark(#111, #f2f2f7);
+  --ybs-muted: light-dark(#6b6b70, #98989f);
+  --ybs-handle: light-dark(rgba(60, 60, 67, 0.3), rgba(235, 235, 245, 0.3));
+  --ybs-divider: light-dark(rgba(60, 60, 67, 0.12), rgba(235, 235, 245, 0.12));
+  --ybs-radius: 14px;
+  /* Side padding of the body, matching the header. 0 for edge-to-edge lists that pad their own rows. */
+  --ybs-body-padding: 16px;
+  --ybs-backdrop: #000;
+  --ybs-backdrop-max: 0.4;
+  --ybs-max-width: 640px;
+  --ybs-content-width: 960px;
+  --ybs-float-gap: 8px;
+  --ybs-float-radius: 32px;
+  /* 1 within the last 10% of travel to full, else 0..: corners square off as a fullscreen sheet reaches the top. */
+  --ybs-at-top: clamp(0, (var(--ybs-progress, 0) - 0.9) * 10, 1);
+}
+.ybs-backdrop {
+  background: var(--ybs-backdrop);
+  opacity: calc(var(--ybs-progress, 0) * var(--ybs-backdrop-max));
+}
+.ybs-bleed { background: var(--ybs-sheet-bg); }
+/* Stacked sheets: the covered sheet recedes (scales back and lifts slightly), like iOS. */
+.ybs-view { transform-origin: 50% 0; transition: none; }
+[data-ybs-root][data-ybs-covered] .ybs-view {
+  transform: translateY(calc(var(--ybs-covered, 0) * -6px)) scale(calc(1 - var(--ybs-covered, 0) * 0.06));
+  border-radius: var(--ybs-radius);
+}
+[data-ybs-root][data-ybs-covered] .ybs-bleed { opacity: 0; }
+.ybs-sheet {
+  background: var(--ybs-sheet-bg);
+  color: var(--ybs-sheet-fg);
+  border-radius: var(--ybs-radius) var(--ybs-radius) 0 0;
+  box-shadow: 0 -1px 0 var(--ybs-divider), 0 -8px 30px rgba(0, 0, 0, 0.08);
+  padding-bottom: env(safe-area-inset-bottom, 0px);
+  font-family: system-ui, -apple-system, sans-serif;
+  max-width: var(--ybs-max-width); margin-inline: auto;
+}
+/* Full width: the surface spans the window; header and body keep their full width (no corner seams) but pad
+   their contents into a readable centred column. */
+.ybs-sheet.ybs-sheet-full { max-width: none; }
+.ybs-sheet-full > .ybs-header { padding-inline: max(16px, (100% - var(--ybs-content-width)) / 2); }
+.ybs-sheet-full > .ybs-body { padding-inline: max(var(--ybs-body-padding), (100% - var(--ybs-content-width)) / 2); }
+/* A page sheet sits lower than the receded page's top edge (+10px), so a strip of that page shows above it, like iOS. */
+[data-ybs-root]:has(.ybs-sheet-page):not([data-ybs-fullscreen]) { --ybs-inset: calc(env(safe-area-inset-top, 0px) + 22px); }
+/* A page sheet fills the screen at full even when its content is short (no fit-content). */
+.ybs-sheet.ybs-sheet-page { min-height: calc(var(--ybs-vv-h, 100dvh) - var(--ybs-inset)); }
+/* Header bar: leading | title | trailing, the title centred like an iOS navigation bar. */
+.ybs-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
+.ybs-bar > .ybs-title { text-align: center; }
+.ybs-leading { justify-self: start; }
+.ybs-trailing { justify-self: end; }
+/* Floating (iOS 26): at lower detents the sheet floats, inset from the sides and the bottom with large corners;
+   over the last quarter of the travel to full it attaches (the gap closes, the bottom corners slide off-screen).
+   A clip-path, so nothing reflows while the sheet moves. --ybs-visible is the on-screen height of the sheet, so
+   100% - visible is the part below the screen edge. */
+.ybs-sheet.ybs-sheet-floating {
+  --ybs-float: calc(1 - clamp(0, (var(--ybs-progress, 0) - 0.75) * 4, 1));
+  --ybs-g: calc(var(--ybs-float-gap) * var(--ybs-float));
+  --ybs-rt: calc(var(--ybs-radius) + (var(--ybs-float-radius) - var(--ybs-radius)) * var(--ybs-float));
+  --ybs-rb: calc(var(--ybs-float-radius) * var(--ybs-float));
+  clip-path: inset(0 var(--ybs-g) calc((100% - var(--ybs-visible, 0px)) * var(--ybs-float) + var(--ybs-g)) var(--ybs-g)
+    round var(--ybs-rt) var(--ybs-rt) var(--ybs-rb) var(--ybs-rb));
+}
+/* Fullscreen: square corners at the top (they would show the page through), header clear of the notch. */
+[data-ybs-fullscreen] .ybs-sheet, [data-ybs-fullscreen] .ybs-header {
+  --ybs-r: calc(var(--ybs-radius) * (1 - var(--ybs-at-top)));
+  border-radius: var(--ybs-r) var(--ybs-r) 0 0;
+}
+[data-ybs-fullscreen] .ybs-header { padding-top: calc(6px + env(safe-area-inset-top, 0px)); }
+.ybs-header {
+  background: var(--ybs-sheet-bg);
+  border-radius: var(--ybs-radius) var(--ybs-radius) 0 0;
+  padding: 6px 16px 12px;
+  border-bottom: 1px solid var(--ybs-divider);
+  /* Content scrolls under this sticky header; at fractional positions (device scaling, or a covered
+     sheet's scale) a 1px sliver of it can show above. Cover it with the sheet colour. */
+  box-shadow: 0 -2px 0 0 var(--ybs-sheet-bg);
+}
+.ybs-handle {
+  width: 36px; height: 5px; border-radius: 3px;
+  background: var(--ybs-handle);
+  margin: 0 auto 10px;
+}
+.ybs-title { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.3; }
+.ybs-description { margin: 4px 0 0; font-size: 14px; color: var(--ybs-muted); }
+.ybs-body { padding: 0 var(--ybs-body-padding) 12px; }
+/* The page behind recedes (Sheet.Root recede + data-ybs-background on the app wrapper), like iOS: it scales back
+   from the top of the screen, drops below the status bar and rounds its top corners over black. The wrapper needs
+   its own background (html and body turn black). */
+/* !important: our layer loses to the app's own unlayered html/body background, and this must win while receding. */
+html[data-ybs-recede]:has([data-ybs-background]), html[data-ybs-recede]:has([data-ybs-background]) body { background: #000 !important; }
+html[data-ybs-recede] [data-ybs-background] {
+  /* Like iOS, a sheet covering half the screen only dims the page; it recedes as the sheet covers the screen. */
+  --ybs-r: clamp(0, (var(--ybs-recede, 0) - 0.6) * 2.5, 1);
+  transform-origin: 50% var(--ybs-scroll-y, 0px);
+  transform: translateY(calc(var(--ybs-r) * (env(safe-area-inset-top, 0px) + 10px))) scale(calc(1 - var(--ybs-r) * 0.07));
+  clip-path: inset(var(--ybs-scroll-y, 0px) 0 0 0 round calc(var(--ybs-r) * 12px) calc(var(--ybs-r) * 12px) 0 0);
+}
+}

package/dist/styled.d.ts

@@ -0,0 +1,65 @@
+
+import { a as OpenChangeDetails, c as PortalProps, d as Trigger, f as TriggerProps, g as Detent, i as InteractionType, l as Root, m as ViewProps, n as ContentProps, o as OpenChangeReason, p as TriggerRenderProps, r as InitialFocus, s as Portal, t as Close, u as RootProps } from "./sheet-BOTt16RW.js";
+import { ComponentPropsWithRef, ReactElement, ReactNode } from "react";
+/** Styled parts: same API as the headless `Sheet`, with the preset look. */
+export declare const Sheet: {
+  Root: typeof Root;
+  Trigger: typeof Trigger;
+  Close: typeof Close;
+  Portal: typeof Portal;
+  Backdrop: (p: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => import("react").JSX.Element;
+  View: (p: ViewProps) => import("react").JSX.Element;
+  Content: (p: ContentProps) => import("react").JSX.Element;
+  Header: (p: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => import("react").JSX.Element;
+  Handle: (p: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => import("react").JSX.Element;
+  Title: (p: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>) => import("react").JSX.Element;
+  Description: (p: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>) => import("react").JSX.Element;
+};
+export interface BottomSheetProps extends Omit<RootProps, 'children'> {
+  /**
+   * What opens the sheet. Content (text, elements) is placed inside our trigger button. A function renders your own
+   * button instead: `trigger={(props) => <Button variant="paper" {...props}>Open</Button>}` (it receives `type`,
+   * `onClick` and the ARIA state; put className, disabled, aria-label on your button).
+   */
+  trigger?: ReactNode | ((props: TriggerRenderProps) => ReactElement);
+  title: ReactNode;
+  description?: ReactNode;
+  /**
+   * - `'sheet'` (default): detents as given, a card-width sheet.
+   * - `'page'`: an iOS-style page sheet for a task (compose, edit): opens straight to full,
+   *   spans the full width (`width` default `'full'`), and the page behind recedes (`recede` default true; mark your
+   *   app wrapper with `data-ybs-background`). Pair it with `leading` / `trailing` (Cancel / Save).
+   */
+  variant?: 'sheet' | 'page';
+  /**
+   * - `'card'` (default for `sheet`): the sheet is at most 640px wide (`--ybs-max-width`), centred.
+   * - `'full'` (default for `page`): the sheet spans the window; its header and body stay in a centred column
+   *   (`--ybs-content-width`, default 960px).
+   */
+  width?: 'card' | 'full';
+  /**
+   * iOS 26 style: at lower detents the sheet floats (inset from the screen edges, large corners) and attaches as it
+   * reaches full. Tokens: --ybs-float-gap (8px), --ybs-float-radius (32px).
+   */
+  floating?: boolean;
+  /** Header bar slots, iOS navigation-bar style: e.g. `leading={<Sheet.Close>Cancel</Sheet.Close>}`. The title centres between them. */
+  leading?: ReactNode;
+  trailing?: ReactNode;
+  /** Extra content placed in the sticky header under the title (e.g. a search field). */
+  headerExtra?: ReactNode;
+  /**
+   * Where focus goes when the sheet opens, like Base UI's: an element ref, `false`, `true` (the sheet), or a function
+   * of how it was opened, e.g. `(type) => type !== 'touch' && saveRef.current`. Default: the sheet for a modal sheet,
+   * nothing for a non-modal one.
+   */
+  initialFocus?: InitialFocus;
+  children?: ReactNode;
+  className?: string;
+  contentProps?: ComponentPropsWithRef<'section'>;
+}
+/**
+ * The simple path:
+ *   <BottomSheet trigger="Open" title="Settings">…</BottomSheet>
+ */
+export declare function BottomSheet({ trigger, title, description, variant, floating, width, leading, trailing, headerExtra, initialFocus, children, className, contentProps, ...rootProps }: BottomSheetProps): import("react").JSX.Element;
+export type { ContentProps, Detent, InitialFocus, InteractionType, OpenChangeDetails, OpenChangeReason, PortalProps, RootProps, TriggerProps, TriggerRenderProps, ViewProps };

package/dist/styled.js

@@ -0,0 +1,78 @@
+'use client';
+import { a as Handle, c as Root, d as View, i as Description, l as Title, n as Close, o as Header, p as checkCss, r as Content, s as Portal, t as Backdrop, u as Trigger } from "./sheet-BgvWfCR8.js";
+import { useEffect } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/styled/index.tsx
+const cx = (...c) => c.filter(Boolean).join(" ");
+function withClass(Comp, cls) {
+	return (p) => /* @__PURE__ */ jsx(Comp, {
+		...p,
+		className: cx(cls, p.className)
+	});
+}
+/** Styled parts: same API as the headless `Sheet`, with the preset look. */
+const Sheet = {
+	Root,
+	Trigger,
+	Close,
+	Portal,
+	Backdrop: withClass(Backdrop, "ybs-backdrop"),
+	View: (p) => {
+		useEffect(() => checkCss("styled", "styled.css"), []);
+		return /* @__PURE__ */ jsx(View, {
+			...p,
+			className: cx("ybs-view", p.className),
+			bleedClassName: cx("ybs-bleed", p.bleedClassName)
+		});
+	},
+	Content: withClass(Content, "ybs-sheet"),
+	Header: withClass(Header, "ybs-header"),
+	Handle: withClass(Handle, "ybs-handle"),
+	Title: withClass(Title, "ybs-title"),
+	Description: withClass(Description, "ybs-description")
+};
+/**
+* The simple path:
+*   <BottomSheet trigger="Open" title="Settings">…</BottomSheet>
+*/
+function BottomSheet({ trigger, title, description, variant = "sheet", floating = false, width = variant === "page" ? "full" : "card", leading, trailing, headerExtra, initialFocus, children, className, contentProps, ...rootProps }) {
+	const root = variant === "page" ? {
+		recede: true,
+		...rootProps
+	} : rootProps;
+	const bar = leading != null || trailing != null;
+	return /* @__PURE__ */ jsxs(Sheet.Root, {
+		...root,
+		children: [typeof trigger === "function" ? /* @__PURE__ */ jsx(Sheet.Trigger, { render: trigger }) : trigger != null && /* @__PURE__ */ jsx(Sheet.Trigger, {
+			className: "ybs-trigger",
+			children: trigger
+		}), /* @__PURE__ */ jsxs(Sheet.Portal, { children: [root.modal !== false && /* @__PURE__ */ jsx(Sheet.Backdrop, {}), /* @__PURE__ */ jsx(Sheet.View, { children: /* @__PURE__ */ jsxs(Sheet.Content, {
+			...contentProps,
+			initialFocus,
+			className: cx(width === "full" && "ybs-sheet-full", variant === "page" && "ybs-sheet-page", floating && "ybs-sheet-floating", className, contentProps?.className),
+			children: [/* @__PURE__ */ jsxs(Sheet.Header, { children: [
+				/* @__PURE__ */ jsx(Sheet.Handle, {}),
+				bar ? /* @__PURE__ */ jsxs("div", {
+					className: "ybs-bar",
+					children: [
+						/* @__PURE__ */ jsx("div", {
+							className: "ybs-leading",
+							children: leading
+						}),
+						/* @__PURE__ */ jsx(Sheet.Title, { children: title }),
+						/* @__PURE__ */ jsx("div", {
+							className: "ybs-trailing",
+							children: trailing
+						})
+					]
+				}) : /* @__PURE__ */ jsx(Sheet.Title, { children: title }),
+				description != null && /* @__PURE__ */ jsx(Sheet.Description, { children: description }),
+				headerExtra
+			] }), /* @__PURE__ */ jsx("div", {
+				className: "ybs-body",
+				children
+			})]
+		}) })] })]
+	});
+}
+export { BottomSheet, Sheet };

package/dist/styles.css

@@ -0,0 +1,97 @@
+/*
+ * @yourrealm/bottom-sheet: structural CSS (the mechanics: overlay, scroller, snapping). Import it once, before
+ * Tailwind:  @import "@yourrealm/bottom-sheet/styles.css";  (or styled.css, which includes it).
+ * Everything is in the `ybs` cascade layer, ordered between Tailwind v4's `base` and `components`, so preflight
+ * can't reset it and your utilities and unlayered CSS win. The order statement only counts if this comes first.
+ */
+/*
+ * Structural CSS only: the mechanics that make the single-scroller sheet work.
+ * No colours, radii or spacing; those belong to the consumer or `/styled`.
+ *
+ * CSS variables set by the controller on [data-ybs-root]:
+ *   --ybs-h         available height (px)
+ *   --ybs-vv-top    visualViewport.offsetTop (px)
+ *   --ybs-vv-h      visualViewport.height (px)
+ *   --ybs-progress  0..1, closed -> full
+ *   --ybs-visible   px of the sheet on screen (scrollTop, capped at full)
+ *   --ybs-bleed     0|1, whether the bleed (sheet colour under the visual viewport) shows
+ * Consumer-settable:
+ *   --ybs-inset     gap above the sheet at the full detent (default: safe area + 10px; 0 with fullscreen)
+ *   --ybs-sheet-bg  colour of the bleed, should match the sheet
+ */
+@layer theme, base, ybs, components, utilities;
+@layer ybs {
+/* Marker: tells the library this file is loaded (it logs an error when a sheet opens without it). */
+:root { --ybs-css-core: 1; }
+[data-ybs-root] {
+  --ybs-inset: calc(env(safe-area-inset-top, 0px) + 10px);
+  position: fixed; inset: 0; z-index: 50; pointer-events: none;
+}
+[data-ybs-root][data-ybs-fullscreen] { --ybs-inset: 0px; }
+/* Fullscreen means the full detent covers the screen, even with short content. */
+[data-ybs-root][data-ybs-fullscreen] [data-ybs-sheet] { min-height: calc(var(--ybs-vv-h, 100dvh) - var(--ybs-inset)); }
+[data-ybs-backdrop] {
+  position: fixed; left: 0; right: 0; top: var(--ybs-vv-top, 0px); height: 200lvh;
+  pointer-events: auto;
+}
+[data-ybs-bleed] {
+  position: fixed; left: 0; right: 0; height: 100lvh;
+  top: calc(var(--ybs-vv-top, 0px) + var(--ybs-vv-h, 100dvh));
+  background: var(--ybs-sheet-bg, Canvas);
+  opacity: var(--ybs-bleed, 0);
+}
+[data-ybs-scroller] {
+  position: fixed; left: 0; right: 0;
+  top: calc(var(--ybs-vv-top, 0px) + var(--ybs-inset));
+  height: calc(var(--ybs-vv-h, 100dvh) - var(--ybs-inset));
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scroll-snap-type: y mandatory;
+  scrollbar-width: none;
+  pointer-events: auto;
+}
+[data-ybs-scroller]::-webkit-scrollbar { display: none; }
+[data-ybs-root][data-ybs-drag] [data-ybs-scroller],
+[data-ybs-root][data-ybs-glide] [data-ybs-scroller] { scroll-snap-type: none; }
+[data-ybs-track] { position: relative; }
+[data-ybs-spacer] { height: var(--ybs-h, 100dvh); touch-action: none; }
+[data-ybs-markers] { position: absolute; top: 0; left: 0; width: 1px; height: 0; }
+[data-ybs-marker] {
+  position: absolute; left: 0; width: 1px; height: 1px;
+  scroll-snap-align: start; pointer-events: none;
+}
+/* scroll-snap-stop: a fling may not skip the full position, in either direction. This is the native
+   way to stop momentum at the content top / full detent; the JS guard is only a fallback. (Firefox
+   Android: the JS overflow toggle made the next touch get swallowed as a "stop the fling" tap.) */
+[data-ybs-sheet] { position: relative; scroll-snap-align: start; scroll-snap-stop: always; outline: none; }
+[data-ybs-root][data-ybs-fit] [data-ybs-sheet] { scroll-snap-align: end; }
+[data-ybs-header] { position: sticky; top: 0; z-index: 1; }
+/* Content scrolled: a drag on the header moves the whole sheet (JS, "detached drag"), like native, instead of
+   scrolling the content back first. */
+[data-ybs-root][data-ybs-scrolled] [data-ybs-drag] { touch-action: none; }
+/* Non-modal: the layer lets taps, clicks and wheel through to the page; only the sheet takes them. A drag on
+   the sheet still scrolls the scroller (its scroll container), which is how the sheet moves. */
+[data-ybs-root][data-ybs-modeless] [data-ybs-scroller] { pointer-events: none; }
+[data-ybs-root][data-ybs-modeless] [data-ybs-sheet] { pointer-events: auto; }
+/* iOS Safari won't scroll a pointer-events:none scroller from a touch on its pointer-events:auto child unless
+   there is a scroll container under the finger. Make each direct part of the sheet a 1px-wide horizontal
+   scroller (overflow-y stays clipped to its own height, so sticky headers keep sticking to the scroller); the
+   vertical drag then chains to the sheet scroller. WebKit touch only. */
+@supports (-webkit-touch-callout: none) {
+  [data-ybs-root][data-ybs-modeless] [data-ybs-sheet] > * {
+    overflow-x: scroll; overflow-y: hidden; overscroll-behavior-x: none; scrollbar-width: none;
+  }
+  [data-ybs-root][data-ybs-modeless] [data-ybs-sheet] > *::-webkit-scrollbar { display: none; }
+  /* 1px of horizontal overflow, measured from the padding box so side padding can't absorb it. */
+  [data-ybs-root][data-ybs-modeless] [data-ybs-sheet] > *:not([data-ybs-header]) { position: relative; }
+  [data-ybs-root][data-ybs-modeless] [data-ybs-sheet] > *::after {
+    content: ''; position: absolute; top: 0; left: 0; width: calc(100% + 1px); height: 1px; pointer-events: none;
+  }
+}
+/* Stacked: a covered sheet is inert (set by the sheet above), so it can't be scrolled. Don't toggle its
+   overflow: Firefox re-snaps on overflow changes. The visual recede lives in /styled. */
+@media (pointer: fine) {
+  [data-ybs-drag] { cursor: grab; user-select: none; -webkit-user-select: none; }
+  [data-ybs-root][data-ybs-drag="active"] [data-ybs-drag] { cursor: grabbing; }
+}
+}

package/package.json

@@ -1,6 +1,65 @@
 {
   "name": "@yourrealm/bottom-sheet",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0",
+  "description": "Native-feeling bottom sheet for the web. One native scroller for sheet travel and content.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/yourrealm/bottom-sheet.git",
+    "directory": "packages/bottom-sheet"
+  },
+  "homepage": "https://yourrealm.github.io/bottom-sheet/",
+  "bugs": "https://github.com/yourrealm/bottom-sheet/issues",
+  "keywords": [
+    "react",
+    "bottom-sheet",
+    "sheet",
+    "drawer",
+    "scroll-snap",
+    "mobile",
+    "headless"
+  ],
+  "type": "module",
+  "types": "./dist/index.d.ts",
+  "sideEffects": [
+    "*.css"
+  ],
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styled": {
+      "types": "./dist/styled.d.ts",
+      "import": "./dist/styled.js"
+    },
+    "./package.json": "./package.json",
+    "./styles.css": "./dist/styles.css",
+    "./styled.css": "./dist/styled.css"
+  },
+  "peerDependencies": {
+    "react": ">=19",
+    "react-dom": ">=19"
+  },
+  "devDependencies": {
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.2.0",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1",
+    "tsdown": "^0.23.4",
+    "typescript": "^7.0.2",
+    "vitest": "^5.0.5"
+  },
+  "scripts": {
+    "build": "tsdown && node scripts/build-css.mjs",
+    "test": "vitest run",
+    "typecheck": "tsc -p .",
+    "pack:check": "node scripts/prepack.mjs && pnpm build && pnpm pack; rm -f README.md LICENSE",
+    "release": "node scripts/prepack.mjs && pnpm build && pnpm publish --access public; rm -f README.md LICENSE"
+  }
 }