neba 1.2.0 → 1.4.0

package/dist/internal/mockup.d.ts

@@ -0,0 +1,193 @@
+/**
+ * The device a Mockup is a picture of: the tables that say how big it is, and
+ * the drawings that go on its screen.
+ *
+ * It lives here for the reason `internal/color.ts` does. Only one component
+ * reads it, but what it holds is a body of reference data rather than a piece of
+ * that component — five resolutions per device, three shells, six systems' worth
+ * of chrome — and a component file with all of that in it would be a table with
+ * a `forwardRef` at the bottom.
+ *
+ * Two conventions run through the whole file:
+ *
+ * **Every length in here is a device pixel.** The screen is laid out at the
+ * resolution it claims to have and the whole frame is scaled once, at the top,
+ * so a 54px status bar is 54px on the phone rather than 54px on the page. That
+ * is also why the geometry is written as inline styles rather than as utilities:
+ * these are numbers off a table, computed per render, and Tailwind only ever
+ * sees class names that appear literally in the source. Utilities are still what
+ * does the layout — the inline styles are only ever the measurements.
+ *
+ * **The chrome draws no words except the clock.** A menu bar's titles, a dock's
+ * icons and a status bar's carrier are abstract shapes, which is what keeps this
+ * an impression of a system rather than a copy of one: nothing to translate,
+ * nothing to redraw when a version ships, and no other party's marks in the
+ * library. The clock is the exception because a blank rectangle where the time
+ * goes reads as a bug, and it is a prop.
+ */
+import * as React from 'react';
+import type { NebaSize } from '../types';
+/** Which machine the mockup is a picture of. */
+export type NebaMockupDevice = 'desktop' | 'tablet' | 'mobile';
+/**
+ * The system whose chrome is drawn on the screen.
+ *
+ * One union across all three devices rather than one per device: a caller
+ * reading the type should see the whole set, and a device offered an OS that is
+ * not its own falls back to its default rather than failing to compile — which
+ * is the behaviour a single `Mockup` with a `device` prop has to have anyway.
+ */
+export type NebaMockupOs = 'macos' | 'windows' | 'linux' | 'ios' | 'ipados' | 'android';
+/** What the hardware around a desktop screen is. */
+export type NebaMockupHardware = 'monitor' | 'laptop';
+/**
+ * The camera cut-out at the top of a screen.
+ *
+ * Hardware, not chrome — it is drawn whether or not `systemUi` is on, because a
+ * phone with the status bar hidden still has a hole in its screen.
+ */
+export type NebaMockupNotch = 'none' | 'notch' | 'dynamic-island' | 'punch-hole';
+/**
+ * How much hardware there is around the screen.
+ *
+ * `none` is not a thinner bezel — it is no hardware at all: no frame, no stand,
+ * no laptop base, just the screen with its corners cut. It is what a mockup that
+ * only wants to say "this is a phone-shaped viewport" asks for.
+ *
+ * `thick` is an older device rather than a wider version of `standard`: the
+ * sides stay narrow and the forehead and chin grow, which is where a bezel
+ * actually goes when there is a lot of it.
+ */
+export type NebaMockupBezel = 'none' | 'thin' | 'standard' | 'thick';
+/** What the hardware is made of. */
+export type NebaMockupFinish = 'graphite' | 'silver' | 'white';
+/**
+ * Which way a handheld is held.
+ *
+ * `portrait`/`landscape` rather than `NebaOrientation`'s `vertical`/`horizontal`,
+ * and this is the one place the library spells the idea twice on purpose. A
+ * Divider running horizontally is not "landscape", and a device held upright is
+ * not "vertical" in any vocabulary a designer or a media query uses. CSS itself
+ * keeps both pairs for exactly this reason.
+ */
+export type NebaMockupOrientation = 'portrait' | 'landscape';
+/** A screen's logical resolution, in CSS pixels. */
+export interface NebaMockupResolution {
+    width: number;
+    height: number;
+}
+/**
+ * The system a device will actually draw.
+ *
+ * An OS the device does not run falls back to its default, with one nicety: a
+ * caller who writes `ios` on a tablet or `ipados` on a phone meant the Apple one
+ * and gets it, rather than being sent back to the start of the list.
+ */
+export declare function resolveOs(device: NebaMockupDevice, os?: NebaMockupOs): NebaMockupOs;
+/** What a device puts in its screen when the caller says nothing. */
+export declare function defaultNotch(device: NebaMockupDevice, os: NebaMockupOs): NebaMockupNotch;
+export declare const resolutions: Record<NebaMockupDevice, Record<NebaSize, NebaMockupResolution>>;
+/** How much hardware sits on each side of the screen. */
+export interface MockupInset {
+    x: number;
+    top: number;
+    bottom: number;
+}
+/** Every number the component needs to lay a device out, in device pixels. */
+export interface MockupMetrics {
+    /** The screen, after `orientation` has had its say. */
+    screen: NebaMockupResolution;
+    /** The hardware around it. Zero on all four sides when `bezel` is `none`. */
+    bezel: MockupInset;
+    /** Screen plus bezel: the part you would call the device's face. */
+    body: {
+        width: number;
+        height: number;
+    };
+    /** Face plus whatever holds it up. This is what gets scaled to fit. */
+    frame: {
+        width: number;
+        height: number;
+    };
+    frameRadius: number;
+    screenRadius: number;
+    /** A monitor's neck and foot, when there is one. */
+    stand: {
+        neckWidth: number;
+        neckHeight: number;
+        footWidth: number;
+        footHeight: number;
+    } | null;
+    /** A laptop's base, when there is one. */
+    base: {
+        width: number;
+        height: number;
+        lipWidth: number;
+    } | null;
+}
+export declare function mockupMetrics(options: {
+    device: NebaMockupDevice;
+    size: NebaSize;
+    resolution?: NebaMockupResolution;
+    orientation: NebaMockupOrientation;
+    bezel: NebaMockupBezel;
+    hardware: NebaMockupHardware;
+}): MockupMetrics;
+export declare const finishSlots: Record<NebaMockupFinish, React.CSSProperties>;
+/**
+ * The hardware's surface: the finish, a light top edge and a hairline all the
+ * way round, which is the plate the design language puts on everything else. No
+ * dark bevel underneath — the shade is a ring, not a shadow.
+ */
+export declare const shellClasses = "bg-(--n-shell) [box-shadow:inset_0_1px_0_var(--n-shell-edge),inset_0_0_0_1px_var(--n-shell-shade)]";
+/** How far off the page the whole device sits, as a silhouette rather than a box.
+ *
+ *  `drop-shadow` rather than `box-shadow` for one reason: the shadow has to
+ *  follow a rounded lid on a narrow neck on a wide foot, and a box-shadow would
+ *  draw the rectangle that contains all three. It also sits outside the scale,
+ *  so a device shrunk to a third of its size does not get a third of its shadow.
+ */
+export declare const elevationFilters: readonly ["none", "drop-shadow(0 1px 2px var(--neba-shadow-ambient))", "drop-shadow(0 2px 4px var(--neba-shadow-ambient)) drop-shadow(0 8px 12px var(--neba-shadow-ambient))", "drop-shadow(0 4px 6px var(--neba-shadow-ambient)) drop-shadow(0 18px 28px var(--neba-shadow-ambient))"];
+/**
+ * The camera, drawn on the glass.
+ *
+ * Portrait puts it against the top edge and landscape against the leading one,
+ * which is where it goes on a real device turned the same way — and it is why
+ * the island does not collide with the status bar in landscape: it has moved out
+ * from under it.
+ */
+export declare function MockupCutout({ notch, screen, landscape }: {
+    notch: NebaMockupNotch;
+    screen: NebaMockupResolution;
+    landscape: boolean;
+}): React.JSX.Element | null;
+/** What a system puts on the screen, and how much room it takes. */
+export interface MockupChrome {
+    top?: {
+        size: number;
+        node: React.ReactNode;
+    };
+    bottom?: {
+        size: number;
+        node: React.ReactNode;
+    };
+    /** A dock down the leading edge. Only Linux has one. */
+    start?: {
+        size: number;
+        node: React.ReactNode;
+    };
+}
+/**
+ * The bars, per system.
+ *
+ * Each one takes its own space rather than floating over the content: a caller
+ * putting a screenshot in a mockup wants all of the screenshot, and a status bar
+ * that covered the top of it would be a crop nobody asked for. The cut-out is
+ * the exception, because that one really is a hole in the glass.
+ */
+export declare function mockupChrome(options: {
+    os: NebaMockupOs;
+    notch: NebaMockupNotch;
+    landscape: boolean;
+    time: string;
+}): MockupChrome;

package/dist/internal/mockup.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t}from"react/jsx-runtime";const i={desktop:["macos","windows","linux"],tablet:["ipados","android"],mobile:["ios","android"]};export function resolveOs(e,t){const n=i[e];return t&&n.includes(t)?t:"ios"===t&&"tablet"===e?"ipados":"ipados"===t&&"mobile"===e?"ios":n[0]}export function defaultNotch(e,t){return"mobile"!==e?"none":"android"===t?"punch-hole":"dynamic-island"}export const resolutions={mobile:{xs:{width:320,height:568},sm:{width:360,height:780},md:{width:390,height:844},lg:{width:414,height:896},xl:{width:430,height:932}},tablet:{xs:{width:744,height:1133},sm:{width:768,height:1024},md:{width:820,height:1180},lg:{width:834,height:1194},xl:{width:1024,height:1366}},desktop:{xs:{width:1024,height:640},sm:{width:1280,height:800},md:{width:1440,height:900},lg:{width:1680,height:1050},xl:{width:1920,height:1200}}};const n={mobile:{thin:{bezel:{x:8,top:8,bottom:8},frameRadius:50,screenRadius:42},standard:{bezel:{x:13,top:13,bottom:13},frameRadius:56,screenRadius:43},thick:{bezel:{x:16,top:62,bottom:62},frameRadius:40,screenRadius:4}},tablet:{thin:{bezel:{x:12,top:12,bottom:12},frameRadius:34,screenRadius:22},standard:{bezel:{x:20,top:20,bottom:20},frameRadius:42,screenRadius:22},thick:{bezel:{x:28,top:74,bottom:74},frameRadius:36,screenRadius:4}},desktop:{thin:{bezel:{x:8,top:8,bottom:8},frameRadius:12,screenRadius:4},standard:{bezel:{x:13,top:13,bottom:30},frameRadius:16,screenRadius:4},thick:{bezel:{x:22,top:22,bottom:62},frameRadius:18,screenRadius:3}}},a={mobile:42,tablet:24,desktop:8};export function mockupMetrics(e){const{device:t,size:i,resolution:r,orientation:d,bezel:h,hardware:s}=e,o=r??resolutions[t][i],l="desktop"!==t&&"landscape"===d,c=l?{width:o.height,height:o.width}:o;if("none"===h)return{screen:c,bezel:{x:0,top:0,bottom:0},body:{...c},frame:{...c},frameRadius:a[t],screenRadius:a[t],stand:null,base:null};const u=n[t][h],g=l?{x:u.bezel.top,top:u.bezel.x,bottom:u.bezel.x}:u.bezel,p="desktop"===t&&"laptop"===s,m=p?{...g,bottom:g.top}:g,x={width:c.width+2*m.x,height:c.height+m.top+m.bottom};if("desktop"!==t)return{screen:c,bezel:m,body:x,frame:{...x},frameRadius:u.frameRadius,screenRadius:u.screenRadius,stand:null,base:null};if(p){const e={width:Math.round(1.075*x.width),height:Math.round(.035*x.height),lipWidth:Math.round(.12*x.width)};return{screen:c,bezel:m,body:x,frame:{width:e.width,height:x.height+e.height},frameRadius:u.frameRadius,screenRadius:u.screenRadius,stand:null,base:e}}const b={neckWidth:Math.round(.11*x.width),neckHeight:Math.round(.09*x.height),footWidth:Math.round(.28*x.width),footHeight:Math.round(.018*x.height)};return{screen:c,bezel:m,body:x,frame:{width:x.width,height:x.height+b.neckHeight+b.footHeight},frameRadius:u.frameRadius,screenRadius:u.screenRadius,stand:b,base:null}}export const finishSlots={graphite:{"--n-shell":"oklch(27% 0.008 262)","--n-shell-edge":"rgb(255 255 255 / 0.16)","--n-shell-shade":"oklch(17% 0.008 262)"},silver:{"--n-shell":"oklch(83% 0.004 262)","--n-shell-edge":"rgb(255 255 255 / 0.75)","--n-shell-shade":"oklch(66% 0.006 262)"},white:{"--n-shell":"oklch(96% 0.002 262)","--n-shell-edge":"rgb(255 255 255 / 0.9)","--n-shell-shade":"oklch(80% 0.004 262)"}};export const shellClasses="bg-(--n-shell) [box-shadow:inset_0_1px_0_var(--n-shell-edge),inset_0_0_0_1px_var(--n-shell-shade)]";export const elevationFilters=["none","drop-shadow(0 1px 2px var(--neba-shadow-ambient))","drop-shadow(0 2px 4px var(--neba-shadow-ambient)) drop-shadow(0 8px 12px var(--neba-shadow-ambient))","drop-shadow(0 4px 6px var(--neba-shadow-ambient)) drop-shadow(0 18px 28px var(--neba-shadow-ambient))"];export function MockupCutout({notch:t,screen:i,landscape:n}){if("none"===t)return null;const a=n?i.height:i.width,r={position:"absolute",background:"oklch(12% 0.006 262)",pointerEvents:"none",zIndex:20},d="neba-mockup-cutout";if("punch-hole"===t){const t=Math.max(16,Math.round(.07*a)),i=Math.round(.55*t);return e("div",{"aria-hidden":"true",className:d,style:{...r,width:t,height:t,borderRadius:"50%",...n?{left:i,top:"50%",marginTop:-t/2}:{top:i,left:"50%",marginLeft:-t/2}}})}if("dynamic-island"===t){const t=Math.max(96,Math.round(.32*a)),i=Math.round(.29*t),h=Math.round(.32*i);return e("div",{"aria-hidden":"true",className:d,style:{...r,borderRadius:i,...n?{left:h,top:"50%",width:i,height:t,marginTop:-t/2}:{top:h,left:"50%",width:t,height:i,marginLeft:-t/2}}})}const h=Math.max(120,Math.round(.42*a)),s=Math.round(.23*h),o=Math.round(.6*s);return e("div",{"aria-hidden":"true",className:d,style:{...r,...n?{left:0,top:"50%",width:s,height:h,marginTop:-h/2,borderRadius:`0 ${o}px ${o}px 0`}:{top:0,left:"50%",width:h,height:s,marginLeft:-h/2,borderRadius:`0 0 ${o}px ${o}px`}}})}const r="relative z-10 flex shrink-0 items-center [background:color-mix(in_oklab,var(--neba-surface)_88%,transparent)]",d="font-medium text-(--neba-fg) tabular-nums";function h({width:t,height:i,radius:n,tone:a="muted"}){return e("div",{style:{width:t,height:i??t,borderRadius:n,background:"accent"===a?"var(--n-accent)":"faint"===a?"color-mix(in oklab, var(--neba-fg) 12%, transparent)":"color-mix(in oklab, var(--neba-fg) 26%, transparent)"}})}function s({count:t,size:i,radius:n,gap:a,accent:r=!1}){return e("div",{className:"flex items-center",style:{gap:a},children:Array.from({length:t},(t,a)=>e(h,{width:i,radius:n,tone:r&&0===a?"accent":"muted"},a))})}function o({height:i}){return t("svg",{viewBox:"0 0 17 11",height:i,width:17*i/11,fill:"currentColor","aria-hidden":"true",children:[e("rect",{y:"7.5",width:"3",height:"3.5",rx:"1"}),e("rect",{x:"4.7",y:"5",width:"3",height:"6",rx:"1"}),e("rect",{x:"9.4",y:"2.5",width:"3",height:"8.5",rx:"1"}),e("rect",{x:"14",width:"3",height:"11",rx:"1",opacity:"0.35"})]})}function l({height:i}){return t("svg",{viewBox:"0 0 16 12",height:i,width:16*i/12,fill:"none","aria-hidden":"true",children:[e("path",{d:"M1 4.2a10.5 10.5 0 0 1 14 0",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round"}),e("path",{d:"M3.6 7a6.8 6.8 0 0 1 8.8 0",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round"}),e("circle",{cx:"8",cy:"10.2",r:"1.6",fill:"currentColor"})]})}function c({height:i}){return t("svg",{viewBox:"0 0 25 12",height:i,width:25*i/12,fill:"none","aria-hidden":"true",children:[e("rect",{x:"0.7",y:"0.7",width:"20.6",height:"10.6",rx:"3.2",stroke:"currentColor",strokeWidth:"1.3",opacity:"0.45"}),e("rect",{x:"2.6",y:"2.6",width:"12.8",height:"6.8",rx:"1.8",fill:"currentColor"}),e("rect",{x:"22.8",y:"4",width:"1.8",height:"4",rx:"0.9",fill:"currentColor",opacity:"0.45"})]})}function u({height:i,gap:n}){return t("div",{className:"flex items-center text-(--neba-fg)",style:{gap:n},children:[e(o,{height:i}),e(l,{height:i}),e(c,{height:i})]})}function g({size:i,gap:n}){return t("div",{className:"flex items-center justify-center text-(--neba-fg)",style:{gap:n,opacity:.72},children:[e("svg",{viewBox:"0 0 16 16",width:i,height:i,fill:"none","aria-hidden":"true",children:e("path",{d:"M10 3 5 8l5 5",stroke:"currentColor",strokeWidth:"1.6",strokeLinecap:"round",strokeLinejoin:"round"})}),e("svg",{viewBox:"0 0 16 16",width:i,height:i,fill:"none","aria-hidden":"true",children:e("circle",{cx:"8",cy:"8",r:"5",stroke:"currentColor",strokeWidth:"1.6"})}),e("svg",{viewBox:"0 0 16 16",width:i,height:i,fill:"none","aria-hidden":"true",children:e("rect",{x:"3.5",y:"3.5",width:"9",height:"9",rx:"1.6",stroke:"currentColor",strokeWidth:"1.6"})})]})}function p({size:i}){return t("svg",{viewBox:"0 0 16 16",width:i,height:i,fill:"currentColor","aria-hidden":"true",children:[e("rect",{x:"1",y:"1",width:"6",height:"6",rx:"1.4"}),e("rect",{x:"9",y:"1",width:"6",height:"6",rx:"1.4"}),e("rect",{x:"1",y:"9",width:"6",height:"6",rx:"1.4"}),e("rect",{x:"9",y:"9",width:"6",height:"6",rx:"1.4"})]})}export function mockupChrome(i){const{os:n,notch:a,landscape:o,time:l}=i;if("ios"===n||"ipados"===n){const i="ipados"===n,h=i?30:!i&&!o&&"none"!==a&&"punch-hole"!==a?54:44;return{top:{size:h,node:t("div",{"aria-hidden":"true",className:`${r} justify-between`,style:{height:h,paddingInline:i?22:26},children:[e("span",{className:`${d} text-[15px]`,children:l}),e(u,{height:i?11:12,gap:6})]})},bottom:{size:i?22:34,node:e("div",{"aria-hidden":"true",className:`${r} justify-center`,style:{height:i?22:34,background:"transparent"},children:e("div",{style:{width:i?220:140,height:5,borderRadius:3,background:"color-mix(in oklab, var(--neba-fg) 55%, transparent)"}})})}}}return"android"===n?{top:{size:34,node:t("div",{"aria-hidden":"true",className:`${r} justify-between`,style:{height:34,paddingInline:18},children:[e("span",{className:`${d} text-[13px]`,children:l}),e(u,{height:11,gap:5})]})},bottom:{size:48,node:e("div",{"aria-hidden":"true",className:`${r} justify-center`,style:{height:48},children:e(g,{size:20,gap:72})})}}:"macos"===n?{top:{size:28,node:t("div",{"aria-hidden":"true",className:`${r} justify-between`,style:{height:28,paddingInline:16},children:[t("div",{className:"flex items-center",style:{gap:16},children:[e(h,{width:13,radius:4}),e(h,{width:34,height:7,radius:4}),e(h,{width:26,height:7,radius:4,tone:"faint"}),e(h,{width:30,height:7,radius:4,tone:"faint"}),e(h,{width:22,height:7,radius:4,tone:"faint"})]}),t("div",{className:"flex items-center",style:{gap:14},children:[e(h,{width:11,radius:3,tone:"faint"}),e(h,{width:11,radius:3,tone:"faint"}),e("span",{className:`${d} text-[13px]`,children:l})]})]})},bottom:{size:78,node:e("div",{"aria-hidden":"true",className:"flex shrink-0 items-end justify-center",style:{height:78},children:t("div",{className:`${r} [box-shadow:var(--neba-shadow-2),var(--neba-plate-glass)]`,style:{gap:10,padding:8,marginBottom:10,borderRadius:22},children:[e(s,{count:5,size:52,radius:14,gap:10,accent:!0}),e("div",{style:{width:1,height:44,background:"color-mix(in oklab, var(--neba-fg) 16%, transparent)"}}),e(s,{count:2,size:52,radius:14,gap:10})]})})}}:"windows"===n?{bottom:{size:52,node:t("div",{"aria-hidden":"true",className:`${r} justify-center [border-block-start:1px_solid_var(--neba-border)]`,style:{height:52,paddingInline:16},children:[t("div",{className:"flex items-center",style:{gap:10},children:[e("div",{className:"text-(--neba-fg)",style:{opacity:.7},children:e(p,{size:22})}),e(s,{count:6,size:30,radius:8,gap:10,accent:!0})]}),t("div",{className:"absolute flex items-center",style:{insetInlineEnd:16,gap:12},children:[e(h,{width:11,radius:3,tone:"faint"}),e(h,{width:11,radius:3,tone:"faint"}),e("span",{className:`${d} text-[12px]`,children:l})]})]})}}:{top:{size:34,node:t("div",{"aria-hidden":"true",className:`${r} justify-center`,style:{height:34,paddingInline:14},children:[e("div",{className:"absolute",style:{insetInlineStart:14},children:e(h,{width:52,height:9,radius:5})}),e("span",{className:`${d} text-[13px]`,children:l}),t("div",{className:"absolute flex items-center",style:{insetInlineEnd:14,gap:10},children:[e(h,{width:10,radius:3,tone:"faint"}),e(h,{width:10,radius:3,tone:"faint"}),e(h,{width:10,radius:3,tone:"faint"})]})]})},start:{size:66,node:t("div",{"aria-hidden":"true",className:`${r} flex-col justify-start [border-inline-end:1px_solid_var(--neba-border)]`,style:{width:66,height:"100%",gap:10,paddingBlock:12},children:[e(h,{width:44,radius:12,tone:"accent"}),e(h,{width:44,radius:12}),e(h,{width:44,radius:12}),e(h,{width:44,radius:12})]})}}}