@atelic-action/ui 0.17.2 → 1.0.0

package/src/app/ui/tooltip.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import * as React from "react";
+
+import { cn } from "../lib/utils";
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = React.forwardRef<
+	React.ElementRef<typeof TooltipPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+	<TooltipPrimitive.Portal>
+		<TooltipPrimitive.Content
+			ref={ref}
+			sideOffset={sideOffset}
+			className={cn(
+				"z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-tooltip-content-transform-origin)",
+				className,
+			)}
+			{...props}
+		/>
+	</TooltipPrimitive.Portal>
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/src/artifact/ArtifactShell.tsx

@@ -19,7 +19,7 @@ export interface ArtifactShellProps {
 }
 
 /**
- * The wrapper every artifact page uses: the `.mkt` theming
+ * The wrapper every artifact page uses: the `.atelic-ui` theming
  * scope, the skip link, the header, the credit band, and the access gate's
  * watermark, composed from the chrome. The header is always the dark
  * variant with the sender's lockup and never a site nav or a CTA, because the
@@ -34,7 +34,7 @@ export function ArtifactShell({ site, currentPath, stops, children }: ArtifactSh
 	const recipient = site.recipient.logo;
 
 	return (
-		<div className="mkt">
+		<div className="atelic-ui">
 			<SkipLink />
 			<SiteHeader
 				brand={{ name, href, logo, recipient }}

package/src/artifact/Gate.tsx

@@ -2,7 +2,7 @@ import { type FormEvent, useEffect, useRef, useState } from "react";
 import { Button } from "../primitives/Button";
 
 /**
- * PBKDF2 work factor and hash. Mirrored by scripts/build-gate-payload.mjs;
+ * PBKDF2 work factor and hash. Mirrored by scripts/seal-document.mjs;
  * the two must agree exactly or every sealed payload stops opening.
  */
 const PBKDF2_ITERATIONS = 200000;
@@ -40,7 +40,7 @@ export interface GatePayload {
 }
 
 export interface GateProps {
-	/** Built by scripts/build-gate-payload.mjs. Carries no plaintext. */
+	/** Built by scripts/seal-document.mjs. Carries no plaintext. */
 	payload: GatePayload;
 	/** localStorage key holding the reader's email, so a return visit walks straight in. */
 	storageKey?: string;

package/src/artifact/Writeup.tsx

@@ -4,10 +4,10 @@ import {
 	Callout,
 	Checklist,
 	type ChecklistItem,
-	Collapsible,
 	ColumnChart,
 	type ColumnChartGroup,
 	DataTable,
+	Disclosure,
 	StackedBar,
 	type StackedBarSegment,
 	type StatItem,
@@ -34,7 +34,7 @@ export type { WriteupPerson } from "./SignOff";
  * type brought down, flowing across letter pages; nothing is clipped.
  *
  * Every block is a component from @atelic-action/ui (the checklist, the
- * sortable table, the charts, the stat row, the callout, the collapsible);
+ * sortable table, the charts, the stat row, the callout, the disclosure);
  * this file owns only the document: the overview, the tiers, the section
  * card, the markets table, and the close. Its skeleton is the practice's
  * FOOTPRINT.md, and what it says follows the pitch surface rules
@@ -158,7 +158,7 @@ export interface WriteupShots {
 	shots: WriteupShot[];
 }
 
-/** Blocks that can sit inside a collapsible. */
+/** Blocks that can sit inside a fold (a `more` block). */
 export type WriteupInnerBlock =
 	| WriteupChecks
 	| WriteupTable
@@ -170,8 +170,8 @@ export type WriteupInnerBlock =
 	| WriteupShots;
 
 /**
- * A collapsible: the label says what is inside and the summary says what it
- * shows, so the detail needs no explaining once open.
+ * A fold, the native Disclosure: the label says what is inside and the
+ * summary says what it shows, so the detail needs no explaining once open.
  */
 export interface WriteupMore {
 	kind: "more";
@@ -432,14 +432,14 @@ function Shots({ block }: { block: WriteupShots }) {
 
 function More({ block }: { block: WriteupMore }) {
 	return (
-		<Collapsible className="op-block op-more" label={block.label} summary={block.summary}>
+		<Disclosure className="op-block op-more" label={block.label} summary={block.summary}>
 			<div className="op-more-body">
 				{block.blocks.map((inner, i) => (
 					// biome-ignore lint/suspicious/noArrayIndexKey: blocks are static content in a fixed order
 					<TopicBlock block={inner} key={i} />
 				))}
 			</div>
-		</Collapsible>
+		</Disclosure>
 	);
 }
 

package/src/chrome/SiteShell.tsx

@@ -0,0 +1,141 @@
+import type { ReactNode } from "react";
+import { Watermark } from "../components/Watermark";
+import type { PageStop } from "../hooks/useScrollSpy";
+import { formatHoursRange } from "../lib/hours";
+import { BasePathProvider } from "../routing/BasePathProvider";
+import { joinBase, normalizeBasePath, stripBase } from "../routing/basePath";
+import type { NavItem, SiteConfig } from "../sections/siteConfig";
+import { CreditBar } from "./CreditBar";
+import { Footer } from "./Footer";
+import { SiteHeader, type SiteHeaderVariant } from "./SiteHeader";
+import { SkipLink } from "./SkipLink";
+import { StickyCTABar } from "./StickyCTABar";
+
+export interface SiteShellProps {
+	site: SiteConfig;
+	/**
+	 * The path being read, from the site's own router, with or without the
+	 * base path. The package imports no router, so a site's wrapper passes it.
+	 */
+	currentPath: string;
+	/**
+	 * The prefix the site is served under. Defaults to `site.basePath`; a site
+	 * whose build sets the base another way (a rehearsal build under
+	 * `VITE_BASE_PATH`) passes what the build used. The shell mounts
+	 * `BasePathProvider` with it, so every section inside reads the same base.
+	 */
+	basePath?: string;
+	/** The header's links. Defaults to `site.nav`; the footer lists the same ones. */
+	nav?: NavItem[];
+	/** Home style pages with a full bleed hero get a transparent header. */
+	heroNav?: boolean;
+	/**
+	 * A page that closes on its own ask turns the mobile booking bar off,
+	 * since that ask is the conversion surface there.
+	 */
+	stickyCta?: boolean;
+	/**
+	 * Such a page also drops the site footer: when a page ends on its own
+	 * sign off, the NAP footer after it steps on the close.
+	 */
+	footer?: boolean;
+	/** Presentation mode: the page's stops replace the nav links and the CTA. */
+	pageNav?: PageStop[];
+	/** Match the header to a dark page surface. */
+	navOnDark?: boolean;
+	/** Hide the header's primary CTA (e.g. a reveal, where the ask is the letter). The menu keeps it. */
+	hideNavCta?: boolean;
+	/**
+	 * The developer credit band. Defaults on (client sites carry it); the
+	 * practice's own site turns it off, since crediting yourself on your
+	 * own page reads as noise.
+	 */
+	credit?: boolean;
+	children: ReactNode;
+}
+
+/**
+ * The marketing page wrapper: the `.atelic-ui` scope around the skip link,
+ * the header, `<main>`, the sticky CTA bar, the footer with its credit band,
+ * and the watermark, all mapped from the site's config. Moved here from
+ * template-marketing in 0.19.0 (ATE-643); a site keeps a wrapper a few lines
+ * long that reads the path from its router and passes it in.
+ */
+export function SiteShell({
+	site,
+	currentPath,
+	basePath,
+	nav,
+	heroNav = false,
+	stickyCta = true,
+	footer = true,
+	pageNav,
+	navOnDark = false,
+	hideNavCta = false,
+	credit = true,
+	children,
+}: SiteShellProps) {
+	const base = normalizeBasePath(basePath ?? site.basePath);
+	const withBase = (path: string) => joinBase(base, path);
+	// Every href and src handed to the chrome carries the base path (a no op at
+	// the root). The current path is compared against those hrefs, so it is
+	// put in the same form whether or not the router reports it with the base.
+	const pathname = withBase(stripBase(base, currentPath));
+	const brand = {
+		name: site.name,
+		href: withBase("/"),
+		logo: { ...site.logo, src: site.logo.src === undefined ? undefined : withBase(site.logo.src) },
+	};
+	const links = (nav ?? site.nav).map((item) => ({ label: item.label, href: withBase(item.to) }));
+	const cta = { ...site.cta, href: withBase(site.cta.href) };
+	const based = <T extends { href: string }>(items: T[] | undefined) =>
+		items?.map((item) => ({ ...item, href: withBase(item.href) }));
+	// The header takes one variant. A hero page wins over a dark one: the bar
+	// sits transparent over the hero either way, and only its scrolled state
+	// differed.
+	const variant: SiteHeaderVariant = heroNav ? "transparent" : navOnDark ? "dark" : "solid";
+
+	return (
+		<BasePathProvider base={base}>
+			<div className="atelic-ui">
+				<SkipLink />
+				<SiteHeader
+					brand={brand}
+					links={links}
+					primaryCTA={cta}
+					variant={variant}
+					currentPath={pathname}
+					stops={pageNav}
+					hideCTA={hideNavCta}
+					contact={{ phone: site.phone, email: site.email, address: site.address }}
+				/>
+				<main id="main">{children}</main>
+				{stickyCta && <StickyCTABar primaryCTA={cta} phone={site.phone} />}
+				{footer ? (
+					<Footer
+						brand={brand}
+						blurb={site.footerBlurb}
+						socialLinks={based(site.socialLinks)}
+						links={links}
+						extraLinks={based(site.footerLinks)}
+						contactHeading={site.footer?.contactHeading}
+						address={site.footer?.showAddress === false ? undefined : site.address}
+						phone={site.phone}
+						email={site.email}
+						hours={site.hours.map((row) => ({
+							label: row.labelShort,
+							range: formatHoursRange(row, { short: true }),
+						}))}
+						attribution={site.attribution}
+						note={site.footer?.note}
+						legalLinks={based(site.legalLinks)}
+						credit={credit}
+					/>
+				) : (
+					credit && <CreditBar />
+				)}
+				<Watermark />
+			</div>
+		</BasePathProvider>
+	);
+}

package/src/chrome/index.ts

@@ -1,4 +1,5 @@
 export type { PageStop } from "../hooks/useScrollSpy";
+export type { NavItem, SiteConfig } from "../sections/siteConfig";
 export type {
 	Brand,
 	BrandLogo,
@@ -16,5 +17,6 @@ export { CreditBar } from "./CreditBar";
 export { Footer, type FooterProps } from "./Footer";
 export { SiteHeader, type SiteHeaderProps, type SiteHeaderVariant } from "./SiteHeader";
 export { SiteMenu, type SiteMenuProps } from "./SiteMenu";
+export { SiteShell, type SiteShellProps } from "./SiteShell";
 export { SkipLink, type SkipLinkProps } from "./SkipLink";
 export { StickyCTABar, type StickyCTABarProps } from "./StickyCTABar";

package/src/components/Disclosure.tsx

@@ -1,9 +1,18 @@
 import { ChevronDown } from "lucide-react";
 import { type ReactNode, useId } from "react";
 
-export interface DisclosureProps {
+interface DisclosureBaseProps {
 	/** What the section is, and the toggle's accessible name. */
 	label: ReactNode;
+	className?: string;
+	children: ReactNode;
+}
+
+/**
+ * Held by the caller: an app's section. The caller keeps `open`, so it can
+ * remember which sections were folded, and a closed body is not rendered.
+ */
+export interface DisclosureControlledProps extends DisclosureBaseProps {
 	open: boolean;
 	onToggle: () => void;
 	/**
@@ -15,23 +24,80 @@ export interface DisclosureProps {
 	headingLevel?: 2 | 3 | 4 | 5 | 6;
 	/** The panel's id; minted when left out. */
 	panelId?: string;
-	className?: string;
-	children: ReactNode;
+	summary?: never;
+	defaultOpen?: never;
 }
 
 /**
- * A section the page opens and closes: a header row that folds a body the
- * caller controls. Where `Collapsible` is a native details element that keeps
- * its own state and its detail in the page, this one is for an app. The
- * caller holds `open`, so it can remember which sections were folded, and a
- * closed body is not rendered, so a long list costs nothing until asked for.
+ * Left to the browser: a document's fold. A native details element that keeps
+ * its own state and its detail in the page, so it opens before any script
+ * loads, find in page opens it, and it prints open.
+ */
+export interface DisclosureNativeProps extends DisclosureBaseProps {
+	/**
+	 * What the detail shows, in a sentence, under the label, so a reader who
+	 * never opens it still has the point and the detail needs no explaining
+	 * once open.
+	 */
+	summary?: ReactNode;
+	/** Open on first render; closed by default. */
+	defaultOpen?: boolean;
+	open?: never;
+	onToggle?: never;
+	meta?: never;
+	headingLevel?: never;
+	panelId?: never;
+}
+
+export type DisclosureProps = DisclosureControlledProps | DisclosureNativeProps;
+
+/**
+ * A section the reader opens and closes, in one of two forms chosen by
+ * whether the caller passes `open` or `onToggle`.
+ *
+ * Controlled (`open` and `onToggle`), it is an app's card: a header row that
+ * folds a body the caller holds, and a closed body is not rendered, so a long
+ * list costs nothing until asked for. The label is the toggle, so its name
+ * reads "Produce, collapsed" and not "Produce 10 items"; `meta` is a sibling
+ * for that reason. The toggle's `::after` stretches over the whole header
+ * row, so a tap anywhere on it, meta and chevron included, folds the section.
  *
- * The label is the toggle, so its name reads "Produce, collapsed" and not
- * "Produce 10 items"; `meta` is a sibling for that reason. The toggle's
- * `::after` stretches over the whole header row, so a tap anywhere on it,
- * meta and chevron included, folds the section.
+ * Uncontrolled, it is a document's fold: a labeled line over a summary, as a
+ * native details element. It opens with a click, a tap, Enter, or Space, works
+ * before any script loads, a browser's find in page opens it, and it prints
+ * open. The writeup's "more" blocks are this form.
  */
-export function Disclosure({
+export function Disclosure(props: DisclosureProps) {
+	if (props.open !== undefined || props.onToggle !== undefined)
+		return <ControlledDisclosure {...props} />;
+	return <NativeDisclosure {...props} />;
+}
+
+function NativeDisclosure({
+	label,
+	summary,
+	defaultOpen,
+	className,
+	children,
+}: DisclosureNativeProps) {
+	return (
+		<details
+			className={["disclosure", "is-native", className].filter(Boolean).join(" ")}
+			open={defaultOpen}
+		>
+			<summary className="disclosure-head">
+				<span className="disclosure-text">
+					<span className="disclosure-label">{label}</span>
+					{summary && <span className="disclosure-summary">{summary}</span>}
+				</span>
+				<ChevronDown className="disclosure-chevron" size={18} aria-hidden="true" />
+			</summary>
+			<div className="disclosure-body">{children}</div>
+		</details>
+	);
+}
+
+function ControlledDisclosure({
 	label,
 	open,
 	onToggle,
@@ -40,7 +106,7 @@ export function Disclosure({
 	panelId,
 	className,
 	children,
-}: DisclosureProps) {
+}: DisclosureControlledProps) {
 	const minted = useId();
 	const id = panelId ?? minted;
 	const Root = headingLevel ? "section" : "div";

package/src/components/GateLogin.tsx

@@ -28,7 +28,7 @@ export interface GateLoginProps {
  * addresses. The response is the same either way, so this screen always
  * shows the same "check your inbox" confirmation.
  *
- * It renders the screen only: a site wraps it in its `.mkt` scope with no
+ * It renders the screen only: a site wraps it in its `.atelic-ui` scope with no
  * header, since a header would only point at pages the visitor cannot open
  * yet. The button wears the site's own `.btn` classes, as the chrome's do.
  */

package/src/components/Watermark.tsx

@@ -8,7 +8,7 @@ import { readCookie } from "../lib/readCookie";
  * faint tiled overlay when the gate runs in "tiled" mode. Renders nothing
  * when there is no session, so it is inert on a public site and during
  * prerender. The email travels into any screenshot. Mount it inside the
- * site's `.mkt` (or `.atelic-ui`) wrapper, where its styles are scoped.
+ * site's `.atelic-ui` wrapper, where its styles are scoped.
  *
  * It deters and attributes; it does not enforce. The cookies it reads are
  * unsigned and it is drawn in the reader's own browser.

package/src/components/index.ts

@@ -1,7 +1,6 @@
 export { readCookie } from "../lib/readCookie";
 export { Callout, type CalloutProps } from "./Callout";
 export { Checklist, type ChecklistItem, type ChecklistProps } from "./Checklist";
-export { Collapsible, type CollapsibleProps } from "./Collapsible";
 export {
 	ColumnChart,
 	type ColumnChartBar,
@@ -17,7 +16,12 @@ export {
 	type DataTableValueCell,
 	type SortDirection,
 } from "./DataTable";
-export { Disclosure, type DisclosureProps } from "./Disclosure";
+export {
+	Disclosure,
+	type DisclosureControlledProps,
+	type DisclosureNativeProps,
+	type DisclosureProps,
+} from "./Disclosure";
 export { GateLogin, type GateLoginProps } from "./GateLogin";
 export { NotFound, type NotFoundProps } from "./NotFound";
 export { StackedBar, type StackedBarProps, type StackedBarSegment } from "./StackedBar";

package/src/gate/index.ts

@@ -1,3 +1,3 @@
 export { safeNext } from "./next.js";
 export { signToken, type TokenClaims, type TokenPurpose, verifyToken } from "./tokens.js";
-export { needsSession } from "./wall.js";
+export { createNeedsSession, needsSession, OPEN_PATHS, type WallOpenings } from "./wall.js";

package/src/gate/middleware.ts

@@ -16,17 +16,28 @@
  *
  * That matcher keeps only the two sign in functions away from the middleware,
  * so any other function a host adds is held like a page. The default holds
- * back everything `needsSession` in wall.ts does. A site
- * whose matcher already leaves its open paths out passes its own test to
- * `createMiddleware`.
+ * back everything `needsSession` in wall.ts does. A marketing site, whose
+ * other functions (the contact relay) are public by design, uses the simple
+ * matcher instead, everything but `api/` and the login page:
+ *
+ *   export const config = { matcher: ["/((?!api/|login$|login/).*)"] };
+ *
+ * and leaves the deciding here: a request passes with no session only when
+ * the wall's open exact paths and open prefixes name it, so a page is held by
+ * default whatever its path looks like (`/blog/release-2.0` included), where
+ * a matcher that let file extensions through let it escape. A site with an
+ * open file of its own passes `open`; one whose matcher already leaves its
+ * open paths out may still pass its own `needsSession`, which wins over both.
  */
 import { isAllowed } from "./config.js";
 import { verifyToken } from "./tokens.js";
-import { needsSession as wallNeedsSession } from "./wall.js";
+import { createNeedsSession, type WallOpenings } from "./wall.js";
 
 export interface MiddlewareOptions {
-	/** Whether a path needs a session once the gate is armed. */
+	/** Whether a path needs a session once the gate is armed. Wins over `open`. */
 	needsSession?: (pathname: string) => boolean;
+	/** Paths the site opens beyond the wall's own, added to its allowlist. */
+	open?: WallOpenings;
 }
 
 function readCookie(header: string, name: string): string | undefined {
@@ -40,7 +51,7 @@ function readCookie(header: string, name: string): string | undefined {
 }
 
 export function createMiddleware(options: MiddlewareOptions = {}) {
-	const needsSession = options.needsSession ?? wallNeedsSession;
+	const needsSession = options.needsSession ?? createNeedsSession(options.open);
 
 	return async function middleware(request: Request): Promise<Response | undefined> {
 		const secret = process.env.GATE_SESSION_SECRET;

package/src/gate/wall.ts

@@ -30,6 +30,13 @@
  * it stays open on a private host too: a prospect reads the prototype
  * without a sign in while the documents beside it stay behind the wall.
  *
+ * A marketing site's login page loads the same kinds of file (its hashed
+ * assets, its fonts, its favicon), so the same lists hold a website by
+ * default: any path they do not name, a page whose last segment carries a
+ * dot (`/blog/release-2.0`) included, needs a session. A site with an open
+ * file of its own names it through `createNeedsSession` (or the middleware's
+ * `open` option), which adds to these lists and never opens the held corner.
+ *
  * Pure and dependency free, so the middleware imports it and the tests call
  * it directly.
  */
@@ -49,6 +56,20 @@ const OPEN_PREFIXES = ["/api/auth/", "/assets/", "/brand/", "/fonts/", "/proto/"
 /** The one corner of an open prefix that stays behind the wall. */
 const HELD_PREFIXES = ["/assets/doc/"];
 
+/** What the wall leaves open with no session, exact paths and prefixes, before any a site adds. */
+export const OPEN_PATHS: {
+	readonly exact: readonly string[];
+	readonly prefixes: readonly string[];
+} = { exact: [...OPEN_EXACT], prefixes: [...OPEN_PREFIXES] };
+
+/** Paths a site opens beyond the wall's own, for a file its login page needs. */
+export interface WallOpenings {
+	/** Paths opened as written, each starting with "/" (`/apple-touch-icon.png`). */
+	exact?: readonly string[];
+	/** Folders opened whole, each starting and ending with "/" and never "/" alone (`/icons/`). */
+	prefixes?: readonly string[];
+}
+
 /**
  * Whether a request for this path needs a session when the wall is armed.
  * The path is read the way a file server would read it (decoded, repeated
@@ -62,6 +83,10 @@ const HELD_PREFIXES = ["/assets/doc/"];
  * like an open one names some other file.
  */
 export function needsSession(pathname: string): boolean {
+	return judge(pathname, OPEN_EXACT, OPEN_PREFIXES);
+}
+
+function judge(pathname: string, exact: ReadonlySet<string>, prefixes: readonly string[]): boolean {
 	let path: string;
 	try {
 		path = decodeURIComponent(pathname);
@@ -72,6 +97,39 @@ export function needsSession(pathname: string): boolean {
 	if (path.includes("..") || path.includes("\\") || path.includes("%")) return true;
 	const folded = path.toLowerCase();
 	if (HELD_PREFIXES.some((prefix) => folded.startsWith(prefix))) return true;
-	if (OPEN_EXACT.has(path)) return false;
-	return !OPEN_PREFIXES.some((prefix) => path.startsWith(prefix));
+	if (exact.has(path)) return false;
+	return !prefixes.some((prefix) => path.startsWith(prefix));
+}
+
+/**
+ * `needsSession` with a site's own open paths added to the wall's, read the
+ * same way. Throws on an entry that is not a plain path, or a prefix that
+ * would open the whole host, so a typo cannot quietly unlock a site.
+ */
+export function createNeedsSession(open: WallOpenings = {}): (pathname: string) => boolean {
+	const extraExact = open.exact ?? [];
+	const extraPrefixes = open.prefixes ?? [];
+	for (const path of extraExact) {
+		if (!path.startsWith("/") || path.includes("..") || path.includes("%")) {
+			throw new Error(
+				`An open path must be a plain path starting with "/": ${JSON.stringify(path)}`,
+			);
+		}
+	}
+	for (const prefix of extraPrefixes) {
+		if (
+			prefix === "/" ||
+			!prefix.startsWith("/") ||
+			!prefix.endsWith("/") ||
+			prefix.includes("..")
+		) {
+			throw new Error(
+				`An open prefix must be a folder such as "/icons/", never "/" alone: ${JSON.stringify(prefix)}`,
+			);
+		}
+	}
+	if (extraExact.length === 0 && extraPrefixes.length === 0) return needsSession;
+	const exact = new Set([...OPEN_EXACT, ...extraExact]);
+	const prefixes = [...OPEN_PREFIXES, ...extraPrefixes];
+	return (pathname) => judge(pathname, exact, prefixes);
 }