@ciridae/ui 0.16.1 → 1.0.1

package/dist/theme/options.d.ts

@@ -0,0 +1,32 @@
+import type { PaletteName } from "./palettes.js";
+export type ColorTheme = "dark" | "light";
+/**
+ * What a product calls itself (a short name for tight spots like a rail) and its public asset
+ * paths, served from the app, e.g. `/brand/favicon.svg`.
+ */
+export type Brand = {
+    name: string;
+    shortName?: string;
+    favicon?: string;
+    logo?: string;
+    mark?: string;
+    /** The social sharing card. */
+    card?: string;
+};
+/**
+ * The few choices a product makes once. The first two shape the tokens through
+ * `createCiridaePreset`; the last two are runtime settings `ThemeProvider` takes.
+ */
+export type CiridaeTheme = {
+    palette: PaletteName;
+    fonts: {
+        display?: string;
+        sans?: string;
+        mono?: string;
+    };
+    defaultColorTheme: ColorTheme;
+    brand?: Brand;
+};
+export declare const defaultTheme: CiridaeTheme & {
+    fonts: Required<CiridaeTheme["fonts"]>;
+};

package/dist/theme/options.js

@@ -0,0 +1,9 @@
+export const defaultTheme = {
+    palette: "ciridae",
+    fonts: {
+        display: '"Inter Variable", Inter, sans-serif',
+        sans: '"Inter Variable", Inter, sans-serif',
+        mono: '"Roboto Mono", ui-monospace, monospace',
+    },
+    defaultColorTheme: "dark",
+};

package/dist/theme/palettes.d.ts

@@ -0,0 +1,60 @@
+/** A color per color theme, in the shape Panda's semantic tokens take. */
+export type ThemedColor = {
+    base: string;
+    _light: string;
+};
+export declare const PALETTE_NAMES: readonly ["ciridae", "ocean", "moss", "violet", "ember"];
+export type PaletteName = (typeof PALETTE_NAMES)[number];
+/**
+ * The greys under one color theme: every neutral token is one of these, flat or at an alpha. Dark
+ * draws its glass as pale greys over the surface; light draws solids.
+ */
+export type Greys = {
+    canvas: string;
+    panel: string;
+    card: string;
+    well: string;
+    avatar: string;
+    primary: string;
+    secondary: string;
+    muted: string;
+    subtle: string;
+    archived: string;
+    line: string;
+    border: string;
+    cardBorder: string;
+    mark: string;
+    hairline: string;
+    wash: string;
+    shade: string;
+    focus: string;
+    surface: string;
+    control: string;
+    pill: string;
+    glass: string;
+    raised: string;
+    hover: string;
+    knob: string;
+};
+export type GreyRamp = {
+    dark: Greys;
+    light: Greys;
+};
+/**
+ * The source colors every color token is drawn from. Each is tuned for both themes: dark faces
+ * are pale and carry the canvas color as text, light faces are deep and carry white.
+ */
+export type Palette = {
+    greys: GreyRamp;
+    accent: ThemedColor;
+    primary: ThemedColor;
+    status: Record<"green" | "red" | "yellow" | "blue", {
+        text: ThemedColor;
+        wash?: ThemedColor;
+    }>;
+    bronze: ThemedColor;
+    tint: {
+        face: ThemedColor;
+    };
+};
+export declare const palettes: Record<PaletteName, Palette>;

package/dist/theme/palettes.js

@@ -0,0 +1,185 @@
+import { lean } from "./color.js";
+export const PALETTE_NAMES = ["ciridae", "ocean", "moss", "violet", "ember"];
+/* The kit's own greys: today's dark, and the Figma's crisp light, each face flattened to its middle. */
+const ciridaeGreys = {
+    dark: {
+        canvas: "#141416",
+        panel: "#27272A",
+        card: "#212124",
+        well: "#1D1D20",
+        avatar: "#36363C",
+        primary: "#FFFFFF",
+        secondary: "#B4B1AC",
+        muted: "#827F7A",
+        subtle: "#827F7A",
+        archived: "#827F7A",
+        line: "#36363C",
+        border: "#3C3C3C",
+        cardBorder: "#3C3C3C",
+        mark: "#898887",
+        hairline: "#3B342B",
+        wash: "#FFFFFF",
+        shade: "#141416",
+        focus: "#827F7A",
+        surface: "#27272B",
+        control: "#1A1A1C",
+        pill: "#1B1B1D",
+        glass: "#C1BFBD",
+        raised: "#C1BFBD",
+        hover: "#C1BFBD",
+        knob: "#FFFFFF",
+    },
+    light: {
+        canvas: "#E1E1E1",
+        panel: "#F8F8F8",
+        card: "#FFFFFF",
+        well: "#EEEEEE",
+        avatar: "#D8D8DE",
+        primary: "#2A2A2D",
+        secondary: "#3F3F45",
+        muted: "#7B7B7E",
+        subtle: "#98989E",
+        archived: "#5A5854",
+        line: "#E2E2E6",
+        border: "#CDCDCD",
+        cardBorder: "#E2E2E2",
+        mark: "#A7A7A7",
+        hairline: "#E0DAD0",
+        wash: "#141416",
+        shade: "#141416",
+        focus: "#6B6A68",
+        surface: "#FBFBFC",
+        control: "#F2F2F6",
+        pill: "#FAFAFB",
+        glass: "#F2F2F2",
+        raised: "#F3F3F4",
+        hover: "#4B4A48",
+        knob: "#FBFBFB",
+    },
+};
+/*
+ * The kit's greys leaned toward a hue per theme; see `lean`. The hue is a mid grey a step or two
+ * off neutral: only its lean counts, so the chroma it carries is the chroma the surfaces take on.
+ * Text and lines take half of it, so they read near-neutral and the accent carries the palette.
+ */
+function leanedGreys(hue) {
+    const leanAll = (greys, toward) => {
+        const surface = (grey) => lean(grey, toward, 1);
+        const ink = (grey) => lean(grey, toward, 0.5);
+        return {
+            canvas: surface(greys.canvas),
+            panel: surface(greys.panel),
+            card: surface(greys.card),
+            well: surface(greys.well),
+            avatar: surface(greys.avatar),
+            primary: ink(greys.primary),
+            secondary: ink(greys.secondary),
+            muted: ink(greys.muted),
+            subtle: ink(greys.subtle),
+            archived: ink(greys.archived),
+            line: ink(greys.line),
+            border: ink(greys.border),
+            cardBorder: ink(greys.cardBorder),
+            mark: ink(greys.mark),
+            hairline: ink(greys.hairline),
+            wash: surface(greys.wash),
+            shade: surface(greys.shade),
+            focus: ink(greys.focus),
+            surface: surface(greys.surface),
+            control: surface(greys.control),
+            pill: surface(greys.pill),
+            glass: surface(greys.glass),
+            raised: surface(greys.raised),
+            hover: surface(greys.hover),
+            knob: surface(greys.knob),
+        };
+    };
+    return {
+        dark: leanAll(ciridaeGreys.dark, hue.base),
+        light: leanAll(ciridaeGreys.light, hue._light),
+    };
+}
+/* The kit's own warm glass, which every palette but ember keeps. */
+const amberTint = {
+    face: { base: "#FFE6BD", _light: "#F2EFEB" },
+};
+export const palettes = {
+    /* Today's look: a monochrome primary that inverts with the theme, and the kit's warm gold. */
+    ciridae: {
+        greys: ciridaeGreys,
+        accent: { base: "#D1B778", _light: "#8A6D33" },
+        primary: { base: "#FFFFFF", _light: "#37373A" },
+        status: {
+            green: {
+                text: { base: "#45A999", _light: "#488F83" },
+                wash: { base: "#45A999", _light: "#3D8B7D" },
+            },
+            red: { text: { base: "#F7644F", _light: "#C4594B" } },
+            yellow: { text: { base: "#DFBB65", _light: "#93793A" } },
+            blue: {
+                text: { base: "#66B7F2", _light: "#4186B8" },
+                wash: { base: "#66B7F2", _light: "#4189C4" },
+            },
+        },
+        bronze: { base: "#725D42", _light: "#6D6554" },
+        tint: amberTint,
+    },
+    /* A cool blue, where the primary takes the accent. */
+    ocean: {
+        greys: leanedGreys({ base: "#7E8084", _light: "#7E8083" }),
+        accent: { base: "#7CBCF2", _light: "#295F8C" },
+        primary: { base: "#8BC5F4", _light: "#2E6BA2" },
+        status: {
+            green: { text: { base: "#4EB59D", _light: "#306555" } },
+            red: { text: { base: "#F36E5B", _light: "#94423C" } },
+            yellow: { text: { base: "#DFBB65", _light: "#695829" } },
+            blue: { text: { base: "#7CBCF2", _light: "#295F8C" } },
+        },
+        bronze: { base: "#6E5F4A", _light: "#6A6356" },
+        tint: amberTint,
+    },
+    /* A quiet green; success stays its own, brighter green. */
+    moss: {
+        greys: leanedGreys({ base: "#7F827F", _light: "#7F827F" }),
+        accent: { base: "#7CC7A8", _light: "#296E56" },
+        primary: { base: "#8ACEB2", _light: "#2D775C" },
+        status: {
+            green: { text: { base: "#5FBF9A", _light: "#2D634F" } },
+            red: { text: { base: "#F3705C", _light: "#94423C" } },
+            yellow: { text: { base: "#DEB85F", _light: "#695829" } },
+            blue: { text: { base: "#6AB4EE", _light: "#315D81" } },
+        },
+        bronze: { base: "#6E6246", _light: "#6A6354" },
+        tint: amberTint,
+    },
+    /* A soft violet. */
+    violet: {
+        greys: leanedGreys({ base: "#817F84", _light: "#817F83" }),
+        accent: { base: "#B4A8FF", _light: "#5B4BC9" },
+        primary: { base: "#BDB2FF", _light: "#5A4BC3" },
+        status: {
+            green: { text: { base: "#4FB89C", _light: "#316554" } },
+            red: { text: { base: "#F76B5A", _light: "#8E433A" } },
+            yellow: { text: { base: "#DDB868", _light: "#69582A" } },
+            blue: { text: { base: "#6DB5F1", _light: "#325F87" } },
+        },
+        bronze: { base: "#716046", _light: "#6C6454" },
+        tint: amberTint,
+    },
+    /* A warm terracotta; error keeps to a cooler crimson so the two stay apart. */
+    ember: {
+        greys: leanedGreys({ base: "#82807D", _light: "#82817E" }),
+        accent: { base: "#F3A07A", _light: "#A0492A" },
+        primary: { base: "#F5AB88", _light: "#A84E2C" },
+        status: {
+            green: { text: { base: "#4DB398", _light: "#2F6352" } },
+            red: { text: { base: "#F5675F", _light: "#9B3A3F" } },
+            yellow: { text: { base: "#E2BD66", _light: "#69582A" } },
+            blue: { text: { base: "#6DB5F1", _light: "#325F87" } },
+        },
+        bronze: { base: "#7A5E3E", _light: "#70624F" },
+        tint: {
+            face: { base: "#FFE0C5", _light: "#F3EEE9" },
+        },
+    },
+};

package/dist/theme/tokens.d.ts

@@ -0,0 +1,29 @@
+import { type PaletteTokens } from "./derive.js";
+import { type CiridaeTheme, type ColorTheme } from "./options.js";
+import { type ThemedColor } from "./palettes.js";
+export type ThemeTokens = {
+    colors: Record<keyof PaletteTokens["colors"] | "border.focus" | "border.error" | "bg.canvas" | "bg.panel" | "bg.card" | "bg.surface" | "bg.avatar" | "bg.field" | "bg.fieldDisabled" | "bg.control" | "bg.pill" | "bg.glass" | "bg.glassHover" | "bg.raised" | "bg.raisedHover" | "bg.check" | "bg.hover" | "bg.fill" | "bg.rowHover" | "bg.track" | "bg.knob" | "fg.primary" | "fg.secondary" | "fg.muted" | "fg.subtle" | "fg.archived" | "border.subtle" | "border.control" | "border.panel" | "border.card" | "border.mark" | "border.glass" | "border.toolbar" | "border.hairline", ThemedColor>;
+    gradients: Record<"skeleton", ThemedColor>;
+    shadows: Record<"search" | "inset" | "card" | "focus" | "glow" | "toast" | "control.raised" | "control.raisedHover" | "control.pressed", ThemedColor>;
+    fonts: {
+        display: string;
+        sans: string;
+        mono: string;
+    };
+};
+/**
+ * Every token value a theme decides. `createCiridaePreset` bakes these into the stylesheet;
+ * `themeVariables` writes the same values over it at runtime, so the two never drift.
+ */
+export declare function deriveThemeTokens(theme?: Partial<CiridaeTheme>): ThemeTokens;
+/**
+ * The CSS variables a theme sets under one color theme, named as Panda names them. Written onto
+ * the document, they show a theme over a stylesheet built with another, with no rebuild. Names
+ * are as `style.setProperty` takes them; in stylesheet text their dots need escaping.
+ */
+export declare function themeVariables(theme: Partial<CiridaeTheme>, colorTheme: ColorTheme): Record<string, string>;
+/**
+ * The theme's variables for both color themes, as a stylesheet. Unlayered, it wins over the
+ * built stylesheet's `@layer tokens` blocks, so the page shows the theme with no rebuild.
+ */
+export declare function themeStylesheet(theme: Partial<CiridaeTheme>): string;

package/dist/theme/tokens.js

@@ -0,0 +1,188 @@
+import { alpha } from "./color.js";
+import { derivePaletteTokens } from "./derive.js";
+import { defaultTheme } from "./options.js";
+import { palettes } from "./palettes.js";
+/**
+ * Every token value a theme decides. `createCiridaePreset` bakes these into the stylesheet;
+ * `themeVariables` writes the same values over it at runtime, so the two never drift.
+ */
+export function deriveThemeTokens(theme = {}) {
+    const source = palettes[theme.palette ?? defaultTheme.palette];
+    const palette = derivePaletteTokens(source);
+    const { dark, light } = source.greys;
+    return {
+        colors: {
+            ...palette.colors,
+            // Focus is the brand accent in both themes. Set from the palette, not by reference: Panda
+            // renders a reference to a dotted semantic token as an undefined variable.
+            "border.focus": palette.colors["accent.brand"],
+            // A field's edge once invalid: the accent red in dark, a quieter dark red in light.
+            "border.error": { base: palette.colors["accent.red"].base, _light: "rgba(168,71,71,.33)" },
+            "bg.canvas": { base: dark.canvas, _light: light.canvas },
+            // The app's main surface and its panels: a translucent lift off the canvas.
+            "bg.panel": { base: alpha(dark.panel, 0.66), _light: alpha(light.panel, 0.66) },
+            "bg.card": { base: dark.card, _light: light.card },
+            // A dialog, drawer or stat card: the card lifted a step.
+            "bg.surface": { base: dark.surface, _light: light.surface },
+            "bg.avatar": { base: dark.avatar, _light: light.avatar },
+            // The well of a field you type into or pick from; flat, where the raised faces are glass.
+            "bg.field": { base: alpha(dark.well, 0.33), _light: alpha(light.well, 0.66) },
+            // A disabled field loses its grey in light and reads as a blank well.
+            "bg.fieldDisabled": { base: alpha(dark.well, 0.33), _light: light.knob },
+            /*
+             * The face every control wears -- inputs, selects, tabs, the secondary button. Dark sets
+             * it below the surface it sits on so the control reads as its own object; light has to do
+             * the same, which means slightly below white rather than white. A near-white value left
+             * these invisible on the cards.
+             */
+            "bg.control": { base: alpha(dark.control, 0.5), _light: alpha(light.control, 0.95) },
+            "bg.pill": { base: dark.pill, _light: light.pill },
+            /*
+             * The glass face of a toolbar control -- a select, a slicer, a hovered card. Dark is the
+             * button's glass; light is a translucent wash under `border.toolbar`, where the button's
+             * `bg.raised` is solid. Hover is the button face.
+             */
+            "bg.glass": { base: alpha(dark.glass, 0.1), _light: alpha(light.glass, 0.66) },
+            "bg.glassHover": { base: alpha(dark.glass, 0.05), _light: light.raised },
+            /*
+             * The button face -- secondary, round, destructive's grey siblings: glass over the dark
+             * surface, a pale solid in light. Light has no hover; dark lets more surface through.
+             */
+            "bg.raised": { base: alpha(dark.raised, 0.1), _light: light.raised },
+            "bg.raisedHover": { base: alpha(dark.raised, 0.05), _light: light.raised },
+            // An unticked checkbox or radio: glass in dark, a solid near-white in light.
+            "bg.check": { base: alpha(dark.glass, 0.1), _light: light.knob },
+            // The grey washes: a hovered item, and the firmer fill a chip or a subtle button wears.
+            "bg.hover": { base: alpha(dark.hover, 0.05), _light: alpha(light.hover, 0.04) },
+            "bg.fill": { base: alpha(dark.hover, 0.1), _light: alpha(light.hover, 0.08) },
+            // A hovered table or list row: a flat wash, so a column of rows reads as one surface rather
+            // than a stack of separately lit bands. A selected row takes the accent's `bg.selected`.
+            "bg.rowHover": { base: alpha(dark.wash, 0.03), _light: alpha(light.wash, 0.03) },
+            // A switch's track while off; checked, it takes the green.
+            "bg.track": { base: alpha(dark.muted, 0.6), _light: light.muted },
+            "bg.knob": { base: dark.knob, _light: light.knob },
+            "fg.primary": { base: dark.primary, _light: light.primary },
+            // Supporting text that still reads: a record's meta line, a part's next step.
+            "fg.secondary": { base: dark.secondary, _light: light.secondary },
+            "fg.muted": { base: dark.muted, _light: light.muted },
+            // Placeholder and meta text: the muted grey, lifted a step further in light.
+            "fg.subtle": { base: dark.subtle, _light: light.subtle },
+            "fg.archived": { base: alpha(dark.archived, 0.66), _light: alpha(light.archived, 0.66) },
+            "border.subtle": { base: dark.line, _light: light.line },
+            "border.control": { base: alpha(dark.border, 0.5), _light: alpha(light.border, 0.66) },
+            "border.panel": { base: alpha(dark.border, 1), _light: alpha(light.border, 0.66) },
+            "border.card": { base: dark.cardBorder, _light: light.cardBorder },
+            // The hairline round an unticked checkbox or radio: the top of the glass edge, flat.
+            "border.mark": { base: alpha(dark.mark, 0.33), _light: alpha(light.mark, 0.33) },
+            // The hairline round a glass button and the glass card surfaces: the dark mark in both
+            // themes, as the bronze hairline is; the light mark is too pale for it. Dark sits at the
+            // old vertical gradient's average, not its bright top, so a button's edge stays quiet.
+            "border.glass": { base: alpha(dark.mark, 0.2), _light: alpha(dark.mark, 0.28) },
+            // The hairline round a toolbar control: the glass edge in dark, the control border in light.
+            "border.toolbar": { base: alpha(dark.mark, 0.33), _light: alpha(light.border, 0.66) },
+            // The sidebar's divider.
+            "border.hairline": { base: dark.hairline, _light: light.hairline },
+        },
+        gradients: {
+            skeleton: {
+                base: `linear-gradient(90deg, ${alpha(dark.wash, 0.06)} 30%, ${alpha(dark.wash, 0.12)} 50%, ${alpha(dark.wash, 0.06)} 70%)`,
+                _light: `linear-gradient(90deg, ${alpha(light.wash, 0.05)} 30%, ${alpha(light.wash, 0.09)} 50%, ${alpha(light.wash, 0.05)} 70%)`,
+            },
+        },
+        shadows: {
+            search: {
+                base: `inset 1px 2px 8px ${alpha(dark.shade, 0.25)}, inset -1px -2px 8px ${alpha(dark.shade, 0.25)}`,
+                _light: `inset 1px 2px 8px ${alpha(light.shade, 0.07)}, inset -1px -2px 8px ${alpha(light.shade, 0.07)}`,
+            },
+            inset: {
+                base: `inset 1px 2px 8px ${alpha(dark.shade, 0.25)}`,
+                _light: `inset 1px 2px 8px ${alpha(light.shade, 0.07)}`,
+            },
+            card: {
+                base: `1px 2px 8px ${alpha(dark.shade, 0.33)}`,
+                _light: `1px 2px 8px ${alpha(light.shade, 0.1)}`,
+            },
+            focus: {
+                base: `0 0 4px ${alpha(dark.focus, 0.66)}`,
+                _light: `0 0 4px ${alpha(light.focus, 0.5)}`,
+            },
+            /* The text glow behind a mark: the dark muted grey in both themes. */
+            glow: {
+                base: `0 0 8px ${alpha(dark.muted, 0.25)}`,
+                _light: `0 0 8px ${alpha(dark.muted, 0.2)}`,
+            },
+            toast: {
+                base: "0 8px 24px rgba(0,0,0,.45)",
+                _light: `0 8px 24px ${alpha(light.shade, 0.16)}`,
+            },
+            /*
+             * Control elevation: a bevel catching light from above, plus the shadow the control casts.
+             * The cast shadow is softened in light, since a dark scrim on a white page reads far
+             * heavier than the same alpha does on a dark one.
+             *
+             * The bevel alpha stays low in both. It is white in both themes, so it does no visible
+             * work on a face that is already pale -- the only faces it shows on are the ones that
+             * oppose the surface, which in light means the near-black `primary` and the filled
+             * accents. Raising it to something that registered on a pale face drew a bright line
+             * across the top of those.
+             */
+            "control.raised": {
+                base: "inset 0 1px 0 rgba(255,255,255,.07), inset 0 -1px 0 rgba(0,0,0,.14), 0 1px 2px rgba(0,0,0,.3)",
+                _light: `inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 ${alpha(light.shade, 0.09)}, 0 1px 2px ${alpha(light.shade, 0.08)}`,
+            },
+            "control.raisedHover": {
+                base: "inset 0 1px 0 rgba(255,255,255,.1), inset 0 -1px 0 rgba(0,0,0,.16), 0 2px 4px rgba(0,0,0,.34)",
+                _light: `inset 0 1px 0 rgba(255,255,255,.24), inset 0 -1px 0 ${alpha(light.shade, 0.11)}, 0 2px 4px ${alpha(light.shade, 0.1)}`,
+            },
+            /* Pressed: the cast shadow goes, and the face takes the shade instead. */
+            "control.pressed": {
+                base: "inset 0 1px 2px rgba(0,0,0,.4)",
+                _light: `inset 0 1px 2px ${alpha(light.shade, 0.13)}`,
+            },
+        },
+        fonts: {
+            display: theme.fonts?.display ?? theme.fonts?.sans ?? defaultTheme.fonts.display,
+            sans: theme.fonts?.sans ?? defaultTheme.fonts.sans,
+            mono: theme.fonts?.mono ?? defaultTheme.fonts.mono,
+        },
+    };
+}
+/* Panda's variable for a token: `colors` + `bg.infoSubtle` -> `--colors-bg.info-subtle`. */
+function tokenVariable(category, name) {
+    return `--${category}-${name.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`)}`;
+}
+/**
+ * The CSS variables a theme sets under one color theme, named as Panda names them. Written onto
+ * the document, they show a theme over a stylesheet built with another, with no rebuild. Names
+ * are as `style.setProperty` takes them; in stylesheet text their dots need escaping.
+ */
+export function themeVariables(theme, colorTheme) {
+    const tokens = deriveThemeTokens(theme);
+    const themed = (value) => (colorTheme === "light" ? value._light : value.base);
+    const variables = {};
+    for (const [name, value] of Object.entries(tokens.colors))
+        variables[tokenVariable("colors", name)] = themed(value);
+    for (const [name, value] of Object.entries(tokens.gradients))
+        variables[tokenVariable("gradients", name)] = themed(value);
+    for (const [name, value] of Object.entries(tokens.shadows))
+        variables[tokenVariable("shadows", name)] = themed(value);
+    for (const [name, value] of Object.entries(tokens.fonts))
+        variables[tokenVariable("fonts", name)] = value;
+    return variables;
+}
+/* A dot in a variable name is escaped in stylesheet text, as Panda writes `--colors-bg\.canvas`. */
+function declarations(variables) {
+    return Object.entries(variables)
+        .map(([variable, value]) => `${variable.replace(/\./g, "\\.")}: ${value};`)
+        .join("\n");
+}
+/**
+ * The theme's variables for both color themes, as a stylesheet. Unlayered, it wins over the
+ * built stylesheet's `@layer tokens` blocks, so the page shows the theme with no rebuild.
+ */
+export function themeStylesheet(theme) {
+    return [
+        `:root {\n${declarations(themeVariables(theme, "dark"))}\n}`,
+        `:root[data-ciridae-theme=light] {\n${declarations(themeVariables(theme, "light"))}\n}`,
+    ].join("\n");
+}