@etamong-playground/legal 0.3.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 etamong
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,104 @@
+# @etamong-playground/legal
+
+> **About** — One of several small shared libraries used across a personal "fleet" of small apps (error handling · audit logging · encryption-at-rest · i18n · UI · …). Authored and maintained with [Claude Code](https://www.anthropic.com/claude-code) (Anthropic's agentic CLI). Each README documents the design rationale behind the library.
+>
+> **This is a public repository** — keep internal infrastructure details (hostnames, secret/Vault paths, private URLs, internal issue/MR references) out of code, comments, and commit messages.
+
+Shared, versioned legal-document toolkit for etamong-playground apps — one model,
+renderers, and advance-notice logic for Terms (이용약관) / Privacy (개인정보처리방침),
+so each app stops re-implementing its own.
+
+**Headless & styleless.** Ships a model + helpers + renderers that emit
+`legal-*` class names only. Theme via the optional stylesheet's CSS variables,
+or style the classes yourself. No router, no bundled content — each app owns its
+own version data in its own repo (so the legal audit trail stays in git).
+
+## Install
+
+```sh
+pnpm add @etamong-playground/legal
+```
+
+Resolving `@etamong-playground/*` from GitHub Packages requires the registry in `.npmrc`:
+
+```
+@etamong-playground:registry=https://npm.pkg.github.com
+//npm.pkg.github.com/:_authToken=<your-github-token>
+```
+
+## Model
+
+```ts
+interface LegalVersion {
+  version: string;          // "1.0"
+  publishedDate: string;    // 공고일 YYYY-MM-DD
+  effectiveDate: string;    // 시행일 YYYY-MM-DD
+  summary?: string;
+  adverse?: boolean;        // 불리/중대 → 30일 사전공지 (else 7일)
+  sections: { title: string; content: ReactNode }[];
+  changes?: VersionChange[]; // diff vs previous version
+}
+interface LegalDocMeta { kind: "terms" | "privacy"; title: string; versions: LegalVersion[] }
+```
+
+Newest version first. Publishing a change = append a version with a future
+`effectiveDate`. Advance-notice (공시) and the effective-date flip are pure date
+functions — no scheduled job.
+
+## Helpers
+
+- `effectiveVersion(versions, today?)` — the version in force.
+- `upcomingVersion(versions, today?)` — soonest announced-but-not-yet-effective
+  version, or null. Guarded by `publishedDate <= today` so drafts don't trigger
+  a public banner.
+- `todayISO(timeZone = "Asia/Seoul")` — today as YYYY-MM-DD in the jurisdiction.
+
+## Components
+
+| Component | Purpose |
+|---|---|
+| `<LegalDocument version>` | Renders a version's titled sections. |
+| `<VersionDiff changes fromVersion toVersion>` | 3-column 변경 전/후 table; `==highlight==` markup. |
+| `<VersionHistory versions selectedIdx onSelect>` | Controlled version picker. |
+| `<UpcomingNotice docTitle version onPreview?>` | Per-doc 변경 예정 card. |
+| `<PolicyNotice docs hrefFor renderLink?>` | Site-wide dismissible 사전공시 banner. |
+
+`PolicyNotice` is router-agnostic — pass `renderLink={(href, kids) => <Link to={href}>{kids}</Link>}`
+to use your app's Link. Interactive components use state; mount them inside a
+client boundary (Next.js `"use client"`).
+
+## Theming
+
+```ts
+import "@etamong-playground/legal/styles.css";
+```
+
+Override CSS variables for theme / dark mode:
+
+```css
+.dark {
+  --legal-fg: #d4d4d8;
+  --legal-border: #3f3f46;
+  --legal-surface: #27272a;
+  --legal-notice-bg: #1e3a8a33;
+  /* ... see src/styles.css for the full list */
+}
+```
+
+## Releasing
+
+Bump `version` in `package.json`, commit, then push a matching tag:
+
+```sh
+git tag v0.1.0 && git push origin v0.1.0
+```
+
+CI publishes to GitHub Packages on tags matching `vX.Y.Z`.
+
+## Acknowledgements
+
+Built for [React](https://react.dev) (peer dependency, MIT).
+
+## License
+
+MIT — see [LICENSE](LICENSE).

package/dist/chunk-MDFCRQ5H.js

@@ -0,0 +1,22 @@
+// src/helpers.ts
+function todayISO(timeZone = "Asia/Seoul") {
+  return new Intl.DateTimeFormat("en-CA", {
+    timeZone,
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit"
+  }).format(/* @__PURE__ */ new Date());
+}
+function effectiveVersion(versions, today = todayISO()) {
+  const inForce = versions.filter((v) => v.effectiveDate <= today).sort((a, b) => b.effectiveDate.localeCompare(a.effectiveDate));
+  return inForce[0] ?? versions[versions.length - 1];
+}
+function upcomingVersion(versions, today = todayISO()) {
+  const announced = versions.filter((v) => v.publishedDate <= today && v.effectiveDate > today).sort((a, b) => a.effectiveDate.localeCompare(b.effectiveDate));
+  return announced[0] ?? null;
+}
+function policyInForce(effectiveDate, now = todayISO()) {
+  return now >= effectiveDate;
+}
+
+export { effectiveVersion, policyInForce, todayISO, upcomingVersion };

package/dist/helpers-CRGM1DHb.d.cts

@@ -0,0 +1,152 @@
+import { ReactNode } from 'react';
+
+/**
+ * The kind of legal document. Apps typically ship terms + privacy; `identity`
+ * is the app-agnostic SSO/identity statement (L1) used as the single privacy URL
+ * on a Google OAuth consent screen — it never enumerates downstream apps.
+ */
+type LegalDocKind = "terms" | "privacy" | "identity";
+/**
+ * Whether a document is exposed on the public hub. Anything not explicitly
+ * `public` stays off the hub; create flows default to `internal`.
+ */
+type LegalVisibility = "public" | "internal";
+/**
+ * One row of a version-to-version diff table (변경 전 / 변경 후).
+ * `before`/`after` support `==highlight==` markup — the renderer wraps the
+ * delimited span in a <mark>.
+ */
+interface VersionChange {
+    /** Section label this change belongs to (e.g. "제4조 (보존)"). */
+    section: string;
+    type: "added" | "removed" | "changed";
+    /** Prior text. Omit for `added`. May contain `==highlight==` spans. */
+    before?: string;
+    /** New text. Omit for `removed`. May contain `==highlight==` spans. */
+    after?: string;
+}
+/**
+ * A titled section of a legal document.
+ *
+ * `id` is a stable deep-link slug — the public hub renders the anchor
+ * `#${docAnchor}-${id}`; assign it once and never rename or reuse it (app
+ * footers link to it). `body` is serializable Markdown, which the server-side
+ * hub renders (it has no app bundle). `content` (app JSX) is a deprecated
+ * fallback the React `LegalDocument` uses only when `body` is empty.
+ */
+interface LegalSection {
+    /** Stable slug for deep-linking. Hub anchor is `${docAnchor}-${id}`. */
+    id: string;
+    title: string;
+    /** Serializable Markdown — rendered by the hub and as the LegalDocument default. */
+    body: string;
+    /** @deprecated In-app JSX. Ignored by the hub; LegalDocument falls back to it when `body` is empty. */
+    content?: ReactNode;
+}
+/**
+ * A single dated version of a legal document. Newest first in the array.
+ *
+ * Publish a change by appending a new entry with a future `effectiveDate`.
+ * While `publishedDate <= today < effectiveDate` the version is "announced"
+ * (공시) — `upcomingVersion()` returns it and the notice/banner show it. On
+ * `effectiveDate` it silently becomes the one `effectiveVersion()` returns; no
+ * second commit or scheduled job is needed (both are pure date functions).
+ *
+ * Korean law: 이용약관 개정은 시행 7일 전(이용자에게 불리하면 30일 전) 공지,
+ * 개인정보처리방침은 변경 내용 공개 + 이전 버전 열람. `adverse` marks the 30-day case.
+ */
+interface LegalVersion {
+    /** e.g. "1.0". Must be unique within a document. */
+    version: string;
+    /** 공고일 (YYYY-MM-DD). A version only counts as announced once this is reached. */
+    publishedDate: string;
+    /** 시행일 (YYYY-MM-DD). The version takes force on this date. */
+    effectiveDate: string;
+    /** 변경 요약 — shown in the advance-notice card. */
+    summary?: string;
+    /** 이용자에게 불리/중대한 변경 → 30일 사전공지(아니면 7일). */
+    adverse?: boolean;
+    sections: LegalSection[];
+    /** Diff vs the immediately-previous version, for the 3-column table. */
+    changes?: VersionChange[];
+}
+/**
+ * The data controller (개인정보처리자) surfaced to users, plus the privacy
+ * officer (개인정보 보호책임자) contact. For an L2 doc this is the service; for
+ * the L1 identity doc it is the identity broker (authentik).
+ */
+interface DataController {
+    /** 개인정보처리자 명 (e.g. service or operator name). */
+    name: string;
+    /** 개인정보 보호책임자 연락처 (reachable email). */
+    contactEmail: string;
+}
+/** A complete legal document: its identity plus every version (newest first). */
+interface LegalDocMeta {
+    kind: LegalDocKind;
+    /** Display title, e.g. "이용약관". */
+    title: string;
+    /** Versions, newest first. */
+    versions: LegalVersion[];
+    /**
+     * Standalone slug owned by the legal store (key `legal:doc:${serviceId}:${kind}`).
+     * NOT a hostname — it does not join the host-keyed maintenance registry.
+     * Use "_identity" for the L1 document.
+     */
+    serviceId: string;
+    /** Stable per-document hub anchor. Section anchors are `${docAnchor}-${section.id}`. */
+    docAnchor: string;
+    /** Gates hub rendering and PolicyNotice. Defaults to "internal" when authored. */
+    visibility: LegalVisibility;
+    /** Controller surfaced to users (L2 = the service; L1 = the identity broker). */
+    controller: DataController;
+}
+
+/**
+ * Today as YYYY-MM-DD in a given IANA timezone (default Asia/Seoul).
+ *
+ * Effective/published dates are legal calendar dates, so they must be compared
+ * against the calendar day in the service's jurisdiction — not UTC, which can
+ * be a day off for KST users near midnight.
+ */
+declare function todayISO(timeZone?: string): string;
+/**
+ * The version currently in force: newest whose `effectiveDate` is on/before
+ * `today`. Falls back to the oldest version if none is effective yet (so a
+ * brand-new doc still renders something).
+ */
+declare function effectiveVersion(versions: LegalVersion[], today?: string): LegalVersion;
+/**
+ * The soonest *announced* version not yet in force: `publishedDate <= today <
+ * effectiveDate`. Returns null when nothing is pending.
+ *
+ * The `publishedDate <= today` guard is deliberate — it prevents a draft entry
+ * with a future publish date from prematurely lighting up the public "변경 예정"
+ * banner (see planning concepts/user-facing-content-hygiene: no fake notices).
+ */
+declare function upcomingVersion(versions: LegalVersion[], today?: string): LegalVersion | null;
+/**
+ * Date-gate check for `legal-deploy-gate` consumers (see planning concept page
+ * of the same name): "is the policy that takes effect on `effectiveDate`
+ * currently in force?"
+ *
+ * Returns `true` once `now` (KST calendar day) is on or after `effectiveDate`,
+ * so the new-policy code path activates automatically on 시행일 and stays on
+ * forever after. Pure date comparison — no hub fetch, no I/O.
+ *
+ * Typical use:
+ *
+ *   if (policyInForce("2026-07-01")) {
+ *     // new-policy behavior
+ *   } else {
+ *     // old-policy behavior (still required during the notice window)
+ *   }
+ *
+ * `effectiveDate` MUST be the YYYY-MM-DD string from the legal version it
+ * matches. Hardcoding is preferred — published versions are immutable so the
+ * date won't move out from under the gate, and grepping for the literal is
+ * how the branch gets cleaned up after the migration window closes.
+ */
+declare function policyInForce(effectiveDate: string, now?: string): boolean;
+
+export { type DataController as D, type LegalDocMeta as L, type VersionChange as V, type LegalVersion as a, type LegalDocKind as b, type LegalSection as c, type LegalVisibility as d, effectiveVersion as e, policyInForce as p, todayISO as t, upcomingVersion as u };

package/dist/helpers-CRGM1DHb.d.ts

@@ -0,0 +1,152 @@
+import { ReactNode } from 'react';
+
+/**
+ * The kind of legal document. Apps typically ship terms + privacy; `identity`
+ * is the app-agnostic SSO/identity statement (L1) used as the single privacy URL
+ * on a Google OAuth consent screen — it never enumerates downstream apps.
+ */
+type LegalDocKind = "terms" | "privacy" | "identity";
+/**
+ * Whether a document is exposed on the public hub. Anything not explicitly
+ * `public` stays off the hub; create flows default to `internal`.
+ */
+type LegalVisibility = "public" | "internal";
+/**
+ * One row of a version-to-version diff table (변경 전 / 변경 후).
+ * `before`/`after` support `==highlight==` markup — the renderer wraps the
+ * delimited span in a <mark>.
+ */
+interface VersionChange {
+    /** Section label this change belongs to (e.g. "제4조 (보존)"). */
+    section: string;
+    type: "added" | "removed" | "changed";
+    /** Prior text. Omit for `added`. May contain `==highlight==` spans. */
+    before?: string;
+    /** New text. Omit for `removed`. May contain `==highlight==` spans. */
+    after?: string;
+}
+/**
+ * A titled section of a legal document.
+ *
+ * `id` is a stable deep-link slug — the public hub renders the anchor
+ * `#${docAnchor}-${id}`; assign it once and never rename or reuse it (app
+ * footers link to it). `body` is serializable Markdown, which the server-side
+ * hub renders (it has no app bundle). `content` (app JSX) is a deprecated
+ * fallback the React `LegalDocument` uses only when `body` is empty.
+ */
+interface LegalSection {
+    /** Stable slug for deep-linking. Hub anchor is `${docAnchor}-${id}`. */
+    id: string;
+    title: string;
+    /** Serializable Markdown — rendered by the hub and as the LegalDocument default. */
+    body: string;
+    /** @deprecated In-app JSX. Ignored by the hub; LegalDocument falls back to it when `body` is empty. */
+    content?: ReactNode;
+}
+/**
+ * A single dated version of a legal document. Newest first in the array.
+ *
+ * Publish a change by appending a new entry with a future `effectiveDate`.
+ * While `publishedDate <= today < effectiveDate` the version is "announced"
+ * (공시) — `upcomingVersion()` returns it and the notice/banner show it. On
+ * `effectiveDate` it silently becomes the one `effectiveVersion()` returns; no
+ * second commit or scheduled job is needed (both are pure date functions).
+ *
+ * Korean law: 이용약관 개정은 시행 7일 전(이용자에게 불리하면 30일 전) 공지,
+ * 개인정보처리방침은 변경 내용 공개 + 이전 버전 열람. `adverse` marks the 30-day case.
+ */
+interface LegalVersion {
+    /** e.g. "1.0". Must be unique within a document. */
+    version: string;
+    /** 공고일 (YYYY-MM-DD). A version only counts as announced once this is reached. */
+    publishedDate: string;
+    /** 시행일 (YYYY-MM-DD). The version takes force on this date. */
+    effectiveDate: string;
+    /** 변경 요약 — shown in the advance-notice card. */
+    summary?: string;
+    /** 이용자에게 불리/중대한 변경 → 30일 사전공지(아니면 7일). */
+    adverse?: boolean;
+    sections: LegalSection[];
+    /** Diff vs the immediately-previous version, for the 3-column table. */
+    changes?: VersionChange[];
+}
+/**
+ * The data controller (개인정보처리자) surfaced to users, plus the privacy
+ * officer (개인정보 보호책임자) contact. For an L2 doc this is the service; for
+ * the L1 identity doc it is the identity broker (authentik).
+ */
+interface DataController {
+    /** 개인정보처리자 명 (e.g. service or operator name). */
+    name: string;
+    /** 개인정보 보호책임자 연락처 (reachable email). */
+    contactEmail: string;
+}
+/** A complete legal document: its identity plus every version (newest first). */
+interface LegalDocMeta {
+    kind: LegalDocKind;
+    /** Display title, e.g. "이용약관". */
+    title: string;
+    /** Versions, newest first. */
+    versions: LegalVersion[];
+    /**
+     * Standalone slug owned by the legal store (key `legal:doc:${serviceId}:${kind}`).
+     * NOT a hostname — it does not join the host-keyed maintenance registry.
+     * Use "_identity" for the L1 document.
+     */
+    serviceId: string;
+    /** Stable per-document hub anchor. Section anchors are `${docAnchor}-${section.id}`. */
+    docAnchor: string;
+    /** Gates hub rendering and PolicyNotice. Defaults to "internal" when authored. */
+    visibility: LegalVisibility;
+    /** Controller surfaced to users (L2 = the service; L1 = the identity broker). */
+    controller: DataController;
+}
+
+/**
+ * Today as YYYY-MM-DD in a given IANA timezone (default Asia/Seoul).
+ *
+ * Effective/published dates are legal calendar dates, so they must be compared
+ * against the calendar day in the service's jurisdiction — not UTC, which can
+ * be a day off for KST users near midnight.
+ */
+declare function todayISO(timeZone?: string): string;
+/**
+ * The version currently in force: newest whose `effectiveDate` is on/before
+ * `today`. Falls back to the oldest version if none is effective yet (so a
+ * brand-new doc still renders something).
+ */
+declare function effectiveVersion(versions: LegalVersion[], today?: string): LegalVersion;
+/**
+ * The soonest *announced* version not yet in force: `publishedDate <= today <
+ * effectiveDate`. Returns null when nothing is pending.
+ *
+ * The `publishedDate <= today` guard is deliberate — it prevents a draft entry
+ * with a future publish date from prematurely lighting up the public "변경 예정"
+ * banner (see planning concepts/user-facing-content-hygiene: no fake notices).
+ */
+declare function upcomingVersion(versions: LegalVersion[], today?: string): LegalVersion | null;
+/**
+ * Date-gate check for `legal-deploy-gate` consumers (see planning concept page
+ * of the same name): "is the policy that takes effect on `effectiveDate`
+ * currently in force?"
+ *
+ * Returns `true` once `now` (KST calendar day) is on or after `effectiveDate`,
+ * so the new-policy code path activates automatically on 시행일 and stays on
+ * forever after. Pure date comparison — no hub fetch, no I/O.
+ *
+ * Typical use:
+ *
+ *   if (policyInForce("2026-07-01")) {
+ *     // new-policy behavior
+ *   } else {
+ *     // old-policy behavior (still required during the notice window)
+ *   }
+ *
+ * `effectiveDate` MUST be the YYYY-MM-DD string from the legal version it
+ * matches. Hardcoding is preferred — published versions are immutable so the
+ * date won't move out from under the gate, and grepping for the literal is
+ * how the branch gets cleaned up after the migration window closes.
+ */
+declare function policyInForce(effectiveDate: string, now?: string): boolean;
+
+export { type DataController as D, type LegalDocMeta as L, type VersionChange as V, type LegalVersion as a, type LegalDocKind as b, type LegalSection as c, type LegalVisibility as d, effectiveVersion as e, policyInForce as p, todayISO as t, upcomingVersion as u };

package/dist/helpers.cjs

@@ -0,0 +1,27 @@
+'use strict';
+
+// src/helpers.ts
+function todayISO(timeZone = "Asia/Seoul") {
+  return new Intl.DateTimeFormat("en-CA", {
+    timeZone,
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit"
+  }).format(/* @__PURE__ */ new Date());
+}
+function effectiveVersion(versions, today = todayISO()) {
+  const inForce = versions.filter((v) => v.effectiveDate <= today).sort((a, b) => b.effectiveDate.localeCompare(a.effectiveDate));
+  return inForce[0] ?? versions[versions.length - 1];
+}
+function upcomingVersion(versions, today = todayISO()) {
+  const announced = versions.filter((v) => v.publishedDate <= today && v.effectiveDate > today).sort((a, b) => a.effectiveDate.localeCompare(b.effectiveDate));
+  return announced[0] ?? null;
+}
+function policyInForce(effectiveDate, now = todayISO()) {
+  return now >= effectiveDate;
+}
+
+exports.effectiveVersion = effectiveVersion;
+exports.policyInForce = policyInForce;
+exports.todayISO = todayISO;
+exports.upcomingVersion = upcomingVersion;

package/dist/helpers.d.cts

@@ -0,0 +1,2 @@
+export { e as effectiveVersion, p as policyInForce, t as todayISO, u as upcomingVersion } from './helpers-CRGM1DHb.cjs';
+import 'react';

package/dist/helpers.d.ts

@@ -0,0 +1,2 @@
+export { e as effectiveVersion, p as policyInForce, t as todayISO, u as upcomingVersion } from './helpers-CRGM1DHb.js';
+import 'react';

package/dist/helpers.js

@@ -0,0 +1 @@
+export { effectiveVersion, policyInForce, todayISO, upcomingVersion } from './chunk-MDFCRQ5H.js';

package/dist/index.cjs

@@ -0,0 +1,195 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+
+// src/helpers.ts
+function todayISO(timeZone = "Asia/Seoul") {
+  return new Intl.DateTimeFormat("en-CA", {
+    timeZone,
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit"
+  }).format(/* @__PURE__ */ new Date());
+}
+function effectiveVersion(versions, today = todayISO()) {
+  const inForce = versions.filter((v) => v.effectiveDate <= today).sort((a, b) => b.effectiveDate.localeCompare(a.effectiveDate));
+  return inForce[0] ?? versions[versions.length - 1];
+}
+function upcomingVersion(versions, today = todayISO()) {
+  const announced = versions.filter((v) => v.publishedDate <= today && v.effectiveDate > today).sort((a, b) => a.effectiveDate.localeCompare(b.effectiveDate));
+  return announced[0] ?? null;
+}
+function policyInForce(effectiveDate, now = todayISO()) {
+  return now >= effectiveDate;
+}
+function renderHighlighted(text) {
+  return text.split(/(==.*?==)/g).map((part, i) => {
+    if (part.startsWith("==") && part.endsWith("==") && part.length >= 4) {
+      return /* @__PURE__ */ jsxRuntime.jsx("mark", { className: "legal-mark", children: part.slice(2, -2) }, i);
+    }
+    if (part.includes("\n")) {
+      const lines = part.split("\n");
+      return lines.map((line, j) => /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+        line,
+        j < lines.length - 1 && /* @__PURE__ */ jsxRuntime.jsx("br", {})
+      ] }, `${i}-${j}`));
+    }
+    return part;
+  });
+}
+function LegalDocument({
+  doc,
+  version,
+  className
+}) {
+  const v = version ?? effectiveVersion(doc.versions);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "article",
+    {
+      id: doc.docAnchor,
+      className: className ? `legal-document ${className}` : "legal-document",
+      children: v.sections.map((section) => /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "legal-section", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { id: `${doc.docAnchor}-${section.id}`, className: "legal-section-title", children: section.title }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "legal-section-body", children: section.content ?? section.body })
+      ] }, section.id))
+    }
+  );
+}
+var badgeLabel = {
+  added: "\uCD94\uAC00",
+  removed: "\uC0AD\uC81C",
+  changed: "\uBCC0\uACBD"
+};
+function VersionDiff({
+  changes,
+  fromVersion,
+  toVersion,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: className ? `legal-diff ${className}` : "legal-diff", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("h3", { className: "legal-diff-title", children: [
+      "\uC8FC\uC694 \uBCC0\uACBD \uC0AC\uD56D (v",
+      fromVersion,
+      " \u2192 v",
+      toVersion,
+      ")"
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "legal-diff-scroll", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "legal-diff-table", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("th", { children: "\uAD6C\uBD84" }),
+        /* @__PURE__ */ jsxRuntime.jsx("th", { children: "\uBCC0\uACBD \uC804" }),
+        /* @__PURE__ */ jsxRuntime.jsx("th", { children: "\uBCC0\uACBD \uD6C4" })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: changes.map((c, i) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("td", { className: "legal-diff-section", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: c.section }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: `legal-badge legal-badge--${c.type}`, children: badgeLabel[c.type] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("td", { children: c.type === "added" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "legal-diff-empty", children: "\u2014" }) : renderHighlighted(c.before ?? "") }),
+        /* @__PURE__ */ jsxRuntime.jsx("td", { children: c.type === "removed" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "legal-diff-empty", children: "\u2014" }) : renderHighlighted(c.after ?? "") })
+      ] }, i)) })
+    ] }) })
+  ] });
+}
+function VersionHistory({
+  versions,
+  selectedIdx,
+  onSelect,
+  className
+}) {
+  if (versions.length <= 1) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: className ? `legal-history ${className}` : "legal-history", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "legal-history-title", children: "\uC774\uC804 \uBC84\uC804" }),
+    /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "legal-history-list", children: versions.map((v, i) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => onSelect(i),
+        "aria-current": i === selectedIdx ? "true" : void 0,
+        className: i === selectedIdx ? "legal-history-item is-selected" : "legal-history-item",
+        children: [
+          "v",
+          v.version,
+          " (",
+          v.effectiveDate,
+          ")"
+        ]
+      }
+    ) }, v.version)) })
+  ] });
+}
+function UpcomingNotice({
+  docTitle,
+  version,
+  onPreview,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: className ? `legal-notice ${className}` : "legal-notice", children: /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "legal-notice-text", children: [
+    "\u{1F4E2} ",
+    /* @__PURE__ */ jsxRuntime.jsx("b", { children: docTitle }),
+    " \uBCC0\uACBD \uC608\uC815 \u2014 ",
+    /* @__PURE__ */ jsxRuntime.jsx("b", { children: version.effectiveDate }),
+    " \uC2DC\uD589 (v",
+    version.version,
+    ").",
+    version.summary ? ` ${version.summary}` : "",
+    version.adverse ? " \uC774\uC6A9\uC790\uC5D0\uAC8C \uBD88\uB9AC/\uC911\uB300\uD55C \uBCC0\uACBD\uC73C\uB85C \uC2DC\uD589 30\uC77C \uC804\uBD80\uD130 \uACF5\uC9C0\uD569\uB2C8\uB2E4." : ` (\uACF5\uACE0\uC77C ${version.publishedDate})`,
+    onPreview && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      " ",
+      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "legal-notice-preview", onClick: onPreview, children: "\uBCC0\uACBD \uC608\uC815\uBCF8 \uBCF4\uAE30" })
+    ] })
+  ] }) });
+}
+var defaultRenderLink = (href, children) => /* @__PURE__ */ jsxRuntime.jsx("a", { href, children });
+function PolicyNotice({
+  docs,
+  hrefFor,
+  today,
+  renderLink = defaultRenderLink,
+  storage,
+  className
+}) {
+  const store = storage ?? (typeof localStorage !== "undefined" ? localStorage : void 0);
+  const pending = docs.filter((doc) => doc.visibility === "public").map((doc) => ({ doc, up: upcomingVersion(doc.versions, today) })).filter((x) => x.up != null);
+  const dismissKey = "legal-policy-notice:" + pending.map((x) => `${x.doc.serviceId}:${x.doc.kind}@${x.up.version}`).join(",");
+  const [dismissed, setDismissed] = react.useState(() => store?.getItem(dismissKey) === "1");
+  if (pending.length === 0 || dismissed) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: className ? `legal-policy-notice ${className}` : "legal-policy-notice", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "legal-policy-notice-text", children: [
+      "\u{1F4E2}",
+      " ",
+      pending.map((x, i) => /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+        i > 0 ? " \xB7 " : "",
+        renderLink(hrefFor(x.doc), x.doc.title),
+        " ",
+        x.up.effectiveDate,
+        "\uBD80\uD130 \uBCC0\uACBD \uC608\uC815"
+      ] }, `${x.doc.serviceId}:${x.doc.kind}`))
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        className: "legal-policy-notice-dismiss",
+        "aria-label": "\uB2EB\uAE30",
+        onClick: () => {
+          store?.setItem(dismissKey, "1");
+          setDismissed(true);
+        },
+        children: "\u2715"
+      }
+    )
+  ] });
+}
+
+exports.LegalDocument = LegalDocument;
+exports.PolicyNotice = PolicyNotice;
+exports.UpcomingNotice = UpcomingNotice;
+exports.VersionDiff = VersionDiff;
+exports.VersionHistory = VersionHistory;
+exports.effectiveVersion = effectiveVersion;
+exports.policyInForce = policyInForce;
+exports.renderHighlighted = renderHighlighted;
+exports.todayISO = todayISO;
+exports.upcomingVersion = upcomingVersion;

package/dist/index.d.cts

@@ -0,0 +1,89 @@
+import { L as LegalDocMeta, a as LegalVersion, V as VersionChange } from './helpers-CRGM1DHb.cjs';
+export { D as DataController, b as LegalDocKind, c as LegalSection, d as LegalVisibility, e as effectiveVersion, p as policyInForce, t as todayISO, u as upcomingVersion } from './helpers-CRGM1DHb.cjs';
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+/**
+ * Render text with `==highlight==` spans wrapped in <mark class="legal-mark">,
+ * and bare "\n" turned into <br/>. Used by the diff table to call out the exact
+ * words that changed between two versions.
+ */
+declare function renderHighlighted(text: string): ReactNode;
+
+/**
+ * Renders the titled sections of a legal document's effective version, with
+ * stable deep-link anchors: `${doc.docAnchor}` on the article and
+ * `${doc.docAnchor}-${section.id}` on each heading. Pass `version` to render a
+ * specific version instead of the effective one.
+ *
+ * Each section renders its Markdown `body` as text; the deprecated `content`
+ * (app JSX) is used only as a fallback when `body` is empty. Markdown is not
+ * parsed here — the public hub renders Markdown server-side; this component is
+ * for in-app JSX docs.
+ */
+declare function LegalDocument({ doc, version, className, }: {
+    doc: LegalDocMeta;
+    version?: LegalVersion;
+    className?: string;
+}): react.JSX.Element;
+
+/**
+ * 3-column "변경 전 / 변경 후" table for the diff between two versions.
+ * `==highlight==` spans in before/after text are marked. Styleless — themed via
+ * the `legal-*` classes / CSS variables in the shipped stylesheet.
+ */
+declare function VersionDiff({ changes, fromVersion, toVersion, className, }: {
+    changes: VersionChange[];
+    fromVersion: string;
+    toVersion: string;
+    className?: string;
+}): react.JSX.Element;
+
+/**
+ * Version picker / 이전 버전 list. Controlled: the parent owns `selectedIdx`
+ * and updates it from `onSelect`. Renders nothing for a single-version doc.
+ */
+declare function VersionHistory({ versions, selectedIdx, onSelect, className, }: {
+    versions: LegalVersion[];
+    selectedIdx: number;
+    onSelect: (idx: number) => void;
+    className?: string;
+}): react.JSX.Element | null;
+
+/**
+ * Per-document advance-notice card (공시): "v2.0이 YYYY-MM-DD부터 시행됩니다".
+ * Render it on a document page when `upcomingVersion(doc.versions)` is non-null.
+ * `onPreview` (optional) lets the page switch the shown version to the upcoming one.
+ */
+declare function UpcomingNotice({ docTitle, version, onPreview, className, }: {
+    docTitle: string;
+    version: LegalVersion;
+    onPreview?: () => void;
+    className?: string;
+}): react.JSX.Element;
+
+/** Router-agnostic link renderer. Defaults to a plain anchor. */
+type RenderLink = (href: string, children: ReactNode) => ReactNode;
+/**
+ * Site-wide advance-notice banner (사이트 공통 사전공시 배너): shows when any
+ * document has an announced-but-not-yet-effective version. Dismissible per
+ * pending-version-set (so a new announcement re-shows it). Renders nothing when
+ * nothing is pending.
+ *
+ * Router-agnostic: pass `renderLink` to use the app's Link (next/link,
+ * react-router) instead of a plain <a>.
+ *
+ * Interactive (uses state) — mount inside a client boundary (Next.js "use client").
+ */
+declare function PolicyNotice({ docs, hrefFor, today, renderLink, storage, className, }: {
+    docs: LegalDocMeta[];
+    /** Maps a document to its route, e.g. (doc) => `/${doc.kind}`. */
+    hrefFor: (doc: LegalDocMeta) => string;
+    today?: string;
+    renderLink?: RenderLink;
+    /** Persistence for the dismissed flag. Defaults to localStorage when available. */
+    storage?: Pick<Storage, "getItem" | "setItem">;
+    className?: string;
+}): react.JSX.Element | null;
+
+export { LegalDocMeta, LegalDocument, LegalVersion, PolicyNotice, type RenderLink, UpcomingNotice, VersionChange, VersionDiff, VersionHistory, renderHighlighted };

package/dist/index.d.ts

@@ -0,0 +1,89 @@
+import { L as LegalDocMeta, a as LegalVersion, V as VersionChange } from './helpers-CRGM1DHb.js';
+export { D as DataController, b as LegalDocKind, c as LegalSection, d as LegalVisibility, e as effectiveVersion, p as policyInForce, t as todayISO, u as upcomingVersion } from './helpers-CRGM1DHb.js';
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+/**
+ * Render text with `==highlight==` spans wrapped in <mark class="legal-mark">,
+ * and bare "\n" turned into <br/>. Used by the diff table to call out the exact
+ * words that changed between two versions.
+ */
+declare function renderHighlighted(text: string): ReactNode;
+
+/**
+ * Renders the titled sections of a legal document's effective version, with
+ * stable deep-link anchors: `${doc.docAnchor}` on the article and
+ * `${doc.docAnchor}-${section.id}` on each heading. Pass `version` to render a
+ * specific version instead of the effective one.
+ *
+ * Each section renders its Markdown `body` as text; the deprecated `content`
+ * (app JSX) is used only as a fallback when `body` is empty. Markdown is not
+ * parsed here — the public hub renders Markdown server-side; this component is
+ * for in-app JSX docs.
+ */
+declare function LegalDocument({ doc, version, className, }: {
+    doc: LegalDocMeta;
+    version?: LegalVersion;
+    className?: string;
+}): react.JSX.Element;
+
+/**
+ * 3-column "변경 전 / 변경 후" table for the diff between two versions.
+ * `==highlight==` spans in before/after text are marked. Styleless — themed via
+ * the `legal-*` classes / CSS variables in the shipped stylesheet.
+ */
+declare function VersionDiff({ changes, fromVersion, toVersion, className, }: {
+    changes: VersionChange[];
+    fromVersion: string;
+    toVersion: string;
+    className?: string;
+}): react.JSX.Element;
+
+/**
+ * Version picker / 이전 버전 list. Controlled: the parent owns `selectedIdx`
+ * and updates it from `onSelect`. Renders nothing for a single-version doc.
+ */
+declare function VersionHistory({ versions, selectedIdx, onSelect, className, }: {
+    versions: LegalVersion[];
+    selectedIdx: number;
+    onSelect: (idx: number) => void;
+    className?: string;
+}): react.JSX.Element | null;
+
+/**
+ * Per-document advance-notice card (공시): "v2.0이 YYYY-MM-DD부터 시행됩니다".
+ * Render it on a document page when `upcomingVersion(doc.versions)` is non-null.
+ * `onPreview` (optional) lets the page switch the shown version to the upcoming one.
+ */
+declare function UpcomingNotice({ docTitle, version, onPreview, className, }: {
+    docTitle: string;
+    version: LegalVersion;
+    onPreview?: () => void;
+    className?: string;
+}): react.JSX.Element;
+
+/** Router-agnostic link renderer. Defaults to a plain anchor. */
+type RenderLink = (href: string, children: ReactNode) => ReactNode;
+/**
+ * Site-wide advance-notice banner (사이트 공통 사전공시 배너): shows when any
+ * document has an announced-but-not-yet-effective version. Dismissible per
+ * pending-version-set (so a new announcement re-shows it). Renders nothing when
+ * nothing is pending.
+ *
+ * Router-agnostic: pass `renderLink` to use the app's Link (next/link,
+ * react-router) instead of a plain <a>.
+ *
+ * Interactive (uses state) — mount inside a client boundary (Next.js "use client").
+ */
+declare function PolicyNotice({ docs, hrefFor, today, renderLink, storage, className, }: {
+    docs: LegalDocMeta[];
+    /** Maps a document to its route, e.g. (doc) => `/${doc.kind}`. */
+    hrefFor: (doc: LegalDocMeta) => string;
+    today?: string;
+    renderLink?: RenderLink;
+    /** Persistence for the dismissed flag. Defaults to localStorage when available. */
+    storage?: Pick<Storage, "getItem" | "setItem">;
+    className?: string;
+}): react.JSX.Element | null;
+
+export { LegalDocMeta, LegalDocument, LegalVersion, PolicyNotice, type RenderLink, UpcomingNotice, VersionChange, VersionDiff, VersionHistory, renderHighlighted };

package/dist/index.js

@@ -0,0 +1,166 @@
+import { effectiveVersion, upcomingVersion } from './chunk-MDFCRQ5H.js';
+export { effectiveVersion, policyInForce, todayISO, upcomingVersion } from './chunk-MDFCRQ5H.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState } from 'react';
+
+function renderHighlighted(text) {
+  return text.split(/(==.*?==)/g).map((part, i) => {
+    if (part.startsWith("==") && part.endsWith("==") && part.length >= 4) {
+      return /* @__PURE__ */ jsx("mark", { className: "legal-mark", children: part.slice(2, -2) }, i);
+    }
+    if (part.includes("\n")) {
+      const lines = part.split("\n");
+      return lines.map((line, j) => /* @__PURE__ */ jsxs("span", { children: [
+        line,
+        j < lines.length - 1 && /* @__PURE__ */ jsx("br", {})
+      ] }, `${i}-${j}`));
+    }
+    return part;
+  });
+}
+function LegalDocument({
+  doc,
+  version,
+  className
+}) {
+  const v = version ?? effectiveVersion(doc.versions);
+  return /* @__PURE__ */ jsx(
+    "article",
+    {
+      id: doc.docAnchor,
+      className: className ? `legal-document ${className}` : "legal-document",
+      children: v.sections.map((section) => /* @__PURE__ */ jsxs("section", { className: "legal-section", children: [
+        /* @__PURE__ */ jsx("h2", { id: `${doc.docAnchor}-${section.id}`, className: "legal-section-title", children: section.title }),
+        /* @__PURE__ */ jsx("div", { className: "legal-section-body", children: section.content ?? section.body })
+      ] }, section.id))
+    }
+  );
+}
+var badgeLabel = {
+  added: "\uCD94\uAC00",
+  removed: "\uC0AD\uC81C",
+  changed: "\uBCC0\uACBD"
+};
+function VersionDiff({
+  changes,
+  fromVersion,
+  toVersion,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: className ? `legal-diff ${className}` : "legal-diff", children: [
+    /* @__PURE__ */ jsxs("h3", { className: "legal-diff-title", children: [
+      "\uC8FC\uC694 \uBCC0\uACBD \uC0AC\uD56D (v",
+      fromVersion,
+      " \u2192 v",
+      toVersion,
+      ")"
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "legal-diff-scroll", children: /* @__PURE__ */ jsxs("table", { className: "legal-diff-table", children: [
+      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+        /* @__PURE__ */ jsx("th", { children: "\uAD6C\uBD84" }),
+        /* @__PURE__ */ jsx("th", { children: "\uBCC0\uACBD \uC804" }),
+        /* @__PURE__ */ jsx("th", { children: "\uBCC0\uACBD \uD6C4" })
+      ] }) }),
+      /* @__PURE__ */ jsx("tbody", { children: changes.map((c, i) => /* @__PURE__ */ jsxs("tr", { children: [
+        /* @__PURE__ */ jsxs("td", { className: "legal-diff-section", children: [
+          /* @__PURE__ */ jsx("span", { children: c.section }),
+          /* @__PURE__ */ jsx("span", { className: `legal-badge legal-badge--${c.type}`, children: badgeLabel[c.type] })
+        ] }),
+        /* @__PURE__ */ jsx("td", { children: c.type === "added" ? /* @__PURE__ */ jsx("span", { className: "legal-diff-empty", children: "\u2014" }) : renderHighlighted(c.before ?? "") }),
+        /* @__PURE__ */ jsx("td", { children: c.type === "removed" ? /* @__PURE__ */ jsx("span", { className: "legal-diff-empty", children: "\u2014" }) : renderHighlighted(c.after ?? "") })
+      ] }, i)) })
+    ] }) })
+  ] });
+}
+function VersionHistory({
+  versions,
+  selectedIdx,
+  onSelect,
+  className
+}) {
+  if (versions.length <= 1) return null;
+  return /* @__PURE__ */ jsxs("div", { className: className ? `legal-history ${className}` : "legal-history", children: [
+    /* @__PURE__ */ jsx("h3", { className: "legal-history-title", children: "\uC774\uC804 \uBC84\uC804" }),
+    /* @__PURE__ */ jsx("ul", { className: "legal-history-list", children: versions.map((v, i) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => onSelect(i),
+        "aria-current": i === selectedIdx ? "true" : void 0,
+        className: i === selectedIdx ? "legal-history-item is-selected" : "legal-history-item",
+        children: [
+          "v",
+          v.version,
+          " (",
+          v.effectiveDate,
+          ")"
+        ]
+      }
+    ) }, v.version)) })
+  ] });
+}
+function UpcomingNotice({
+  docTitle,
+  version,
+  onPreview,
+  className
+}) {
+  return /* @__PURE__ */ jsx("div", { className: className ? `legal-notice ${className}` : "legal-notice", children: /* @__PURE__ */ jsxs("p", { className: "legal-notice-text", children: [
+    "\u{1F4E2} ",
+    /* @__PURE__ */ jsx("b", { children: docTitle }),
+    " \uBCC0\uACBD \uC608\uC815 \u2014 ",
+    /* @__PURE__ */ jsx("b", { children: version.effectiveDate }),
+    " \uC2DC\uD589 (v",
+    version.version,
+    ").",
+    version.summary ? ` ${version.summary}` : "",
+    version.adverse ? " \uC774\uC6A9\uC790\uC5D0\uAC8C \uBD88\uB9AC/\uC911\uB300\uD55C \uBCC0\uACBD\uC73C\uB85C \uC2DC\uD589 30\uC77C \uC804\uBD80\uD130 \uACF5\uC9C0\uD569\uB2C8\uB2E4." : ` (\uACF5\uACE0\uC77C ${version.publishedDate})`,
+    onPreview && /* @__PURE__ */ jsxs(Fragment, { children: [
+      " ",
+      /* @__PURE__ */ jsx("button", { type: "button", className: "legal-notice-preview", onClick: onPreview, children: "\uBCC0\uACBD \uC608\uC815\uBCF8 \uBCF4\uAE30" })
+    ] })
+  ] }) });
+}
+var defaultRenderLink = (href, children) => /* @__PURE__ */ jsx("a", { href, children });
+function PolicyNotice({
+  docs,
+  hrefFor,
+  today,
+  renderLink = defaultRenderLink,
+  storage,
+  className
+}) {
+  const store = storage ?? (typeof localStorage !== "undefined" ? localStorage : void 0);
+  const pending = docs.filter((doc) => doc.visibility === "public").map((doc) => ({ doc, up: upcomingVersion(doc.versions, today) })).filter((x) => x.up != null);
+  const dismissKey = "legal-policy-notice:" + pending.map((x) => `${x.doc.serviceId}:${x.doc.kind}@${x.up.version}`).join(",");
+  const [dismissed, setDismissed] = useState(() => store?.getItem(dismissKey) === "1");
+  if (pending.length === 0 || dismissed) return null;
+  return /* @__PURE__ */ jsxs("div", { className: className ? `legal-policy-notice ${className}` : "legal-policy-notice", children: [
+    /* @__PURE__ */ jsxs("span", { className: "legal-policy-notice-text", children: [
+      "\u{1F4E2}",
+      " ",
+      pending.map((x, i) => /* @__PURE__ */ jsxs("span", { children: [
+        i > 0 ? " \xB7 " : "",
+        renderLink(hrefFor(x.doc), x.doc.title),
+        " ",
+        x.up.effectiveDate,
+        "\uBD80\uD130 \uBCC0\uACBD \uC608\uC815"
+      ] }, `${x.doc.serviceId}:${x.doc.kind}`))
+    ] }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "legal-policy-notice-dismiss",
+        "aria-label": "\uB2EB\uAE30",
+        onClick: () => {
+          store?.setItem(dismissKey, "1");
+          setDismissed(true);
+        },
+        children: "\u2715"
+      }
+    )
+  ] });
+}
+
+export { LegalDocument, PolicyNotice, UpcomingNotice, VersionDiff, VersionHistory, renderHighlighted };

package/dist/styles.css

@@ -0,0 +1,191 @@
+/*
+ * Optional default theme for @etamong-lab/legal.
+ *
+ * Import once in the app: `import "@etamong-lab/legal/styles.css";`
+ * Override the CSS variables to theme (including dark mode) — e.g.
+ *   .dark { --legal-border: #3f3f46; --legal-muted: #a1a1aa; ... }
+ * Or skip this file entirely and style the `legal-*` classes yourself.
+ */
+:root {
+  --legal-fg: #3f3f46;
+  --legal-muted: #71717a;
+  --legal-border: #e4e4e7;
+  --legal-surface: #fafafa;
+  --legal-accent: #2563eb;
+  --legal-mark-bg: #fef08a;
+  --legal-mark-fg: inherit;
+  --legal-notice-bg: #eff6ff;
+  --legal-notice-border: #bfdbfe;
+  --legal-notice-fg: #1e40af;
+  --legal-badge-added-bg: #dcfce7;
+  --legal-badge-added-fg: #15803d;
+  --legal-badge-removed-bg: #fee2e2;
+  --legal-badge-removed-fg: #b91c1c;
+  --legal-badge-changed-bg: #fef3c7;
+  --legal-badge-changed-fg: #b45309;
+}
+
+.legal-document {
+  color: var(--legal-fg);
+  font-size: 0.875rem;
+  line-height: 1.7;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+.legal-section-title {
+  font-size: 1rem;
+  font-weight: 600;
+  margin: 0 0 0.5rem;
+}
+.legal-section-body > * + * {
+  margin-top: 0.5rem;
+}
+
+.legal-mark {
+  background: var(--legal-mark-bg);
+  color: var(--legal-mark-fg);
+  border-radius: 0.25rem;
+  padding: 0 0.125rem;
+}
+
+/* --- diff table --- */
+.legal-diff {
+  margin-top: 2.5rem;
+}
+.legal-diff-title {
+  font-size: 0.875rem;
+  font-weight: 600;
+  margin: 0 0 0.75rem;
+}
+.legal-diff-scroll {
+  overflow-x: auto;
+  border: 1px solid var(--legal-border);
+  border-radius: 0.5rem;
+}
+.legal-diff-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.875rem;
+}
+.legal-diff-table th {
+  text-align: left;
+  font-weight: 500;
+  color: var(--legal-muted);
+  background: var(--legal-surface);
+  padding: 0.5rem 0.75rem;
+  border-bottom: 1px solid var(--legal-border);
+}
+.legal-diff-table td {
+  vertical-align: top;
+  color: var(--legal-muted);
+  padding: 0.625rem 0.75rem;
+  border-top: 1px solid var(--legal-border);
+}
+.legal-diff-section span:first-child {
+  color: var(--legal-fg);
+}
+.legal-diff-empty {
+  opacity: 0.5;
+}
+.legal-badge {
+  display: inline-block;
+  margin-left: 0.375rem;
+  padding: 0.0625rem 0.375rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  border-radius: 0.25rem;
+}
+.legal-badge--added {
+  background: var(--legal-badge-added-bg);
+  color: var(--legal-badge-added-fg);
+}
+.legal-badge--removed {
+  background: var(--legal-badge-removed-bg);
+  color: var(--legal-badge-removed-fg);
+}
+.legal-badge--changed {
+  background: var(--legal-badge-changed-bg);
+  color: var(--legal-badge-changed-fg);
+}
+
+/* --- version history --- */
+.legal-history {
+  margin-top: 3rem;
+  border-top: 1px solid var(--legal-border);
+  padding-top: 1.5rem;
+}
+.legal-history-title {
+  font-size: 0.875rem;
+  font-weight: 600;
+  margin: 0 0 0.75rem;
+}
+.legal-history-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.legal-history-item {
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  font-size: 0.875rem;
+  color: var(--legal-accent);
+}
+.legal-history-item.is-selected {
+  color: var(--legal-fg);
+  font-weight: 500;
+  cursor: default;
+}
+
+/* --- per-doc upcoming notice --- */
+.legal-notice {
+  background: var(--legal-notice-bg);
+  border: 1px solid var(--legal-notice-border);
+  border-radius: 0.5rem;
+  padding: 0.75rem 1rem;
+  margin-bottom: 1.5rem;
+}
+.legal-notice-text {
+  margin: 0;
+  font-size: 0.875rem;
+  color: var(--legal-notice-fg);
+}
+.legal-notice-preview {
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  font-weight: 500;
+  text-decoration: underline;
+  color: inherit;
+}
+
+/* --- site-wide policy banner --- */
+.legal-policy-notice {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  background: var(--legal-notice-bg);
+  border-bottom: 1px solid var(--legal-notice-border);
+  color: var(--legal-notice-fg);
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+}
+.legal-policy-notice a {
+  color: inherit;
+  font-weight: 500;
+}
+.legal-policy-notice-dismiss {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: inherit;
+  font-size: 1rem;
+  line-height: 1;
+}

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@etamong-playground/legal",
+  "version": "0.3.1",
+  "description": "Shared versioned legal-document model + headless renderers (Terms/Privacy, version diff, advance-notice) for etamong-lab apps.",
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./helpers": {
+      "types": "./dist/helpers.d.ts",
+      "import": "./dist/helpers.js",
+      "require": "./dist/helpers.cjs"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.12",
+    "react": "^18.3.1",
+    "tsup": "^8.3.5",
+    "typescript": "^5.6.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "UNLICENSED"
+}