@relevate/katachi 0.1.0

package/examples/basic/dist/react/media-frame.tsx

@@ -0,0 +1,41 @@
+import type { ReactNode } from "react";
+
+
+export type MediaFrameProps = {
+  eyebrow?: string;
+  caption_html?: string;
+  children?: ReactNode;
+};
+
+export default function MediaFrame({ eyebrow, caption_html, children }: MediaFrameProps) {
+  return (
+    <figure
+      className="overflow-hidden rounded-[28px] border border-slate-200 bg-white shadow-sm"
+    >
+      {(eyebrow !== null) && (
+        <>
+          <div
+            className="border-b border-slate-200 px-5 py-3 text-[11px] font-semibold uppercase tracking-[0.28em] text-slate-500"
+          >
+            {eyebrow}
+          </div>
+        </>
+      )}
+      <div
+        className="bg-slate-50 p-4"
+      >
+        {children}
+      </div>
+      {(caption_html !== null) && (
+        <>
+          <figcaption
+            className="border-t border-slate-200 px-5 py-4 text-sm leading-6 text-slate-600"
+          >
+            {caption_html}
+          </figcaption>
+        </>
+      )}
+    </figure>
+  );
+}
+

package/examples/basic/dist/react/notice-panel.tsx

@@ -0,0 +1,53 @@
+import type { ReactNode } from "react";
+import Glyph from "./glyph";
+
+
+export type NoticePanelProps = {
+  tone: string;
+  title: string;
+  icon: string;
+  children?: ReactNode;
+};
+
+export default function NoticePanel({ tone, title, icon, children }: NoticePanelProps) {
+  return (
+    <aside
+      className={["rounded-3xl border px-5 py-4 backdrop-blur-sm", (tone === "calm") ? "border-sky-200 bg-sky-50/80" : null, (tone === "urgent") ? "border-rose-200 bg-rose-50/80" : null, (tone === "success") ? "border-emerald-200 bg-emerald-50/80" : null].filter(Boolean).join(" ")}
+    >
+      <div
+        className="flex items-start gap-3"
+      >
+        <Glyph
+          className="mt-0.5 h-5 w-5 shrink-0"
+          tone={tone}
+          size="18"
+          name={icon}
+        />
+        <div
+          className="min-w-0 flex-1"
+        >
+          <h3
+            className="text-sm font-semibold tracking-tight"
+          >
+            {title}
+          </h3>
+          <div
+            className="mt-2 text-sm leading-6 text-slate-700"
+          >
+            {children}
+          </div>
+        </div>
+      </div>
+      {(tone === "urgent") && (
+        <>
+          <p
+            className="mt-3 text-xs font-medium uppercase tracking-[0.24em] text-rose-700"
+          >
+            Action recommended
+          </p>
+        </>
+      )}
+    </aside>
+  );
+}
+

package/examples/basic/dist/react/resource-tile.tsx

@@ -0,0 +1,63 @@
+import type { ReactNode } from "react";
+import Glyph from "./glyph";
+
+
+export type ResourceTileProps = {
+  href: string;
+  title_html: string;
+  summary_html: string;
+  eyebrow_html?: string;
+  icon: string;
+  selected: boolean;
+};
+
+export default function ResourceTile({ href, title_html, summary_html, eyebrow_html, icon, selected }: ResourceTileProps) {
+  return (
+    <li
+      className="list-none"
+      role="option"
+      tabIndex={-1}
+      aria-selected={selected}
+    >
+      <a
+        href={href}
+        className="group block rounded-2xl border border-slate-200 bg-white p-4 transition hover:border-slate-300 hover:shadow-sm"
+      >
+        <div
+          className="flex items-start gap-3"
+        >
+          <Glyph
+            className="mt-0.5 h-5 w-5 shrink-0 text-slate-500"
+            tone="slate"
+            size="18"
+            name={icon}
+          />
+          <div
+            className="min-w-0 flex-1"
+          >
+            {(eyebrow_html !== null) && (
+              <>
+                <div
+                  className="truncate text-xs font-medium uppercase tracking-[0.2em] text-slate-500"
+                >
+                  {eyebrow_html}
+                </div>
+              </>
+            )}
+            <div
+              className="mt-1 truncate text-sm font-semibold text-slate-900"
+            >
+              {title_html}
+            </div>
+            <p
+              className="mt-1 text-sm leading-6 text-slate-600"
+            >
+              {summary_html}
+            </p>
+          </div>
+        </div>
+      </a>
+    </li>
+  );
+}
+

package/examples/basic/dist/react/stack-shell.tsx

@@ -0,0 +1,17 @@
+import type { ReactNode } from "react";
+
+
+export type StackShellProps = {
+  children?: ReactNode;
+};
+
+export default function StackShell({ children }: StackShellProps) {
+  return (
+    <section
+      className="mx-auto max-w-4xl space-y-6 rounded-[28px] border border-slate-200 bg-white/90 p-6 shadow-[0_24px_80px_-40px_rgba(15,23,42,0.45)]"
+    >
+      {children}
+    </section>
+  );
+}
+

package/examples/basic/src/templates/badge-chip.template.tsx

@@ -0,0 +1,18 @@
+export type Props = {
+  label: string;
+  tone: "neutral" | "accent";
+};
+
+export default function BadgeChip({ label, tone }: Props) {
+  return (
+    <span
+      className={[
+        "inline-flex items-center rounded-full px-2.5 py-1 text-xs font-semibold tracking-wide",
+        tone == "neutral" && "bg-slate-100 text-slate-700",
+        tone == "accent" && "bg-amber-100 text-amber-700",
+      ]}
+    >
+      {label}
+    </span>
+  );
+}

package/examples/basic/src/templates/comparison-table.template.tsx

@@ -0,0 +1,35 @@
+import { For, safe } from "@relevate/katachi";
+
+export type Props = {
+  head: string[];
+  rows: string[][];
+};
+
+export default function ComparisonTable({ head, rows }: Props) {
+  return (
+    <div className="overflow-x-auto rounded-3xl border border-slate-200 bg-white">
+      <table className="min-w-full divide-y divide-slate-200">
+        <thead>
+          <tr>
+            <For each={head} as="cell">
+              <th className="bg-slate-50 px-4 py-3 text-left text-xs font-semibold uppercase tracking-[0.2em] text-slate-500">
+                {safe(cell)}
+              </th>
+            </For>
+          </tr>
+        </thead>
+        <tbody>
+          <For each={rows} as="row">
+            <tr className="odd:bg-white even:bg-slate-50/60">
+              <For each={row} as="cell">
+                <td className="px-4 py-3 text-sm text-slate-700">
+                  {safe(cell)}
+                </td>
+              </For>
+            </tr>
+          </For>
+        </tbody>
+      </table>
+    </div>
+  );
+}

package/examples/basic/src/templates/glyph.template.tsx

@@ -0,0 +1,17 @@
+export type Props = {
+  className: string;
+  tone: string;
+  size: string;
+  name: string;
+};
+
+export default function Glyph({ className, tone, size, name }: Props) {
+  return (
+    <svg
+      className={className}
+      data-tone={tone}
+      data-size={size}
+      data-name={name}
+    />
+  );
+}

package/examples/basic/src/templates/hover-note.template.tsx

@@ -0,0 +1,17 @@
+import type { TemplateNode } from "@relevate/katachi";
+
+export type Props = {
+  label: string;
+  children?: TemplateNode;
+};
+
+export default function HoverNote({ label, children }: Props) {
+  return (
+    <span
+      data-hover-note={label}
+      className="cursor-help underline decoration-dotted underline-offset-4"
+    >
+      {children}
+    </span>
+  );
+}

package/examples/basic/src/templates/media-frame.template.tsx

@@ -0,0 +1,25 @@
+import { If, safe, type TemplateNode } from "@relevate/katachi";
+
+export type Props = {
+  eyebrow?: string;
+  caption_html?: string;
+  children?: TemplateNode;
+};
+
+export default function MediaFrame({ eyebrow, caption_html, children }: Props) {
+  return (
+    <figure className="overflow-hidden rounded-[28px] border border-slate-200 bg-white shadow-sm">
+      <If test={eyebrow != null}>
+        <div className="border-b border-slate-200 px-5 py-3 text-[11px] font-semibold uppercase tracking-[0.28em] text-slate-500">
+          {eyebrow}
+        </div>
+      </If>
+      <div className="bg-slate-50 p-4">{children}</div>
+      <If test={caption_html != null}>
+        <figcaption className="border-t border-slate-200 px-5 py-4 text-sm leading-6 text-slate-600">
+          {safe(caption_html)}
+        </figcaption>
+      </If>
+    </figure>
+  );
+}

package/examples/basic/src/templates/notice-panel.template.tsx

@@ -0,0 +1,40 @@
+import { If, type TemplateNode } from "@relevate/katachi";
+import Glyph from "./glyph.template";
+
+export type Props = {
+  tone: "calm" | "urgent" | "success";
+  title: string;
+  icon: string;
+  children?: TemplateNode;
+};
+
+export default function NoticePanel({ tone, title, icon, children }: Props) {
+  return (
+    <aside
+      className={[
+        "rounded-3xl border px-5 py-4 backdrop-blur-sm",
+        tone == "calm" && "border-sky-200 bg-sky-50/80",
+        tone == "urgent" && "border-rose-200 bg-rose-50/80",
+        tone == "success" && "border-emerald-200 bg-emerald-50/80",
+      ]}
+    >
+      <div className="flex items-start gap-3">
+        <Glyph
+          className="mt-0.5 h-5 w-5 shrink-0"
+          tone={tone}
+          size="18"
+          name={icon}
+        />
+        <div className="min-w-0 flex-1">
+          <h3 className="text-sm font-semibold tracking-tight">{title}</h3>
+          <div className="mt-2 text-sm leading-6 text-slate-700">{children}</div>
+        </div>
+      </div>
+      <If test={tone == "urgent"}>
+        <p className="mt-3 text-xs font-medium uppercase tracking-[0.24em] text-rose-700">
+          Action recommended
+        </p>
+      </If>
+    </aside>
+  );
+}

package/examples/basic/src/templates/resource-tile.template.tsx

@@ -0,0 +1,51 @@
+import { If, safe } from "@relevate/katachi";
+import Glyph from "./glyph.template";
+
+export type Props = {
+  href: string;
+  title_html: string;
+  summary_html: string;
+  eyebrow_html?: string;
+  icon: string;
+  selected: boolean;
+};
+
+export default function ResourceTile({
+  href,
+  title_html,
+  summary_html,
+  eyebrow_html,
+  icon,
+  selected,
+}: Props) {
+  return (
+    <li className="list-none" role="option" tabIndex={-1} aria-selected={selected}>
+      <a
+        href={href}
+        className="group block rounded-2xl border border-slate-200 bg-white p-4 transition hover:border-slate-300 hover:shadow-sm"
+      >
+        <div className="flex items-start gap-3">
+          <Glyph
+            className="mt-0.5 h-5 w-5 shrink-0 text-slate-500"
+            tone="slate"
+            size="18"
+            name={icon}
+          />
+          <div className="min-w-0 flex-1">
+            <If test={eyebrow_html != null}>
+              <div className="truncate text-xs font-medium uppercase tracking-[0.2em] text-slate-500">
+                {safe(eyebrow_html)}
+              </div>
+            </If>
+            <div className="mt-1 truncate text-sm font-semibold text-slate-900">
+              {safe(title_html)}
+            </div>
+            <p className="mt-1 text-sm leading-6 text-slate-600">
+              {safe(summary_html)}
+            </p>
+          </div>
+        </div>
+      </a>
+    </li>
+  );
+}

package/examples/basic/src/templates/stack-shell.template.tsx

@@ -0,0 +1,13 @@
+import type { TemplateNode } from "@relevate/katachi";
+
+export type Props = {
+  children?: TemplateNode;
+};
+
+export default function StackShell({ children }: Props) {
+  return (
+    <section className="mx-auto max-w-4xl space-y-6 rounded-[28px] border border-slate-200 bg-white/90 p-6 shadow-[0_24px_80px_-40px_rgba(15,23,42,0.45)]">
+      {children}
+    </section>
+  );
+}

package/examples/basic/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "jsx": "preserve",
+    "strict": true,
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "types": ["node", "@relevate/katachi/jsx"]
+  },
+  "include": ["src"]
+}

package/package.json

@@ -0,0 +1,69 @@
+{
+	"name": "@relevate/katachi",
+	"version": "0.1.0",
+	"description": "Author template-like components once in restricted TSX and compile them to Askama, React, and other targets.",
+	"license": "MIT",
+	"author": "Relevate",
+	"type": "module",
+	"packageManager": "pnpm@9.1.2",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/rlvtapp/katachi.git"
+	},
+	"homepage": "https://github.com/rlvtapp/katachi#readme",
+	"bugs": {
+		"url": "https://github.com/rlvtapp/katachi/issues"
+	},
+	"main": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"bin": {
+		"katachi": "./bin/katachi.mjs"
+	},
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"import": "./dist/index.js"
+		},
+		"./jsx": "./dist/api/jsx.d.ts"
+	},
+	"files": [
+		"bin",
+		"dist",
+		"docs",
+		"examples",
+		"README.md",
+		"LICENSE",
+		"CONTRIBUTING.md"
+	],
+	"publishConfig": {
+		"access": "public"
+	},
+	"engines": {
+		"node": ">=22",
+		"pnpm": ">=9"
+	},
+	"keywords": [
+		"askama",
+		"compiler",
+		"react",
+		"templates",
+		"tsx"
+	],
+	"scripts": {
+		"build": "pnpm run build:package && pnpm run build:examples",
+		"build:package": "pnpm exec tsc -p tsconfig.build.json && node ./scripts/finalize-package.mjs",
+		"build:examples": "pnpm exec tsx src/cli/index.ts build --project ./examples/basic",
+		"dev": "pnpm exec tsx watch src/cli/index.ts build --project ./examples/basic",
+		"start": "pnpm exec tsx src/cli/index.ts build --project ./examples/basic",
+		"test": "pnpm exec tsx --test tests/**/*.test.ts",
+		"typecheck": "pnpm exec tsc -p tsconfig.json",
+		"verify:askama": "pnpm exec tsx src/cli/index.ts verify:examples",
+		"verify:examples": "pnpm exec tsx src/cli/index.ts verify:examples",
+		"prepublishOnly": "pnpm test && pnpm typecheck && pnpm run build:package"
+	},
+	"devDependencies": {
+		"@types/node": "^22.19.15",
+		"tsx": "^4.21.0",
+		"typescript": "^5.9.3"
+	}
+}