forgebook 0.1.8 → 0.3.0

package/dist/src/shell/device/deviceFrame.css

@@ -0,0 +1,42 @@
+@layer catalogue {
+  .forgebook-device[data-framed] {
+    position: relative;
+    flex: none;
+  }
+  .forgebook-device__layer {
+    position: absolute;
+    inset: 0;
+    display: block;
+    overflow: visible;
+  }
+  .forgebook-device__layer[data-layer=under] {
+    filter: drop-shadow(0 14px 28px var(--forgebook-shadow-lift)) drop-shadow(0 2px 5px var(--forgebook-shadow-soft));
+  }
+  .forgebook-device__layer[data-layer=over] {
+    pointer-events: none;
+  }
+  .forgebook-device[data-framed] > .forgebook-device__screen {
+    position: absolute;
+    box-sizing: border-box;
+    overflow: hidden;
+    isolation: isolate;
+  }
+  .forgebook-viewport__room[data-device] {
+    padding: 1.5rem 0;
+    background: none;
+    box-shadow: none;
+    overflow: visible;
+  }
+  .forgebook-example__stage .forgebook-viewport__room[data-device] {
+    box-shadow: none;
+  }
+  .forgebook-compare[data-device] .forgebook-compare__cell {
+    display: grid;
+    justify-items: center;
+    padding-bottom: 1.5rem;
+    overflow-x: auto;
+  }
+  .forgebook-device-menu__model {
+    max-width: 10rem;
+  }
+}

package/dist/src/shell/device/deviceParts.d.ts

@@ -0,0 +1,90 @@
+/**
+ * The device's parts the shell loads the first time a story is shown in a device (`DeviceSlot.tsx`): the drawing of a
+ * model, its layers under and over the story, and their styles.
+ *
+ * @remarks
+ * One chunk, imported on first use, so a catalogue that never shows a device never fetches the models, their drawing
+ * or their styles. The hardware takes the shell's appearance, read from the root's attribute the shell's palettes
+ * read, and the status bar the story's scheme. The drawing is the one `forgebook shot` frames its pictures with
+ * (`deviceDrawing.ts`).
+ *
+ * @module
+ */
+import "./deviceFrame.scss";
+import { type CSSProperties, type ReactNode } from "react";
+import { deviceDrawing } from "../../deviceDrawing.ts";
+import { type StoryArea } from "../../devices.ts";
+import type { ShownDevice } from "../../deviceView.ts";
+/**
+ * A device's drawing, held as shown.
+ *
+ * @param shown - the device and how it is held.
+ */
+export declare const drawingOf: (shown: ShownDevice) => ReturnType<typeof deviceDrawing>;
+/**
+ * The part of a device's screen a story is drawn in.
+ *
+ * @param shown - the device and how it is held.
+ * @param isEdgeToEdge - whether the story draws edge to edge.
+ */
+export declare const areaOf: (shown: ShownDevice, isEdgeToEdge: boolean) => StoryArea;
+/**
+ * A story frame's address in its device: told the safe areas when it draws edge to edge, as it is otherwise.
+ *
+ * @param address - the frame's address.
+ * @param area - the story's area.
+ */
+export declare const addressIn: (address: string, area: StoryArea) => string;
+/** A layer's props. */
+export type DeviceLayerProps = {
+    /** The device's drawing. */
+    readonly drawing: ReturnType<typeof deviceDrawing>;
+    /** Which layer: the hardware under the story, or the camera's cut and the status bar over it. */
+    readonly layer: "under" | "over";
+    /** The story's scheme, which the status bar's ink follows; light by default. */
+    readonly scheme?: "light" | "dark";
+};
+/**
+ * One layer of a device: decorative, so hidden from screen readers; the one over the story never takes the pointer.
+ *
+ * @param props - the drawing, the layer and the story's scheme.
+ */
+export declare const DeviceLayer: ({ drawing, layer, scheme }: DeviceLayerProps) => ReactNode;
+/** A device around a frame, as its slot lays it out (`DeviceSlot.tsx`). */
+export type DeviceFraming = {
+    /** The slot's attributes: marked framed, with the model and the orientation, at the drawing's size. */
+    readonly root: {
+        readonly "data-framed": "";
+        readonly "data-model": string;
+        readonly "data-orientation": string;
+        readonly style: CSSProperties;
+    };
+    /** The screen's place and shape in the drawing, on the story's page colour, the story inside its area. */
+    readonly screen: CSSProperties;
+    /** The hardware, under the screen. */
+    readonly under: ReactNode;
+    /** The camera's cut and the status bar, over the screen. */
+    readonly over: ReactNode;
+};
+/**
+ * A device around a frame.
+ *
+ * @param framed - the device shown and its drawing.
+ * @param scheme - the story's scheme, which the status bar's ink follows.
+ * @param background - the story's page colour.
+ */
+export declare const deviceFraming: (framed: {
+    readonly shown: ShownDevice;
+    readonly drawing: ReturnType<typeof deviceDrawing>;
+    readonly area: StoryArea;
+}, scheme: "light" | "dark", background: string | undefined) => DeviceFraming;
+/**
+ * The compare view's grid with a device in each cell: as many cells side by side as devices fit, marked for the
+ * device's styles.
+ *
+ * @param drawing - the device's drawing.
+ */
+export declare const compareGridProps: (drawing: ReturnType<typeof deviceDrawing>) => {
+    readonly "data-device": "";
+    readonly style: CSSProperties;
+};

package/dist/src/shell/device/deviceParts.js

@@ -0,0 +1,120 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * The device's parts the shell loads the first time a story is shown in a device (`DeviceSlot.tsx`): the drawing of a
+ * model, its layers under and over the story, and their styles.
+ *
+ * @remarks
+ * One chunk, imported on first use, so a catalogue that never shows a device never fetches the models, their drawing
+ * or their styles. The hardware takes the shell's appearance, read from the root's attribute the shell's palettes
+ * read, and the status bar the story's scheme. The drawing is the one `forgebook shot` frames its pictures with
+ * (`deviceDrawing.ts`).
+ *
+ * @module
+ */
+import "./deviceFrame.css";
+import { useSyncExternalStore } from "react";
+import { DEVICE_FONT, DEVICE_INK, DEVICE_PAINTS, deviceDrawing } from "../../deviceDrawing.js";
+import { deviceModel, storyArea } from "../../devices.js";
+import { withSafeArea } from "../../safeAreaParameter.js";
+import { APPEARANCE_ATTRIBUTE } from "../useAppearance.js";
+/**
+ * A device's drawing, held as shown.
+ *
+ * @param shown - the device and how it is held.
+ */
+export const drawingOf = (shown) => deviceDrawing(deviceModel(shown.model), shown.orientation);
+/**
+ * The part of a device's screen a story is drawn in.
+ *
+ * @param shown - the device and how it is held.
+ * @param isEdgeToEdge - whether the story draws edge to edge.
+ */
+export const areaOf = (shown, isEdgeToEdge) => storyArea(deviceModel(shown.model), shown.orientation, isEdgeToEdge);
+/**
+ * A story frame's address in its device: told the safe areas when it draws edge to edge, as it is otherwise.
+ *
+ * @param address - the frame's address.
+ * @param area - the story's area.
+ */
+export const addressIn = (address, area) => Object.values(area.safeArea).some((inset) => inset > 0) ? withSafeArea(address, area.safeArea) : address;
+/** Calls back when the shell's appearance changes on the root. */
+const subscribeAppearance = (onChange) => {
+    const observer = new MutationObserver(onChange);
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: [APPEARANCE_ATTRIBUTE] });
+    return () => observer.disconnect();
+};
+/** Whether the shell draws in its dark palette now. */
+const isShellDark = () => document.documentElement.getAttribute(APPEARANCE_ATTRIBUTE) === "dark";
+/** Whether the shell draws in its dark palette, kept in step with the root's attribute. */
+const useShellDark = () => useSyncExternalStore(subscribeAppearance, isShellDark, () => false);
+/**
+ * One shape as an SVG element.
+ *
+ * @param shape - the shape.
+ * @param index - its place in its layer, its key.
+ * @param paint - the colour of each paint.
+ */
+const shapeElement = (shape, index, paint) => {
+    if (shape.kind === "rect")
+        return (_jsx("rect", { x: shape.x, y: shape.y, width: shape.width, height: shape.height, rx: shape.radius, fill: shape.fill === undefined ? "none" : paint(shape.fill), stroke: shape.stroke === undefined ? undefined : paint(shape.stroke), 
+            // the outline drawn inside the shape's edge, so the body keeps its size
+            strokeWidth: shape.stroke === undefined ? undefined : 1, opacity: shape.opacity }, index));
+    if (shape.kind === "circle")
+        return _jsx("circle", { cx: shape.cx, cy: shape.cy, r: shape.r, fill: paint(shape.fill) }, index);
+    if (shape.kind === "path")
+        return _jsx("path", { d: shape.d, fill: paint(shape.fill) }, index);
+    return (_jsx("text", { x: shape.x, y: shape.y, fontSize: shape.size, fontWeight: shape.weight, fontFamily: DEVICE_FONT, textAnchor: shape.anchor, dominantBaseline: "central", fill: paint(shape.fill), children: shape.text }, index));
+};
+/**
+ * One layer of a device: decorative, so hidden from screen readers; the one over the story never takes the pointer.
+ *
+ * @param props - the drawing, the layer and the story's scheme.
+ */
+export const DeviceLayer = ({ drawing, layer, scheme = "light" }) => {
+    const paints = DEVICE_PAINTS[useShellDark() ? "dark" : "light"];
+    const paint = (name) => (name === "ink" ? DEVICE_INK[scheme] : paints[name]);
+    return (_jsx("svg", { className: "forgebook-device__layer", "data-layer": layer, width: drawing.width, height: drawing.height, viewBox: `0 0 ${drawing.width} ${drawing.height}`, "aria-hidden": "true", focusable: "false", children: (layer === "under" ? drawing.under : drawing.over).map((shape, index) => shapeElement(shape, index, paint)) }));
+};
+/**
+ * A device around a frame.
+ *
+ * @param framed - the device shown and its drawing.
+ * @param scheme - the story's scheme, which the status bar's ink follows.
+ * @param background - the story's page colour.
+ */
+export const deviceFraming = (framed, scheme, background) => {
+    const { drawing, shown, area } = framed;
+    return {
+        root: {
+            "data-framed": "",
+            "data-model": shown.model,
+            "data-orientation": shown.orientation,
+            style: { width: drawing.width, height: drawing.height }
+        },
+        screen: {
+            left: drawing.screen.x,
+            top: drawing.screen.y,
+            width: drawing.screen.width,
+            height: drawing.screen.height,
+            borderRadius: drawing.screen.radius,
+            backgroundColor: background,
+            // the story inside the safe areas: the status bar, the camera's cut and the home indicator draw around it
+            paddingTop: area.around.top,
+            paddingRight: area.around.right,
+            paddingBottom: area.around.bottom,
+            paddingLeft: area.around.left
+        },
+        under: _jsx(DeviceLayer, { drawing: drawing, layer: "under" }, "under"),
+        over: _jsx(DeviceLayer, { drawing: drawing, layer: "over", scheme: scheme }, "over")
+    };
+};
+/**
+ * The compare view's grid with a device in each cell: as many cells side by side as devices fit, marked for the
+ * device's styles.
+ *
+ * @param drawing - the device's drawing.
+ */
+export const compareGridProps = (drawing) => ({
+    "data-device": "",
+    style: { gridTemplateColumns: `repeat(auto-fill, minmax(min(100%, ${drawing.width + 32}px), 1fr))` }
+});