@fairgarden/design 0.1.0-alpha.0 → 0.1.0-alpha.2

package/page/docs-layout/DocsLayout.js

@@ -0,0 +1,108 @@
+'use client';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { Ground } from '../../foundations/ground';
+import { NavDrawer } from '../../navigation/nav-drawer';
+import { TableOfContentsContext, } from '../../navigation/table-of-contents';
+import { cx } from '../../utils/className';
+import { SkipLinkContext } from '../../utils/frame';
+import { primaryScaleVariants, secondaryScaleVariants } from '../../utils/scales';
+import { isPageGroundPreset, useScope } from '../../utils/scope';
+import styles from './docs-layout.module.css';
+/*
+ * Docs Layout (§11.15) [D202, D203]: the documentation page frame. A skip
+ * link, the site header, then the frame's columns: the sidebar navigation,
+ * the page, and an optional table of contents.
+ *
+ * Implementation (CSS Modules + CVA)
+ * - Module: docs-layout.module.css; CVA function `docsLayout`.
+ * - Axes: `primary`, `secondary` → scales module classes, applied through
+ *   the root's Ground.
+ * - Compound variants: none. Defaults: none; color axes none.
+ * - Color fallback: the root is a `kind="band"` Ground of the page ground
+ *   (`preset`, else the scope's page ground, else `paper`); every part
+ *   takes its role variables.
+ * - States: none of its own. The sidebar column and the table-of-contents
+ *   column are placed by viewport media only (the sidebar from
+ *   --fgd-nav-inline-n-above, the contents column from --xl-n-above), so
+ *   the server HTML paints the final frame: nothing is measured and
+ *   nothing moves at hydration [D201].
+ * - Parts: base (the page), skipLink, frame (the columns), sidebar (its
+ *   sticky column), main, tocBar (the strip below --xl-n-above that pins
+ *   the Table of Contents' compact bar under the header), toc (its sticky
+ *   column),
+ *   drawerTrigger (the menu Button of a DocsLayoutDrawer outside a
+ *   Navigation Bar).
+ * - Scope: the root re-declares the page ground as a `kind="band"` Ground.
+ * - Container: none; page frame on the viewport custom media [D163].
+ */
+export const docsLayout = cva(styles.base, {
+    variants: {
+        // Color axes: never defaulted [D133]; the root's Ground applies them.
+        primary: primaryScaleVariants,
+        secondary: secondaryScaleVariants,
+    },
+});
+/** Provided by DocsLayout; read by DocsLayoutDrawer. */
+export const DocsLayoutContext = React.createContext(null);
+DocsLayoutContext.displayName = 'DocsLayoutContext';
+/**
+ * The documentation page frame [D202, D203]. A skip link first (the
+ * header's Navigation Bar then renders none), the header, then up to three
+ * columns inside `--fgd-container-wide`: the sidebar (`SidebarNav`, a
+ * sticky 240 px column with its own scroll, from --fgd-nav-inline-n-above;
+ * below it the header's menu Button opens the same navigation in the
+ * drawer), the `main` page with its end gutter for the code blocks'
+ * hanging ⋮, and the table of contents (a sticky 240 px column from
+ * --xl-n-above; below it the contents' compact bar, pinned under the
+ * header while the page scrolls, naming the section in view and opening
+ * the list in a panel). Every placement is viewport media and the bar has
+ * one fixed height, so the first paint is the final frame. Print keeps the
+ * page alone.
+ */
+export function DocsLayout(props) {
+    const { header, sidebar, toc, children, footer, preset: presetProp, mainId = 'main', skipLabel = 'Skip to main content', primary, secondary, className, ...rest } = props;
+    const scope = useScope();
+    const preset = presetProp ?? (isPageGroundPreset(scope.ground) ? scope.ground : 'paper');
+    const sidebarRef = React.useRef(null);
+    const context = React.useMemo(() => ({ sidebar, sidebarRef }), [sidebar]);
+    const hasSidebar = sidebar != null && sidebar !== false;
+    const hasToc = toc != null && toc !== false;
+    return (React.createElement(SkipLinkContext.Provider, { value: true },
+        React.createElement(DocsLayoutContext.Provider, { value: context },
+            React.createElement(Ground, { ...rest, kind: "band", preset: preset, primary: primary ?? undefined, secondary: secondary ?? undefined, render: React.createElement("div", null), className: docsLayout({ className }) },
+                React.createElement("a", { className: styles.skipLink, href: `#${mainId}` }, skipLabel),
+                header,
+                React.createElement("div", { className: cx(styles.frame, hasSidebar && styles.withSidebar, hasToc && styles.withToc) },
+                    hasSidebar ? (React.createElement("div", { ref: sidebarRef, className: styles.sidebar }, sidebar)) : null,
+                    React.createElement("main", { id: mainId, className: styles.main },
+                        hasToc ? (React.createElement("div", { className: styles.tocBar },
+                            React.createElement(TableOfContentsContext.Provider, { value: BAR }, toc))) : null,
+                        children),
+                    hasToc ? React.createElement("div", { className: styles.toc }, toc) : null),
+                footer))));
+}
+/** Below --xl-n-above the one `toc` draws as the compact bar. */
+const BAR = { kind: 'bar' };
+/**
+ * The docs layout's drawer [D202]: a `NavDrawer` whose sheet shows the
+ * layout's `sidebar` (the same `SidebarNav`, from the same data). Put it in
+ * the header's `drawer` slot: the Navigation Bar shows its menu Button
+ * below --fgd-nav-inline-n-above, exactly where the sidebar column is
+ * absent. Focus moves to the current page's link, is trapped, Escape
+ * closes, and focus returns to the menu Button; the page behind is inert
+ * and does not scroll. If the window widens past the threshold while it is
+ * open, it closes and focus moves to the sidebar column's current link.
+ */
+export function DocsLayoutDrawer(props) {
+    const { triggerClassName, ...rest } = props;
+    const layout = React.useContext(DocsLayoutContext);
+    const inlineTarget = React.useCallback(() => {
+        const column = layout?.sidebarRef.current;
+        return (column?.querySelector('a[aria-current="page"]') ??
+            column?.querySelector('a[href]') ??
+            null);
+    }, [layout]);
+    return (React.createElement(NavDrawer, { ...rest, nav: layout?.sidebar, inlineTarget: inlineTarget, triggerClassName: cx(styles.drawerTrigger, triggerClassName) }));
+}
+//# sourceMappingURL=DocsLayout.js.map

package/page/docs-layout/DocsLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DocsLayout.js","sourceRoot":"","sources":["../../src/page/docs-layout/DocsLayout.tsx"],"names":[],"mappings":"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"}

package/page/docs-layout/docs-layout.module.css

@@ -0,0 +1,266 @@
+/*
+ * Docs Layout (§11.15). CVA function `docsLayout` in DocsLayout.tsx; the
+ * root (`base`) is the page's `kind="band"` Ground.
+ *
+ * Parts: base, skipLink, frame (the columns), withSidebar, withToc, sidebar
+ * (its sticky column), main, tocBar (the strip that pins the contents'
+ * compact bar), toc (its sticky column), drawerTrigger.
+ *
+ * Page frame [D163, D202]: placement answers to the viewport custom media
+ * alone, the same steps as the rest of the frame (no new breakpoint):
+ * - base: one column; the sidebar sits in the drawer (the header's menu
+ *   Button), the contents in their compact bar, sticky under the header.
+ * - --fgd-nav-inline-n-above (1024 px by default): the sidebar column, the
+ *   same threshold that swaps the header's drawer for inline navigation.
+ * - --xl-n-above (1440 px): the contents column; the bar goes.
+ * Nothing is measured, so the server HTML paints the final frame [D201].
+ * Colors are role variables only; one local custom property carries a
+ * dimension (--docs-layout-gutter, the page's end gutter).
+ */
+
+/* Composition sits in top-level rules, outside the layers: Lightning CSS
+ * (Next.js with Turbopack) rejects `composes` inside @layer or any nesting.
+ * The composed classes keep their own layers. */
+.skipLink {
+  composes: typeButtonSm from '../../utils/type.module.css';
+}
+
+@layer base {
+  .base {
+    position: relative;
+    min-block-size: 100dvh;
+  }
+
+  /* The skip link: the first stop in the page, shown on focus (§11.5). */
+  .skipLink {
+    position: absolute;
+    inset-block-start: var(--size-px-2);
+    inset-inline-start: var(--fgd-space-margin);
+    z-index: var(--layer-3);
+    display: inline-flex;
+    align-items: center;
+    box-sizing: border-box;
+    min-block-size: var(--fgd-size-hit);
+    padding-inline: var(--size-px-5);
+    border: var(--border-size-2) solid var(--primary12);
+    border-radius: var(--radius-round);
+    background-color: var(--primary12);
+    color: var(--role-inverse);
+    text-decoration-line: none;
+    white-space: nowrap;
+  }
+
+  /*
+   * The columns, capped at --fgd-container-wide (reached at the 1440 px
+   * viewport, so below it they span the viewport less its margins), with
+   * the grid gutter between them. The frame clips sideways at its padding
+   * edge (`clip`, so the sticky columns still dock): a code block's hanging
+   * ⋮ runs its hit area on into the margin, and on a phone past the
+   * viewport, where it must not make the page scroll sideways.
+   */
+  .frame {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    column-gap: var(--fgd-space-margin);
+    box-sizing: border-box;
+    max-inline-size: var(--fgd-container-wide);
+    margin-inline: auto;
+    padding-inline: var(--fgd-space-margin);
+    overflow-x: clip;
+  }
+
+  /* Below its threshold the sidebar lives in the drawer; the contents column below --xl-n-above. */
+  .sidebar,
+  .toc {
+    display: none;
+  }
+
+  /*
+   * The page. Its end gutter is the room a code block's or demo's hanging
+   * ⋮ always takes, outside the block's frame: --fgd-size-file-tabs-control
+   * (24 px), then --fgd-size-hit from --md-n-above, so the whole 44 px hit
+   * area fits in the column [D197].
+   */
+  .main {
+    --docs-layout-gutter: var(--fgd-size-file-tabs-control);
+
+    min-inline-size: 0;
+    padding-block: var(--size-px-7-5) var(--fgd-space-section);
+    padding-inline-end: var(--docs-layout-gutter);
+  }
+
+  /*
+   * The contents below --xl-n-above [D203]: a strip at the top of the page,
+   * straight under the header's rule, that sticks to the viewport top once
+   * the static header scrolls away, so the bar naming the section in view
+   * stays in reach; the page's one sticky bar [D89]. One fixed height (the
+   * bar's --fgd-size-control-md box in --size-px-2 of ground, the
+   * --fgd-size-control-xl header height) over a --border-size-1 hairline,
+   * opaque page ground across the column and its end gutter, so the page
+   * scrolls cleanly under it. Its panel is an overlay, so opening it moves
+   * nothing. With no items the bar renders nothing and the strip goes.
+   */
+  .tocBar {
+    position: sticky;
+    inset-block-start: 0;
+    z-index: var(--layer-2);
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    block-size: calc(var(--fgd-size-control-xl) + var(--border-size-1));
+    margin-block: calc(-1 * var(--size-px-7-5)) var(--size-px-7-5);
+    margin-inline-end: calc(-1 * var(--docs-layout-gutter));
+    padding-inline-end: var(--docs-layout-gutter);
+    border-block-end: var(--border-size-1) solid var(--role-hairline);
+    background-color: var(--role-ground);
+  }
+
+  .tocBar:empty {
+    display: none;
+  }
+
+  /* A heading a link lands on clears the sticky bar by --size-px-3. */
+  .withToc .main [id] {
+    scroll-margin-block-start: calc(var(--fgd-size-control-xl) + var(--border-size-1) + var(--size-px-3));
+  }
+
+  @media (min-width: 768px) {
+    .main {
+      --docs-layout-gutter: var(--fgd-size-hit);
+    }
+  }
+
+  /*
+   * From the inline threshold: the sidebar column, 240 px, sticky at the
+   * viewport top with its own scroll (never the page's), ruled from the
+   * page by a --role-hairline. The stable gutter keeps its width whether
+   * or not it scrolls.
+   */
+  @media (min-width: 1024px) {
+    .withSidebar {
+      grid-template-columns: var(--size-px-13) minmax(0, 1fr);
+    }
+
+    .sidebar {
+      position: sticky;
+      inset-block-start: 0;
+      align-self: start;
+      display: block;
+      box-sizing: border-box;
+      max-block-size: 100dvh;
+      padding-block: var(--size-px-7-5);
+      padding-inline-end: var(--size-px-3);
+      border-inline-end: var(--border-size-1) solid var(--role-hairline);
+      overflow-y: auto;
+      overscroll-behavior: contain;
+      scrollbar-gutter: stable;
+    }
+
+    /*
+     * The current page is the column's initial scroll target where
+     * supported, so the column opens scrolled to it before first paint (the
+     * Sidebar Navigation's layout effect does it elsewhere, after
+     * hydration). Scoped to the column, the scroller it names: outside a
+     * scroll container `nearest` would scroll the page. No snap type is set,
+     * so the alignment is inert otherwise.
+     */
+    .sidebar [aria-current='page'] {
+      scroll-initial-target: nearest;
+      scroll-snap-align: center;
+    }
+  }
+
+  /* From --xl-n-above: the contents column, 240 px, sticky, scrolling on its own when long. */
+  @media (min-width: 1440px) {
+    .withToc {
+      grid-template-columns: minmax(0, 1fr) var(--size-px-13);
+    }
+
+    .withSidebar.withToc {
+      grid-template-columns: var(--size-px-13) minmax(0, 1fr) var(--size-px-13);
+    }
+
+    .toc {
+      position: sticky;
+      inset-block-start: 0;
+      align-self: start;
+      display: block;
+      box-sizing: border-box;
+      max-block-size: 100dvh;
+      padding-block: var(--size-px-7-5);
+      overflow-y: auto;
+      overscroll-behavior: contain;
+      scrollbar-gutter: stable;
+    }
+
+    .toc:empty {
+      display: none;
+    }
+
+    /* A `toc` with no items: no column. */
+    .withToc:has(> .toc:empty) {
+      grid-template-columns: minmax(0, 1fr);
+    }
+
+    .withSidebar.withToc:has(> .toc:empty) {
+      grid-template-columns: var(--size-px-13) minmax(0, 1fr);
+    }
+
+    .tocBar {
+      display: none;
+    }
+
+    .withToc .main [id] {
+      scroll-margin-block-start: 0;
+    }
+  }
+}
+
+@layer states {
+  .skipLink:not(:focus) {
+    inline-size: 1px;
+    block-size: 1px;
+    min-block-size: 0;
+    padding: 0;
+    border-width: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+  }
+
+  .skipLink:focus-visible {
+    outline: var(--border-size-2) solid var(--primary12);
+    outline-offset: var(--border-size-2);
+  }
+
+  /* A DocsLayoutDrawer outside a Navigation Bar: its menu Button goes where the sidebar column comes in. */
+  @media (min-width: 1024px) {
+    .drawerTrigger {
+      display: none;
+    }
+  }
+}
+
+@layer print {
+  @media print {
+    /* The page prints alone (§7.7): no skip link, columns or contents. */
+    .skipLink,
+    .sidebar,
+    .toc,
+    .tocBar,
+    .drawerTrigger {
+      display: none;
+    }
+
+    .frame {
+      display: block;
+      max-inline-size: none;
+      padding-inline: 0;
+      overflow: visible;
+    }
+
+    .main {
+      padding-block: 0;
+      padding-inline-end: 0;
+    }
+  }
+}

package/page/docs-layout/index.d.ts

@@ -0,0 +1,2 @@
+export * from './DocsLayout';
+//# sourceMappingURL=index.d.ts.map

package/page/docs-layout/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/page/docs-layout/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA"}

package/page/docs-layout/index.js

@@ -0,0 +1,2 @@
+export * from './DocsLayout';
+//# sourceMappingURL=index.js.map

package/page/docs-layout/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/page/docs-layout/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA"}

package/page/footer/Footer.d.ts

@@ -0,0 +1,154 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+import { type BandPreset } from '../../foundations/ground';
+import { type IconName } from '../../foundations/icon';
+import type { SitemapSection } from '../../utils/navigation';
+/** The shared navigation data (utils/navigation), re-exported where it first lived. */
+export type { SitemapLink, SitemapSection } from '../../utils/navigation';
+export declare const footer: (props?: ({
+    kind?: "minimal" | "ruled" | "guide" | null | undefined;
+    signoff?: boolean | null | undefined;
+    newsletterColumn?: boolean | null | undefined;
+    collapsed?: boolean | null | undefined;
+    primary?: "ruby" | "brown" | "crimson" | "gold" | "gray" | "indigo" | "olive" | "pink" | "plum" | "purple" | "red" | "tomato" | "violet" | "bronze" | "iris" | "mauve" | "sage" | "sand" | "slate" | null | undefined;
+    secondary?: "ruby" | "blue" | "brown" | "crimson" | "cyan" | "gold" | "gray" | "green" | "indigo" | "lime" | "olive" | "orange" | "pink" | "plum" | "purple" | "red" | "teal" | "tomato" | "violet" | "yellow" | "amber" | "bronze" | "grass" | "iris" | "jade" | "mauve" | "mint" | "sage" | "sand" | "sky" | "slate" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type FooterVariants = Omit<VariantProps<typeof footer>, 'collapsed'>;
+/** One contact item: middle-dot separated in the contact line. */
+export interface FooterContactItem {
+    /** The caps label on the ruled grid's contact rows ("Email"). */
+    label?: string;
+    /** The text: an address, a number, an email. */
+    value: string;
+    /** A `mailto:`, `tel:` or page link, underlined at rest. */
+    href?: string;
+}
+/** One social link: an outline icon (20 px, custom SVG in `currentColor`) or a text link. */
+export interface FooterSocialLink {
+    label: string;
+    href: string;
+    icon?: React.ReactNode;
+}
+/** One legal link. */
+export interface FooterLegalLink {
+    label: string;
+    href: string;
+    current?: boolean;
+}
+/** Links from the page to its in-flow "Back to top" target (the skip-link target). */
+export interface FooterBackToTop {
+    /** The target, e.g. "#main". Focus moves there. */
+    href: string;
+    /** Default "Back to top". */
+    label?: string;
+}
+type HeadingLevel = 2 | 3;
+interface FooterCommonProps extends Omit<React.ComponentPropsWithRef<'footer'>, 'children'> {
+    /**
+     * The footer's band: `night` (default for `guide`, slate × green, amber
+     * action), or a page ground (default `paper` for `ruled` and `minimal`).
+     * Never a field [D177].
+     */
+    preset?: BandPreset;
+    /** The logo link or wordmark, at the head of the brand column. */
+    brand?: React.ReactNode;
+    /** The action blocks: `FooterBlock`s (icon → heading → body → action). */
+    blocks?: React.ReactNode;
+    /**
+     * The sitemap: the shared navigation data (utils/navigation), one group
+     * per top-level section, headed by its label and linked to its `href`
+     * [D187]. Each group lists the section's `links`; the mega panels' third
+     * tier (a link's own `links`) stays in the panels.
+     */
+    sitemap?: readonly SitemapSection[];
+    /** The sitemap's accessible name. Default "Site". */
+    sitemapLabel?: string;
+    /** The postal address: mixed case, unlabeled lines (one per line). */
+    address?: React.ReactNode;
+    /** The contact line, middle-dot separated; links underlined at rest. */
+    contact?: readonly FooterContactItem[];
+    /** Social links, outline icons or text. */
+    social?: readonly FooterSocialLink[];
+    /** The legal links, beside the ©. */
+    legal?: readonly FooterLegalLink[];
+    /** The © line, e.g. "© 2026 FairGarden". */
+    copyright?: React.ReactNode;
+    /**
+     * The colophon, `type-small` (dates and versions in `<data>` or `<time>`):
+     * "Set in Fraunces, Source Serif 4, Figtree and IBM Plex Mono. Last
+     * updated 22 Sept 2026."
+     */
+    colophon?: React.ReactNode;
+    /** The organization's name, first in the printed imprint. */
+    organization?: React.ReactNode;
+    /** An in-flow "Back to top" link; never fixed. */
+    backToTop?: FooterBackToTop;
+    /** A straddle Newsletter (`kind="straddle"`) across the footer's top seam. */
+    straddle?: React.ReactNode;
+    /** Heading level of the block and group headings. Default `2`. */
+    headingLevel?: HeadingLevel;
+    /** The locale of the printed "Printed on" date. Default `en-GB`. */
+    locale?: string;
+    /** Primary Radix scale: text, rules, rings. Never defaulted; omitted, it inherits the Ground [D133]. */
+    primary?: FooterVariants['primary'];
+    /** Secondary Radix scale: icons, chevrons, contact underlines, link hover. Never defaulted. */
+    secondary?: FooterVariants['secondary'];
+}
+interface FooterGuideProps extends FooterCommonProps {
+    /**
+     * `guide` (default): the field-guide footer on the night band: action
+     * blocks → sitemap → contact → legal → colophon. `ruled`: a page ground
+     * opened by the chrome rule, a full-bleed cell grid of caps links and
+     * contact rows. `minimal`: a top rule, the logo, one link line, the legal
+     * row and the colophon.
+     */
+    kind?: 'guide';
+    /**
+     * The sitemap in columns 1–7 and the inline newsletter in 8–12 behind a
+     * vertical rule, from `--lg-n-above` [D187]. Default `false`.
+     */
+    newsletterColumn?: boolean;
+    /** The inline Newsletter for the newsletter column. */
+    newsletter?: React.ReactNode;
+    /** The newsletter's short URL, printed in the imprint: "Newsletter (example.org/newsletter)". */
+    newsletterUrl?: string;
+    /** A large wordmark in the tint, cropped by the band's bottom edge. Default `false`. */
+    signoff?: boolean;
+    /** The sign-off wordmark's text (decorative; the brand is named elsewhere). */
+    wordmark?: string;
+}
+interface FooterPageGroundProps extends FooterCommonProps {
+    kind: 'ruled' | 'minimal';
+    newsletterColumn?: never;
+    newsletter?: never;
+    newsletterUrl?: never;
+    signoff?: never;
+    wordmark?: never;
+}
+/** Props for Footer: `footer` props, the kind and its options, the parts' content and the color axes. */
+export type FooterProps = FooterGuideProps | FooterPageGroundProps;
+/**
+ * The footer. In print only the imprint prints (organization, address,
+ * contact written out, the print date, ©, colophon at 8–8.5 pt); the
+ * sitemap, social links, buttons, forms, sign-off and back-to-top drop.
+ */
+export declare function Footer(props: FooterProps): React.JSX.Element;
+/** Props for FooterBlock: `section` props, the icon, heading, body and action. */
+export type FooterBlockProps = Omit<React.ComponentPropsWithRef<'section'>, 'children'> & {
+    /**
+     * The block-tier icon (36 px, FILL 0): an inventory name, or a subject
+     * symbol's SVG element in `currentColor`. It takes `--role-accent`.
+     */
+    icon?: IconName | React.ReactElement;
+    /** The heading, `type-itemhead` (an item head, not a section head). */
+    heading: React.ReactNode;
+    /** The heading level. Default `2`. */
+    headingLevel?: HeadingLevel;
+    /** The body, `type-body-ui`. */
+    children?: React.ReactNode;
+    /** The action: a §9.2 Button, links or the §11.11 inline form. */
+    action?: React.ReactNode;
+};
+/** An action block: icon → heading (--size-px-3) → body (--size-px-7) → action (--size-px-7). */
+export declare function FooterBlock(props: FooterBlockProps): React.JSX.Element;
+//# sourceMappingURL=Footer.d.ts.map

package/page/footer/Footer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Footer.d.ts","sourceRoot":"","sources":["../../src/page/footer/Footer.tsx"],"names":[],"mappings":"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"}