@format.dev/cli 0.0.0 → 0.1.0

package/package.json

@@ -1,35 +1,87 @@
 {
-	"name": "@format.dev/cli",
-	"version": "0.0.0",
-	"description": "A bootstrap placeholder reserving this package name. Format is not released yet.",
-	"license": "MIT",
-	"repository": {
-		"type": "git",
-		"url": "git+https://github.com/format-hq/format-js.git",
-		"directory": "packages/cli"
-	},
-	"homepage": "https://format.dev",
-	"files": [
-		"LICENSE",
-		"README.md",
-		"index.d.ts",
-		"index.js"
-	],
-	"type": "module",
-	"main": "./index.js",
-	"types": "./index.d.ts",
-	"exports": {
-		".": {
-			"types": "./index.d.ts",
-			"default": "./index.js"
-		}
-	},
-	"engines": {
-		"node": ">=22.12.0"
-	},
-	"publishConfig": {
-		"access": "public",
-		"tag": "bootstrap",
-		"registry": "https://registry.npmjs.org/"
-	}
-}
+  "name": "@format.dev/cli",
+  "version": "0.1.0",
+  "license": "MIT",
+  "description": "The Format CLI: run Studio, compile documents, and keep Format packages in lockstep",
+  "author": "the format.dev developers",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/format-hq/format-js.git",
+    "directory": "packages/cli"
+  },
+  "type": "module",
+  "bin": {
+    "format": "./bin/format.mjs"
+  },
+  "exports": {
+    "./config": {
+      "types": "./dist/config.d.mts",
+      "default": "./dist/config.mjs"
+    },
+    "./scaffold": {
+      "types": "./dist/scaffold.d.mts",
+      "default": "./dist/scaffold.mjs"
+    },
+    "./scaffold/shared": {
+      "types": "./dist/scaffold-shared.d.mts",
+      "default": "./dist/scaffold-shared.mjs"
+    },
+    "./lockstep": {
+      "types": "./dist/lockstep.d.mts",
+      "default": "./dist/lockstep.mjs"
+    },
+    "./random-name": {
+      "types": "./dist/random-name.d.mts",
+      "default": "./dist/random-name.mjs"
+    },
+    "./package.json": "./package.json",
+    "./tsconfig.recommended": "./tsconfig.recommended.json",
+    "./env": {
+      "types": "./env.d.ts"
+    }
+  },
+  "files": [
+    "bin",
+    "dist",
+    "templates",
+    "tsconfig.recommended.json",
+    "env.d.ts",
+    "LICENSE"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@clack/prompts": "^1.7.0",
+    "commander": "^14.0.3",
+    "jsonc-parser": "^3.3.1",
+    "picocolors": "^1.1.1",
+    "unique-names-generator": "^4.7.1"
+  },
+  "devDependencies": {
+    "@types/node": "^24.10.4",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "rimraf": "^6.0.1",
+    "tailwindcss": "^4.1.18",
+    "tsdown": "^0.18.4",
+    "typescript": "^5.9.3",
+    "valibot": "^1.1.0",
+    "verdaccio": "^6.8.0",
+    "vitest": "^4.0.18",
+    "vue": "^3.5.25",
+    "@format.dev/react": "0.1.0",
+    "@format.dev/vue": "0.1.0"
+  },
+  "engines": {
+    "node": ">=22.12.0"
+  },
+  "scripts": {
+    "clean": "rimraf dist",
+    "build": "tsdown",
+    "dev": "tsdown -c tsdown.config.dev.ts --watch",
+    "typecheck": "tsc -p tsconfig.json --noEmit"
+  }
+}

package/templates/html/documents/welcome/data/alternative.json

@@ -0,0 +1,3 @@
+{
+	"name": "trailblazer"
+}

package/templates/html/documents/welcome/data/default.json

@@ -0,0 +1,3 @@
+{
+	"name": "builder"
+}

package/templates/html/documents/welcome/index.html

@@ -0,0 +1,32 @@
+<template data-type="document" data-title="Welcome to Format">
+	<template data-type="layout" id="page" data-width="793.71px" data-height="1122.52px">
+		<header class="header">
+			<small class="header-title">Format Studio &ndash; Welcome document</small>
+		</header>
+		<main class="content">
+			<template data-type="flow" data-split-granularity="word">
+				<%~ include('./pages/Cover/cover.html', data) %>
+				<template data-type="page-break"></template>
+				<%~ include('./pages/NextSteps/next-steps.html', data) %>
+				<template data-type="page-break"></template>
+				<%~ include('./pages/FeatureShowcase/feature-showcase.html', data) %>
+				<template data-type="page-break"></template>
+				<%~ include('./pages/Close/close.html', data) %>
+			</template>
+		</main>
+		<template data-type="footnotes"></template>
+		<footer class="footer">
+			<div class="footer-stamp">
+				Created with
+				<a href="https://format.dev">
+					<img src="./logo.svg" alt="Format logo" class="footer-logo" />
+				</a>
+			</div>
+			<div class="page-numbers">
+				<span data-type="page-number"></span>
+				of
+				<span data-type="page-count"></span>
+			</div>
+		</footer>
+	</template>
+</template>

package/templates/html/documents/welcome/index.ts

@@ -0,0 +1,4 @@
+export { default } from './index.html'
+import './styles.css'
+import './pages/NextSteps/next-steps.css'
+import './pages/FeatureShowcase/feature-showcase.css'

package/templates/html/documents/welcome/pages/Close/close.html

@@ -0,0 +1,9 @@
+<section class="page hero-page">
+	<p class="kicker">Where to go next</p>
+	<h2 class="hero-title">Now, go build something.</h2>
+	<p class="lead">
+		You've only scratched the surface. There's plenty more to explore, and it's all in the docs at
+		<a href="https://format.dev/docs">format.dev/docs</a>. If you get stuck,
+		<a href="https://format.dev/contact">reach out</a> and we'll help.
+	</p>
+</section>

package/templates/html/documents/welcome/pages/Cover/cover.html

@@ -0,0 +1,13 @@
+<section class="page hero-page">
+	<h1 class="hero-title">
+		Welcome to Format, <span><%= data.name %></span>.
+	</h1>
+	<p class="lead">
+		The developer-first platform for building pixel-perfect PDFs with web technology.
+	</p>
+	<p>
+		You've created your account and installed Format Studio, nice work. This is a Format document, built with
+		HTML and CSS. Studio renders it live from the code in <code>documents/welcome</code>. If you edit the code
+		and save, the preview updates instantly.
+	</p>
+</section>

package/templates/html/documents/welcome/pages/FeatureShowcase/feature-showcase.css

@@ -0,0 +1,296 @@
+.showcase-intro {
+	margin-bottom: 24px;
+}
+
+.feature-heading {
+	margin: 0 0 20px;
+	font-size: 24px;
+	line-height: 1.1;
+	letter-spacing: -0.5px;
+	font-weight: 800;
+}
+
+.feature-table {
+	margin: 24px 0 40px;
+	padding: 18px;
+	border-radius: 10px;
+	background: var(--color-bg-muted);
+	border: var(--hairline);
+
+	table {
+		width: 100%;
+		border-collapse: collapse;
+		font-variant-numeric: tabular-nums;
+	}
+
+	th,
+	td {
+		padding: 8px 24px 8px 0;
+		text-align: left;
+
+		&:last-child {
+			padding-right: 0;
+		}
+	}
+
+	.height {
+		text-align: right;
+	}
+
+	thead th {
+		font-family: monospace;
+		font-size: 12px;
+		text-transform: uppercase;
+		color: var(--color-text-muted);
+		padding-bottom: 8px;
+		border-bottom: 1px solid var(--color-text-muted);
+	}
+
+	tbody td {
+		font-size: 14px;
+		border-bottom: var(--hairline);
+
+		&.peak {
+			font-weight: 600;
+		}
+	}
+
+	tbody tr:last-child td {
+		padding-bottom: 0;
+		border-bottom: none;
+	}
+}
+
+.feature-table-caption {
+	margin: 0 0 12px;
+	font-family: monospace;
+	font-size: 12px;
+	letter-spacing: 0.08em;
+	text-transform: uppercase;
+	color: var(--color-text-muted);
+}
+
+.feature-prose {
+	margin-top: 4px;
+	font-family: serif;
+
+	.fleuron {
+		display: block;
+		margin: 0 auto 24px;
+
+		&:last-child {
+			margin: 24px auto 0;
+		}
+	}
+
+	p {
+		text-wrap: pretty;
+		font-size: 17px;
+		line-height: 1.6;
+
+		&:last-child {
+			margin: 0;
+		}
+	}
+}
+
+.prose-learn-more {
+	margin-top: 24px;
+}
+
+.css-demo {
+	margin-block: 40px;
+	display: grid;
+	grid-template-columns: repeat(3, 1fr);
+	gap: 14px;
+	break-inside: avoid;
+}
+
+.css-demo-tile {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 18px;
+	padding: 24px 18px;
+	border: var(--hairline);
+	border-radius: 12px;
+	background: white;
+
+	.tile-visual {
+		width: 56px;
+		height: 56px;
+		border-radius: 10px;
+	}
+
+	.tile-label {
+		font-family: monospace;
+		text-transform: uppercase;
+		font-size: 12px;
+		color: var(--color-text-muted);
+	}
+}
+
+.tile-visual {
+	.tile-shadow & {
+		background: white;
+		box-shadow: 0 8px 22px rgb(43 127 255 / 0.4);
+	}
+
+	.tile-gradient & {
+		background: linear-gradient(135deg, var(--color-accent), var(--color-code-text));
+	}
+
+	.tile-transform & {
+		background: var(--color-accent);
+		transform: rotate(12deg) scale(0.82);
+	}
+
+	.tile-radius & {
+		background: var(--color-code-bg);
+		border: 2px solid var(--color-accent);
+		border-radius: 50% 12px;
+	}
+
+	.tile-grid & {
+		display: grid;
+		grid-template-columns: repeat(3, 1fr);
+		grid-auto-rows: 1fr;
+		gap: 5px;
+
+		span {
+			background: var(--color-accent);
+			border-radius: 2px;
+		}
+
+		span:first-child {
+			grid-column: span 2;
+		}
+
+		span:nth-child(4) {
+			grid-row: span 2;
+		}
+	}
+
+	.tile-flex & {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 6px;
+
+		span {
+			width: 8px;
+			height: 100%;
+			background: var(--color-accent);
+			border-radius: 3px;
+		}
+
+		span:nth-child(2) {
+			height: 60%;
+		}
+	}
+
+	.tile-orphans & {
+		display: flex;
+		flex-direction: column;
+		gap: 5px;
+
+		span {
+			height: 6px;
+			border-radius: 3px;
+			background: var(--color-accent);
+		}
+
+		span:last-child {
+			width: 55%;
+			margin-top: auto;
+			opacity: 0.4;
+		}
+	}
+
+	.tile-breaks & {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		gap: 5px;
+
+		span {
+			height: 6px;
+			border-radius: 3px;
+			background: var(--color-accent);
+		}
+
+		span:nth-child(2),
+		span:nth-child(5) {
+			width: 70%;
+		}
+
+		span:nth-child(3) {
+			height: 0;
+			border-top: 2px dashed var(--color-accent);
+			border-radius: 0;
+			background: none;
+		}
+	}
+
+	.tile-pattern & {
+		background: repeating-linear-gradient(-45deg, var(--color-accent) 0 5px, var(--color-code-bg) 5px 12px);
+	}
+}
+
+.css-pattern-demo {
+	margin-block: 20px;
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+	break-inside: avoid;
+}
+
+.css-pattern {
+	display: block;
+	width: 100%;
+	height: 64px;
+	border: var(--hairline);
+	border-radius: 12px;
+	background-color: white;
+	overflow: hidden;
+}
+
+.css-pattern-stripe {
+	fill: var(--color-accent);
+	fill-opacity: 0.3;
+}
+
+.css-pattern-caption {
+	font-family: monospace;
+	font-size: 11px;
+	letter-spacing: 0.03em;
+	color: var(--color-text-muted);
+	text-align: center;
+}
+
+.more-list {
+	margin: 0 0 24px;
+	padding: 0;
+	list-style: none;
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+
+	li {
+		position: relative;
+		padding-left: 20px;
+		font-size: 15px;
+		line-height: 1.5;
+	}
+
+	li::before {
+		content: '';
+		position: absolute;
+		left: 2px;
+		top: 9px;
+		width: 5px;
+		height: 5px;
+		border-radius: 50%;
+		background: var(--color-accent);
+	}
+}