@reactwright/template-letter 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Reactwright contributors
+
+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,105 @@
+# @reactwright/template-letter
+
+Formal business-letter template for the Reactwright document engine.
+Single page (typically), US Letter, Times 11pt block-style body.
+Composes the conventional regions of a formal letter via section
+roles: letterhead, date, addressee, subject, salutation, body,
+closing, signature.
+
+## When to use this over alternatives
+
+- Pick `@reactwright/template-letter` for cover letters, formal
+  business correspondence, legal-style letters, or anything that
+  wants the conventional letterhead-date-addressee-body-closing
+  shape on a single page.
+- For anything multi-page with sections, headings, and figures, use
+  `@reactwright/template-essay`, `@reactwright/template-report`, or
+  one of the IEEE variants.
+
+## Format conventions
+
+- US Letter, 1" margins all sides.
+- Body: Times New Roman 11pt, line-height 1.3, single-spaced.
+- Letterhead (`role="letterhead"`): sender's name as 14pt bold left-
+  aligned heading; address + contact info as 10pt left-aligned
+  paragraphs below.
+- Date (`role="date"`): right-aligned 11pt below the letterhead.
+- Addressee (`role="addressee"`): left-aligned 11pt block; name,
+  title, organization, address as separate paragraphs.
+- Subject (`role="subject"`): optional bold 11pt "Re: …" line.
+- Salutation (`role="salutation"`): "Dear …,"
+- Body: any paragraphs *not* inside one of the named regions get
+  block-style body typography — no indent, 12pt top margin between
+  paragraphs.
+- Closing (`role="closing"`): "Sincerely,"
+- Signature (`role="signature"`): name + title + organization, with
+  48pt top margin to leave room for a handwritten signature.
+
+No page numbers and no running header.
+
+## Usage
+
+```tsx
+import "reactwright/jsx";
+import { Template } from "@reactwright/template-letter";
+
+export { Template };
+
+export default function MyLetter() {
+  return (
+    <document title="Letter to …" author="Sender">
+      <section role="letterhead" title="Alex Marsh">
+        <p>142 Pine Street</p>
+        <p>Carrick, NY 10001</p>
+        <p>alex@example.com · (212) 555-0142</p>
+      </section>
+
+      <section role="date" title="">
+        <p>1 October 2026</p>
+      </section>
+
+      <section role="addressee" title="">
+        <p>Dr. R. Quinlan</p>
+        <p>Department of Computer Science</p>
+        <p>State University</p>
+        <p>Albany, NY 12222</p>
+      </section>
+
+      <section role="subject" title="">
+        <p>Re: Submission for Q3 review</p>
+      </section>
+
+      <section role="salutation" title="">
+        <p>Dear Dr. Quinlan,</p>
+      </section>
+
+      <p>First body paragraph.</p>
+      <p>Second body paragraph.</p>
+
+      <section role="closing" title="">
+        <p>Sincerely,</p>
+      </section>
+
+      <section role="signature" title="">
+        <p>Alex Marsh</p>
+        <p>Independent Researcher</p>
+      </section>
+    </document>
+  );
+}
+```
+
+## Implementation notes
+
+Each named region is a `<section role="…">`. The template's rules use
+the `within: { kind: "section", role: "<name>" }` selector to scope
+typography. Body paragraphs are anything *not* inside one of the
+named-role sections, so the author can intersperse plain `<p>` blocks
+between the salutation and the closing without needing to wrap them
+in a body region.
+
+Use `title=""` on each region to suppress the section-heading; the
+template does not emit one.
+
+Styling is expressed entirely via the styling dialect (`<styles>` +
+`<rule>`). The exported `LETTER_CSS` is an empty string.

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@reactwright/template-letter",
+  "version": "0.1.0",
+  "description": "Formal business letter template for the Reactwright document engine.",
+  "license": "MIT",
+  "author": "Reactwright contributors",
+  "homepage": "https://github.com/PurpleReverie/reactwright/tree/main/packages/template-letter#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/PurpleReverie/reactwright.git",
+    "directory": "packages/template-letter"
+  },
+  "bugs": {
+    "url": "https://github.com/PurpleReverie/reactwright/issues"
+  },
+  "keywords": ["reactwright", "template", "letter", "correspondence", "business"],
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
+    }
+  },
+  "files": [
+    "src",
+    "LICENSE",
+    "README.md"
+  ],
+  "scripts": {
+    "check": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "reactwright": "workspace:*",
+    "react": "^18 || ^19"
+  },
+  "devDependencies": {
+    "@types/node": "^22.15.18",
+    "@types/react": "^19.1.2",
+    "react": "^19.1.0",
+    "reactwright": "workspace:*",
+    "typescript": "^5.8.3"
+  }
+}

package/src/index.ts

@@ -0,0 +1,7 @@
+// Formal business-letter helper package. Bundles a Template that
+// styles the conventional regions of a formal letter (letterhead,
+// date, addressee, subject, salutation, body, closing, signature)
+// via section-role rules. Authors tag each region with `role` and
+// the template's rules pick it up — no need for engine-specific
+// markup.
+export { Template, LETTER_STYLES, LETTER_CSS } from "./template.js";

package/src/template.tsx

@@ -0,0 +1,243 @@
+import "reactwright/jsx";
+
+// Formal business-letter template. One page, US Letter, 1" margins,
+// Times 11pt block-style body (no indent, paragraph spacing). The
+// letter is composed of named regions, each tagged with `role`:
+//
+//   role="letterhead"  — sender's name + address + contact info, top
+//                        of page, left-aligned modern style.
+//   role="date"        — right-aligned date line below letterhead.
+//   role="addressee"   — left-aligned recipient block (name, title,
+//                        organization, address).
+//   role="subject"     — optional bold "Re: …" line.
+//   role="salutation"  — "Dear …,"
+//   role="body"        — one or more paragraphs of body prose. NOT
+//                        a section role; just normal author-side
+//                        sections without a role get treated as body.
+//   role="closing"     — "Sincerely,"
+//   role="signature"   — name + title + organization. The template
+//                        adds three blank lines above for the
+//                        handwritten signature.
+//
+// No page numbers, no running headers. Single-page assumed; the
+// engine will paginate if the body overflows.
+//
+// Slice-1+ dialect only. customCss is empty.
+
+export const LETTER_STYLES = `
+  .letter-letterhead {
+    margin: 0 0 24pt 0;
+  }
+
+  .letter-letterhead-heading {
+    font-size: 14pt;
+    font-weight: bold;
+    font-family: 'Times New Roman', Times, serif;
+    text-align: left;
+    margin: 0 0 2pt 0;
+    text-indent: 0;
+    break: after(avoid);
+  }
+
+  .letter-letterhead-p {
+    font-size: 10pt;
+    margin: 0;
+    text-indent: 0;
+    text-align: left;
+    line-height: 1.3;
+  }
+
+  .letter-date {
+    margin: 0 0 18pt 0;
+  }
+
+  .letter-date-p {
+    margin: 0;
+    text-indent: 0;
+    text-align: right;
+    font-size: 11pt;
+  }
+
+  .letter-addressee {
+    margin: 0 0 18pt 0;
+  }
+
+  .letter-addressee-p {
+    margin: 0;
+    text-indent: 0;
+    text-align: left;
+    font-size: 11pt;
+    line-height: 1.3;
+  }
+
+  .letter-subject {
+    margin: 0 0 12pt 0;
+  }
+
+  .letter-subject-p {
+    margin: 0;
+    text-indent: 0;
+    text-align: left;
+    font-size: 11pt;
+    font-weight: bold;
+  }
+
+  .letter-salutation {
+    margin: 0 0 12pt 0;
+  }
+
+  .letter-salutation-p {
+    margin: 0;
+    text-indent: 0;
+    text-align: left;
+    font-size: 11pt;
+  }
+
+  .letter-body-p {
+    margin: 12pt 0 0 0;
+    text-indent: 0;
+    text-align: left;
+    font-size: 11pt;
+  }
+
+  .letter-closing {
+    margin: 18pt 0 0 0;
+  }
+
+  .letter-closing-p {
+    margin: 0;
+    text-indent: 0;
+    text-align: left;
+    font-size: 11pt;
+  }
+
+  .letter-signature {
+    margin: 48pt 0 0 0;
+  }
+
+  .letter-signature-p {
+    margin: 0;
+    text-indent: 0;
+    text-align: left;
+    font-size: 11pt;
+    line-height: 1.3;
+  }
+
+  .letter-code-inline {
+    background: none;
+    padding: 0;
+    border-radius: 0;
+    font-family: 'SFMono-Regular', Consolas, Menlo, monospace;
+    font-size: 0.92em;
+  }
+`;
+
+// LETTER_CSS is empty. All styling is expressed via the dialect's
+// <styles> block + <rule> bindings.
+export const LETTER_CSS = "";
+
+export function Template() {
+  return (
+    <page
+      page={{
+        size: "letter",
+        marginTop: "1in",
+        marginBottom: "1in",
+        marginLeft: "1in",
+        marginRight: "1in"
+      }}
+      typography={{
+        fontFamily: "'Times New Roman', Times, serif",
+        fontSize: "11pt",
+        lineHeight: 1.3,
+        textAlign: "left"
+      }}
+    >
+      <styles>{LETTER_STYLES}</styles>
+
+      <rule match={{ kind: "code" }} className="letter-code-inline" />
+
+      {/* Letterhead */}
+      <rule match={{ kind: "section", role: "letterhead" }} className="letter-letterhead" />
+      <rule
+        match={{ kind: "section-heading", within: { kind: "section", role: "letterhead" } }}
+        className="letter-letterhead-heading"
+      />
+      <rule
+        match={{ kind: "paragraph", within: { kind: "section", role: "letterhead" } }}
+        className="letter-letterhead-p"
+      />
+
+      {/* Date */}
+      <rule match={{ kind: "section", role: "date" }} className="letter-date" />
+      <rule
+        match={{ kind: "paragraph", within: { kind: "section", role: "date" } }}
+        className="letter-date-p"
+      />
+
+      {/* Addressee */}
+      <rule match={{ kind: "section", role: "addressee" }} className="letter-addressee" />
+      <rule
+        match={{ kind: "paragraph", within: { kind: "section", role: "addressee" } }}
+        className="letter-addressee-p"
+      />
+
+      {/* Subject */}
+      <rule match={{ kind: "section", role: "subject" }} className="letter-subject" />
+      <rule
+        match={{ kind: "paragraph", within: { kind: "section", role: "subject" } }}
+        className="letter-subject-p"
+      />
+
+      {/* Salutation */}
+      <rule match={{ kind: "section", role: "salutation" }} className="letter-salutation" />
+      <rule
+        match={{ kind: "paragraph", within: { kind: "section", role: "salutation" } }}
+        className="letter-salutation-p"
+      />
+
+      {/* Closing */}
+      <rule match={{ kind: "section", role: "closing" }} className="letter-closing" />
+      <rule
+        match={{ kind: "paragraph", within: { kind: "section", role: "closing" } }}
+        className="letter-closing-p"
+      />
+
+      {/* Signature block — extra top margin to leave room for a
+          handwritten signature. */}
+      <rule match={{ kind: "section", role: "signature" }} className="letter-signature" />
+      <rule
+        match={{ kind: "paragraph", within: { kind: "section", role: "signature" } }}
+        className="letter-signature-p"
+      />
+
+      {/* Body paragraphs — any paragraph that isn't in a named region
+          gets block-style body typography with paragraph spacing. */}
+      <rule
+        match={{
+          kind: "paragraph",
+          not: {
+            or: [
+              { within: { kind: "section", role: "letterhead" } },
+              { within: { kind: "section", role: "date" } },
+              { within: { kind: "section", role: "addressee" } },
+              { within: { kind: "section", role: "subject" } },
+              { within: { kind: "section", role: "salutation" } },
+              { within: { kind: "section", role: "closing" } },
+              { within: { kind: "section", role: "signature" } }
+            ]
+          }
+        }}
+        className="letter-body-p"
+      />
+
+      <stack gap="0">
+        <region>
+          <slot name="title" />
+          <slot name="author" />
+          <slot name="body" />
+        </region>
+      </stack>
+    </page>
+  );
+}