@signiphi/pdf-compose 0.1.0-beta.0

package/package.json

@@ -0,0 +1,92 @@
+{
+  "name": "@signiphi/pdf-compose",
+  "version": "0.1.0-beta.0",
+  "description": "Markdown-based document composer with field placeholders for the signiphi signing pipeline",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "sideEffects": [
+    "*.css",
+    "./dist/styles/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./styles": "./dist/styles/index.css",
+    "./styles/source": "./src/styles/index.css",
+    "./src/styles/index.css": "./src/styles/index.css",
+    "./dist/styles/index.css": "./dist/styles/index.css"
+  },
+  "files": [
+    "dist",
+    "src/styles",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsup && node -e \"require('fs').mkdirSync('dist/styles', {recursive: true})\" && postcss src/styles/index.css -o dist/styles/index.css",
+    "dev": "tsup --watch",
+    "type-check": "tsc --noEmit"
+  },
+  "keywords": [
+    "pdf",
+    "markdown",
+    "document-composer",
+    "form-fields",
+    "esignature"
+  ],
+  "author": "signiphi",
+  "license": "",
+  "peerDependencies": {
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-popover": "^1.1.0",
+    "@radix-ui/react-select": "^2.1.0",
+    "@radix-ui/react-tooltip": "^1.1.0",
+    "lucide-react": "^0.454.0",
+    "react": "^18.2.0 || ^19.0.0",
+    "react-dom": "^18.2.0 || ^19.0.0"
+  },
+  "peerDependenciesMeta": {
+    "tailwindcss": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@radix-ui/react-slot": "^1.2.3",
+    "@tiptap/core": "^2.11.0",
+    "@tiptap/extension-placeholder": "^2.11.0",
+    "@tiptap/extension-text-align": "^2.11.0",
+    "@tiptap/extension-underline": "^2.11.0",
+    "@tiptap/pm": "^2.11.0",
+    "@tiptap/react": "^2.11.0",
+    "@tiptap/starter-kit": "^2.11.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "jszip": "^3.10.1",
+    "pdf-lib": "^1.17.1",
+    "pdfjs-dist": "5.3.93",
+    "tailwind-merge": "^3.3.1",
+    "uuid": "^9.0.1"
+  },
+  "devDependencies": {
+    "@jridgewell/remapping": "^2.3.5",
+    "@tailwindcss/postcss": "^4.1.4",
+    "@types/jszip": "^3.4.1",
+    "@types/node": "^20.11.19",
+    "@types/react": "^18.3.17",
+    "@types/react-dom": "^18.3.5",
+    "@types/uuid": "^9.0.7",
+    "postcss": "^8.5.6",
+    "postcss-cli": "^11.0.0",
+    "postcss-nesting": "^13.0.2",
+    "postcss-prefix-selector": "^1.16.1",
+    "postcss-preset-env": "^10.4.0",
+    "tailwindcss": "^4.1.4",
+    "tsup": "^8.3.5",
+    "typescript": "^5.8.3"
+  }
+}

package/src/styles/index.css

@@ -0,0 +1,229 @@
+@import 'tailwindcss';
+
+@source '../**/*.{ts,tsx}';
+
+@theme inline {
+  --color-border: hsl(var(--xpc-border));
+  --color-input: hsl(var(--xpc-input));
+  --color-ring: oklch(var(--xpc-ring));
+  --color-background: hsl(var(--xpc-background));
+  --color-foreground: hsl(var(--xpc-foreground));
+  --color-primary: oklch(var(--xpc-primary));
+  --color-primary-foreground: hsl(var(--xpc-primary-foreground));
+  --color-secondary: hsl(var(--xpc-secondary));
+  --color-secondary-foreground: hsl(var(--xpc-secondary-foreground));
+  --color-destructive: hsl(var(--xpc-destructive));
+  --color-destructive-foreground: hsl(var(--xpc-destructive-foreground));
+  --color-muted: hsl(var(--xpc-muted));
+  --color-muted-foreground: hsl(var(--xpc-muted-foreground));
+  --color-accent: hsl(var(--xpc-accent));
+  --color-accent-foreground: hsl(var(--xpc-accent-foreground));
+  --color-popover: hsl(var(--xpc-popover));
+  --color-popover-foreground: hsl(var(--xpc-popover-foreground));
+  --color-card: hsl(var(--xpc-card));
+  --color-card-foreground: hsl(var(--xpc-card-foreground));
+
+  --radius-lg: var(--xpc-radius);
+  --radius-md: calc(var(--xpc-radius) - 2px);
+  --radius-sm: calc(var(--xpc-radius) - 4px);
+}
+
+@layer base {
+  :root {
+    --xpc-color-medium-blue: oklch(0.597 0.186 230.42);
+    --xpc-color-dark-blue: oklch(0.23 0.12 273.81);
+    --xpc-color-light-blue: oklch(0.862 0.038 233.28);
+
+    --xpc-background: 0 0% 100%;
+    --xpc-foreground: 222.2 84% 4.9%;
+    --xpc-card: 0 0% 100%;
+    --xpc-card-foreground: 222.2 84% 4.9%;
+    --xpc-popover: 0 0% 100%;
+    --xpc-popover-foreground: 222.2 84% 4.9%;
+    --xpc-primary: 0.597 0.186 230.42;
+    --xpc-primary-foreground: 210 40% 98%;
+    --xpc-secondary: 210 40% 96.1%;
+    --xpc-secondary-foreground: 222.2 47.4% 11.2%;
+    --xpc-muted: 210 40% 96.1%;
+    --xpc-muted-foreground: 215.4 16.3% 46.9%;
+    --xpc-accent: 210 40% 96.1%;
+    --xpc-accent-foreground: 222.2 47.4% 11.2%;
+    --xpc-destructive: 0 84.2% 60.2%;
+    --xpc-destructive-foreground: 210 40% 98%;
+    --xpc-border: 214.3 31.8% 91.4%;
+    --xpc-input: 214.3 31.8% 91.4%;
+    --xpc-ring: 0.597 0.186 230.42;
+    --xpc-radius: 0.5rem;
+    --xpc-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    --xpc-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+    --xpc-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --xpc-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  }
+
+  :root[data-theme="dark"],
+  :root.dark {
+    --xpc-background: 222.2 47.4% 11.2%;
+    --xpc-foreground: 210 40% 98%;
+    --xpc-card: 222.2 47.4% 11.2%;
+    --xpc-card-foreground: 210 40% 98%;
+    --xpc-popover: 222.2 47.4% 11.2%;
+    --xpc-popover-foreground: 210 40% 98%;
+    --xpc-primary: 0.597 0.186 230.42;
+    --xpc-primary-foreground: 210 40% 98%;
+    --xpc-secondary: 217.2 32.6% 17.5%;
+    --xpc-secondary-foreground: 210 40% 98%;
+    --xpc-muted: 217.2 32.6% 17.5%;
+    --xpc-muted-foreground: 215 20.2% 65.1%;
+    --xpc-accent: 217.2 32.6% 17.5%;
+    --xpc-accent-foreground: 210 40% 98%;
+    --xpc-destructive: 0 62.8% 30.6%;
+    --xpc-destructive-foreground: 210 40% 98%;
+    --xpc-border: 217.2 32.6% 17.5%;
+    --xpc-input: 217.2 32.6% 17.5%;
+    --xpc-ring: 0.597 0.186 230.42;
+
+    --xpc-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
+    --xpc-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.4);
+    --xpc-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4);
+    --xpc-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.4);
+  }
+}
+
+/* Base styles — shared by root component AND portal wrappers (tooltip, popover).
+   Only include inheritable / non-layout properties here. */
+.signiphi-pdf-compose {
+  box-sizing: border-box;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: hsl(var(--xpc-foreground));
+  line-height: 1.5;
+}
+
+/* Root-only layout styles — Tailwind utilities don't apply to the root element
+   because PostCSS scopes them as descendant selectors (.signiphi-pdf-compose .utility).
+   Use data-compose-root to target only the actual component root, not portals. */
+.signiphi-pdf-compose[data-compose-root] {
+  display: flex;
+  flex-direction: column;
+  height: 920px;
+  border: 1px solid hsl(var(--xpc-border));
+  border-radius: var(--xpc-radius);
+  overflow: hidden;
+  background: hsl(var(--xpc-background));
+
+  transition: background-color 0.2s ease, color 0.2s ease;
+}
+
+.signiphi-pdf-compose[data-theme="dark"],
+.signiphi-pdf-compose.dark {
+}
+
+.signiphi-pdf-compose *,
+.signiphi-pdf-compose *::before,
+.signiphi-pdf-compose *::after {
+  box-sizing: border-box;
+}
+
+/* TipTap editor styles */
+.signiphi-pdf-compose .tiptap {
+  outline: none;
+  padding: 1rem;
+}
+
+.signiphi-pdf-compose .tiptap p {
+  margin: 0.5em 0;
+}
+
+.signiphi-pdf-compose .tiptap h1 {
+  font-size: 2em;
+  font-weight: 700;
+  margin: 0.67em 0;
+}
+
+.signiphi-pdf-compose .tiptap h2 {
+  font-size: 1.5em;
+  font-weight: 600;
+  margin: 0.75em 0;
+}
+
+.signiphi-pdf-compose .tiptap h3 {
+  font-size: 1.25em;
+  font-weight: 600;
+  margin: 0.83em 0;
+}
+
+.signiphi-pdf-compose .tiptap ul {
+  list-style-type: disc;
+  padding-left: 1.5em;
+  margin: 0.5em 0;
+}
+
+.signiphi-pdf-compose .tiptap ol {
+  list-style-type: decimal;
+  padding-left: 1.5em;
+  margin: 0.5em 0;
+}
+
+.signiphi-pdf-compose .tiptap li {
+  margin: 0.25em 0;
+}
+
+.signiphi-pdf-compose .tiptap hr {
+  border: none;
+  border-top: 2px solid hsl(var(--xpc-border));
+  margin: 1em 0;
+}
+
+.signiphi-pdf-compose .tiptap blockquote {
+  border-left: 3px solid hsl(var(--xpc-border));
+  padding-left: 1em;
+  margin: 0.5em 0;
+  color: hsl(var(--xpc-muted-foreground));
+}
+
+.signiphi-pdf-compose .tiptap code {
+  background: hsl(var(--xpc-muted));
+  padding: 0.2em 0.4em;
+  border-radius: 0.25em;
+  font-size: 0.875em;
+}
+
+.signiphi-pdf-compose .tiptap .is-editor-empty:first-child::before {
+  content: attr(data-placeholder);
+  float: left;
+  color: hsl(var(--xpc-muted-foreground));
+  pointer-events: none;
+  height: 0;
+}
+
+/* Scrollbar styles */
+.signiphi-pdf-compose ::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.signiphi-pdf-compose ::-webkit-scrollbar-track {
+  background: hsl(var(--xpc-muted));
+  border-radius: 4px;
+}
+
+.signiphi-pdf-compose ::-webkit-scrollbar-thumb {
+  background: hsl(var(--xpc-muted-foreground) / 0.3);
+  border-radius: 4px;
+}
+
+.signiphi-pdf-compose ::-webkit-scrollbar-thumb:hover {
+  background: hsl(var(--xpc-muted-foreground) / 0.5);
+}
+
+/* Loading spinner */
+@keyframes xpc-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.signiphi-pdf-compose .animate-spin {
+  animation: xpc-spin 1s linear infinite;
+}