@signiphi/pdf-compose 0.1.0-beta.0 → 0.1.0-beta.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@signiphi/pdf-compose",
-  "version": "0.1.0-beta.0",
+  "version": "0.1.0-beta.10",
   "description": "Markdown-based document composer with field placeholders for the signiphi signing pipeline",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -16,7 +16,11 @@
       "require": "./dist/index.js",
       "default": "./dist/index.js"
     },
-    "./styles": "./dist/styles/index.css",
+    "./styles": {
+      "types": "./dist/styles/index.d.ts",
+      "import": "./dist/styles/index.css",
+      "default": "./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"
@@ -27,9 +31,10 @@
     "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"
+    "build": "tsup && tsc --emitDeclarationOnly --declaration --outDir dist && node -e \"require('fs').mkdirSync('dist/styles', {recursive: true})\" && postcss src/styles/index.css -o dist/styles/index.css && node -e \"require('fs').copyFileSync('src/styles/index.d.ts','dist/styles/index.d.ts')\"",
+    "dev": "tsup --watch --no-clean",
+    "type-check": "tsc --noEmit",
+    "test": "vitest run"
   },
   "keywords": [
     "pdf",
@@ -59,6 +64,10 @@
     "@radix-ui/react-slot": "^1.2.3",
     "@tiptap/core": "^2.11.0",
     "@tiptap/extension-placeholder": "^2.11.0",
+    "@tiptap/extension-table": "^2.11.0",
+    "@tiptap/extension-table-cell": "^2.11.0",
+    "@tiptap/extension-table-header": "^2.11.0",
+    "@tiptap/extension-table-row": "^2.11.0",
     "@tiptap/extension-text-align": "^2.11.0",
     "@tiptap/extension-underline": "^2.11.0",
     "@tiptap/pm": "^2.11.0",
@@ -87,6 +96,7 @@
     "postcss-preset-env": "^10.4.0",
     "tailwindcss": "^4.1.4",
     "tsup": "^8.3.5",
-    "typescript": "^5.8.3"
+    "typescript": "^5.8.3",
+    "vitest": "^3.1.4"
   }
 }

package/src/styles/index.css

@@ -3,25 +3,27 @@
 @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));
+  /* Variables store complete color values (any format: hex, hsl, oklch, etc.)
+     so host apps can override --xpc-* with any valid CSS color. */
+  --color-border: var(--xpc-border);
+  --color-input: var(--xpc-input);
+  --color-ring: var(--xpc-ring);
+  --color-background: var(--xpc-background);
+  --color-foreground: var(--xpc-foreground);
+  --color-primary: var(--xpc-primary);
+  --color-primary-foreground: var(--xpc-primary-foreground);
+  --color-secondary: var(--xpc-secondary);
+  --color-secondary-foreground: var(--xpc-secondary-foreground);
+  --color-destructive: var(--xpc-destructive);
+  --color-destructive-foreground: var(--xpc-destructive-foreground);
+  --color-muted: var(--xpc-muted);
+  --color-muted-foreground: var(--xpc-muted-foreground);
+  --color-accent: var(--xpc-accent);
+  --color-accent-foreground: var(--xpc-accent-foreground);
+  --color-popover: var(--xpc-popover);
+  --color-popover-foreground: var(--xpc-popover-foreground);
+  --color-card: var(--xpc-card);
+  --color-card-foreground: var(--xpc-card-foreground);
 
   --radius-lg: var(--xpc-radius);
   --radius-md: calc(var(--xpc-radius) - 2px);
@@ -34,25 +36,25 @@
     --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-background: hsl(0 0% 100%);
+    --xpc-foreground: hsl(222.2 84% 4.9%);
+    --xpc-card: hsl(0 0% 100%);
+    --xpc-card-foreground: hsl(222.2 84% 4.9%);
+    --xpc-popover: hsl(0 0% 100%);
+    --xpc-popover-foreground: hsl(222.2 84% 4.9%);
+    --xpc-primary: oklch(0.597 0.186 230.42);
+    --xpc-primary-foreground: hsl(210 40% 98%);
+    --xpc-secondary: hsl(210 40% 96.1%);
+    --xpc-secondary-foreground: hsl(222.2 47.4% 11.2%);
+    --xpc-muted: hsl(210 40% 96.1%);
+    --xpc-muted-foreground: hsl(215.4 16.3% 46.9%);
+    --xpc-accent: hsl(210 40% 96.1%);
+    --xpc-accent-foreground: hsl(222.2 47.4% 11.2%);
+    --xpc-destructive: hsl(0 84.2% 60.2%);
+    --xpc-destructive-foreground: hsl(210 40% 98%);
+    --xpc-border: hsl(214.3 31.8% 91.4%);
+    --xpc-input: hsl(214.3 31.8% 91.4%);
+    --xpc-ring: oklch(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);
@@ -62,25 +64,25 @@
 
   :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-background: hsl(222.2 47.4% 11.2%);
+    --xpc-foreground: hsl(210 40% 98%);
+    --xpc-card: hsl(222.2 47.4% 11.2%);
+    --xpc-card-foreground: hsl(210 40% 98%);
+    --xpc-popover: hsl(222.2 47.4% 11.2%);
+    --xpc-popover-foreground: hsl(210 40% 98%);
+    --xpc-primary: oklch(0.597 0.186 230.42);
+    --xpc-primary-foreground: hsl(210 40% 98%);
+    --xpc-secondary: hsl(217.2 32.6% 17.5%);
+    --xpc-secondary-foreground: hsl(210 40% 98%);
+    --xpc-muted: hsl(217.2 32.6% 17.5%);
+    --xpc-muted-foreground: hsl(215 20.2% 65.1%);
+    --xpc-accent: hsl(217.2 32.6% 17.5%);
+    --xpc-accent-foreground: hsl(210 40% 98%);
+    --xpc-destructive: hsl(0 62.8% 30.6%);
+    --xpc-destructive-foreground: hsl(210 40% 98%);
+    --xpc-border: hsl(217.2 32.6% 17.5%);
+    --xpc-input: hsl(217.2 32.6% 17.5%);
+    --xpc-ring: oklch(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);
@@ -96,7 +98,7 @@
   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));
+  color: var(--xpc-foreground);
   line-height: 1.5;
 }
 
@@ -107,10 +109,10 @@
   display: flex;
   flex-direction: column;
   height: 920px;
-  border: 1px solid hsl(var(--xpc-border));
+  border: 1px solid var(--xpc-border);
   border-radius: var(--xpc-radius);
   overflow: hidden;
-  background: hsl(var(--xpc-background));
+  background: var(--xpc-background);
 
   transition: background-color 0.2s ease, color 0.2s ease;
 }
@@ -123,6 +125,9 @@
 .signiphi-pdf-compose *::before,
 .signiphi-pdf-compose *::after {
   box-sizing: border-box;
+  /* Neutralize host-app outline (e.g. shadcn `* { @apply outline-ring/50 }`).
+     This package uses border + box-shadow for focus feedback, never outline. */
+  outline: 2px solid transparent;
 }
 
 /* TipTap editor styles */
@@ -171,19 +176,19 @@
 
 .signiphi-pdf-compose .tiptap hr {
   border: none;
-  border-top: 2px solid hsl(var(--xpc-border));
+  border-top: 2px solid var(--xpc-border);
   margin: 1em 0;
 }
 
 .signiphi-pdf-compose .tiptap blockquote {
-  border-left: 3px solid hsl(var(--xpc-border));
+  border-left: 3px solid var(--xpc-border);
   padding-left: 1em;
   margin: 0.5em 0;
-  color: hsl(var(--xpc-muted-foreground));
+  color: var(--xpc-muted-foreground);
 }
 
 .signiphi-pdf-compose .tiptap code {
-  background: hsl(var(--xpc-muted));
+  background: var(--xpc-muted);
   padding: 0.2em 0.4em;
   border-radius: 0.25em;
   font-size: 0.875em;
@@ -192,7 +197,7 @@
 .signiphi-pdf-compose .tiptap .is-editor-empty:first-child::before {
   content: attr(data-placeholder);
   float: left;
-  color: hsl(var(--xpc-muted-foreground));
+  color: var(--xpc-muted-foreground);
   pointer-events: none;
   height: 0;
 }
@@ -204,17 +209,84 @@
 }
 
 .signiphi-pdf-compose ::-webkit-scrollbar-track {
-  background: hsl(var(--xpc-muted));
+  background: var(--xpc-muted);
   border-radius: 4px;
 }
 
 .signiphi-pdf-compose ::-webkit-scrollbar-thumb {
-  background: hsl(var(--xpc-muted-foreground) / 0.3);
+  background: color-mix(in srgb, var(--xpc-muted-foreground) 30%, transparent);
   border-radius: 4px;
 }
 
 .signiphi-pdf-compose ::-webkit-scrollbar-thumb:hover {
-  background: hsl(var(--xpc-muted-foreground) / 0.5);
+  background: color-mix(in srgb, var(--xpc-muted-foreground) 50%, transparent);
+}
+
+/* Hidden scrollbar — keeps scroll functionality */
+.signiphi-pdf-compose .scrollbar-hidden {
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE/Edge */
+}
+.signiphi-pdf-compose .scrollbar-hidden::-webkit-scrollbar {
+  display: none; /* Chrome/Safari */
+}
+
+/* Columns layout */
+.signiphi-pdf-compose .columns-node {
+  display: flex;
+  gap: 0.75rem;
+  margin: 0.5rem 0;
+}
+
+.signiphi-pdf-compose .column-node {
+  flex: 1 1 0%;
+  min-width: 0;
+}
+
+/* Panel */
+.signiphi-pdf-compose .panel-node {
+  border-radius: 0.375rem;
+  margin: 0.5rem 0;
+}
+
+.signiphi-pdf-compose .panel-border-solid {
+  border: 1px solid #d1d5db;
+}
+
+.signiphi-pdf-compose .panel-border-dashed {
+  border: 1px dashed #d1d5db;
+}
+
+.signiphi-pdf-compose .panel-border-none {
+  border: 1px solid transparent;
+}
+
+.signiphi-pdf-compose .panel-title {
+  padding: 0.25rem 0.75rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  border-bottom: 1px solid #d1d5db;
+  border-radius: 0.375rem 0.375rem 0 0;
+  background: #f3f4f6;
+  color: currentColor;
+}
+
+.signiphi-pdf-compose .panel-dark .panel-title {
+  background: #1f2937;
+  color: white;
+  border-color: #1f2937;
+}
+
+.signiphi-pdf-compose .panel-content {
+  padding: 0.75rem;
+}
+
+/* Subtotals block */
+.signiphi-pdf-compose .subtotals-block {
+  border-left: 2px solid #d1d5db;
+  padding-left: 0.75rem;
+  margin: 0.5rem 0;
+  text-align: right;
 }
 
 /* Loading spinner */

package/src/styles/index.d.ts

@@ -0,0 +1 @@
+export {};