@flanksource/facet-cli 0.0.0 → 0.0.1

package/assets/styles.css

@@ -0,0 +1,1032 @@
+/* Fonts referenced by the Tailwind 'mono' stack — must be loaded explicitly
+ * because Puppeteer's headless Chromium has no system fonts installed.
+ * Without this, PDF output falls back through Consolas/Monaco/Courier New.
+ */
+@import 'https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&display=swap';
+
+/* Tailwind directives */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+
+
+
+/* Remove max-width from prose class */
+.prose {
+  max-width: none !important;
+}
+
+/* Reduce prose font size and line height for PDFs */
+@media print {
+  .prose {
+    font-size: 9pt !important;
+    line-height: 1.3 !important;
+  }
+
+  .prose p {
+    font-size: 10pt !important;
+    line-height: 1.3 !important;
+    margin-bottom: 2mm !important;
+  }
+
+  .prose h1, .prose h2, .prose h3, .prose h4 {
+    line-height: 1.2 !important;
+  }
+
+  /* Override typography plugin with higher specificity */
+  .prose h1 {
+    font-size: 22pt !important;
+    line-height: 26pt !important;
+    margin-bottom: 4mm !important;
+    font-weight: 700 !important;
+  }
+
+  .prose h2 {
+    font-size: 15pt !important;
+    line-height: 19pt !important;
+    margin-top: 4mm !important;
+    margin-bottom: 3mm !important;
+    font-weight: 600 !important;
+  }
+
+  .prose h3 {
+    font-size: 12pt !important;
+    line-height: 15pt !important;
+    margin-top: 3mm !important;
+    margin-bottom: 2mm !important;
+    font-weight: 500 !important;
+  }
+
+  .prose h4 {
+    font-size: 10pt !important;
+    line-height: 12pt !important;
+    margin-top: 2mm !important;
+    margin-bottom: 2mm !important;
+    font-weight: 600 !important;
+  }
+
+  h1, h2, h3, h4, p {
+      @apply text-gray-800;
+  }
+
+  h2,h3,h4 {
+    @apply inline-flex;
+  }
+
+  .subtitle {
+    @apply text-gray-700 font-light;
+  }
+
+  .icon {
+   @apply text-gray-400 h-full place-content-center inline-flex align-middle mr-1
+  }
+
+  /* Reduce all typography sizes for PDFs while maintaining hierarchy */
+  h1 {
+    font-size: 22pt !important;
+    line-height: 26pt !important;
+    margin-bottom: 4mm !important;
+    @apply text-gray-700;
+  }
+
+  h2 {
+    font-size: 15pt !important;
+    line-height: 19pt !important;
+    margin-top: 4mm !important;
+    margin-bottom: 3mm !important;
+    @apply inline-flex;
+  }
+
+  h3 {
+    font-size: 12pt !important;
+    line-height: 15pt !important;
+    margin-top: 3mm !important;
+    margin-bottom: 2mm !important;
+  }
+
+  h4 {
+    font-size: 10pt !important;
+    line-height: 12pt !important;
+    margin-top: 2mm !important;
+    margin-bottom: 2mm !important;
+  }
+
+  p {
+    font-size: 9pt !important;
+    line-height: 12pt !important;
+    margin-bottom: 3mm !important;
+  }
+
+  .text-xs {
+    font-size: 7pt !important;
+  }
+
+  .text-sm {
+    font-size: 9pt !important;
+  }
+
+  .text-md {
+    font-size: 10pt !important;
+  }
+
+  .text-lg {
+    font-size: 15pt !important;
+  }
+
+  .text-xl {
+    font-size: 18pt !important;
+  }
+
+  .text-2xl {
+    font-size: 24pt !important;
+  }
+
+  tbody td {
+    font-weight: 400 !important;
+  }
+}
+
+/* ==========================================
+   PDF Style Guide Implementation
+   Based on: /docs/style-guide/pdf.mdx
+   Two-Page Datasheet Format
+   ========================================== */
+
+/* CSS Reset */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+/* Page Setup */
+@page {
+  margin: 0;
+  padding: 0;
+}
+
+/* Typography System - Open Sans Primary, Fira Code Monospace */
+body {
+  @apply text-gray-700 bg-white;
+
+  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif;
+  font-size: 10pt;
+  line-height: 14pt;
+  max-width: 210mm;
+  margin: 0 auto;
+  padding: 0;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Print-specific styles */
+@media print {
+
+  @page :first {
+    margin: 0;
+    padding: 0;
+  }
+
+  @page {
+    margin: 0;
+    padding: 0;
+  }
+
+  body {
+    margin-bottom: 10mm;
+    margin-top: 0;
+    padding: 0;
+  }
+
+  .page-break {
+    page-break-after: always;
+    break-after: page;
+  }
+
+  .no-print {
+    display: none;
+  }
+
+  /* Ensure colors render correctly for electronic PDF distribution (RGB) */
+  * {
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+    color-adjust: exact;
+  }
+
+  /* Table page break handling */
+  table {
+    /* margin-top: 8mm !important; */
+    page-break-inside: auto;
+  }
+
+  /* Ensure table wrappers also respect page margins */
+  .overflow-x-auto {
+    margin-top: 8mm !important;
+  }
+
+  thead {
+    display: table-header-group; /* Repeat header on each page */
+  }
+
+  tbody {
+    display: table-row-group;
+  }
+
+  /* Prevent breaking inside rows but allow table continuation */
+  tr {
+    page-break-inside: avoid;
+    page-break-after: auto;
+  }
+
+  td {
+    page-break-inside: avoid;
+  }
+
+  /* Add top margin to any element that starts a new page */
+  * {
+    orphans: 2;
+    widows: 2;
+  }
+
+  /* Target the last page content to create space for footer */
+  main:last-of-type {
+    min-height: 240mm; /* Fill most of A4 page (297mm - margins - footer space) */
+    display: flex;
+    flex-direction: column;
+  }
+
+  main:last-of-type article {
+    flex: 1 0 auto;
+  }
+
+  /* Print header and footer adjustments */
+  .datasheet-header {
+    margin: 0;
+  }
+
+
+  .datasheet-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin: 0 0 10mm;
+    padding: 3mm 10mm;
+    page-break-inside: avoid;
+    page-break-before: avoid;
+  }
+
+  .datasheet-footer .footer-left {
+    padding-left: 3mm;
+  }
+
+  .datasheet-footer .footer-right {
+    padding-right: 3mm;
+  }
+
+  .datasheet-footer p {
+    margin: 0 0 2mm;
+    font-size: 8pt;
+    line-height: 10pt;
+  }
+
+  .datasheet-footer--compact {
+    margin: 8mm 0 0;
+    padding: 2mm 10mm;
+  }
+}
+
+/* Typography Scale from Style Guide (DS-10) */
+h1 {
+  @apply text-slate-900 font-bold;
+
+  font-size: 26pt; /* DS-10: 24-28pt for product name */
+  line-height: 32pt;
+  margin-bottom: 8mm;
+}
+
+h2 {
+  @apply text-slate-900 font-semibold;
+
+  font-size: 18pt;
+  line-height: 24pt;
+  margin-top: 6mm;
+  margin-bottom: 4mm;
+}
+
+h3 {
+  @apply text-blue-500 font-medium;
+
+  font-size: 13pt;
+  line-height: 16pt;
+  margin-top: 5mm;
+  margin-bottom: 4mm;
+}
+
+h4 {
+  @apply text-gray-600 font-semibold;
+
+  font-size: 11pt;
+  line-height: 14pt;
+  margin-top: 3mm;
+  margin-bottom: 2mm;
+}
+
+p {
+  @apply text-gray-700;
+
+  margin-bottom: 4mm;
+}
+
+strong {
+  @apply font-semibold text-slate-900;
+}
+
+code:not(.shiki *) {
+  @apply bg-gray-100 border border-gray-200 rounded;
+
+  font-family: 'Fira Code', Monaco, 'Courier New', monospace;
+  font-size: 9pt;
+  line-height: 12pt;
+  padding: 1pt 2pt;
+  border-radius: 1pt;
+}
+
+/* Blockquote - Light Zinc Aside */
+blockquote {
+  @apply bg-zinc-50/75 border-l-[3pt] border-zinc-300 rounded-r;
+
+  margin: 4mm 0;
+  padding: 3mm 4mm;
+  font-size: 10pt;
+  line-height: 12pt;
+  color: #52525b; /* zinc-600 */
+}
+
+blockquote p {
+  margin-bottom: 0;
+  color: #52525b; /* zinc-600 */
+}
+
+blockquote.info {
+  @apply border-l-blue-500 bg-blue-50/50;
+}
+blockquote.info p {
+  @apply text-blue-700;
+}
+
+/* Lists */
+ul {
+  margin: 3mm 0 4mm 8mm;
+  padding: 0;
+  list-style-type: disc;
+}
+
+li {
+  @apply text-gray-700;
+
+  margin-bottom: 2mm;
+}
+
+/* Tables - Technical Specifications */
+table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 5mm 0;
+  font-size: 9pt;
+}
+
+thead {
+  @apply bg-blue-600 text-white;
+}
+
+thead th {
+  @apply bg-blue-600 text-white border border-blue-500 font-semibold;
+
+  font-size: calc(1em + 1pt);
+  padding: 2mm;
+  text-align: left;
+}
+
+tbody tr:nth-child(odd) {
+  @apply bg-gray-50;
+}
+
+tbody tr:nth-child(even) {
+  @apply bg-white;
+}
+
+tbody td {
+  @apply border border-gray-300 text-gray-700;
+
+  padding: 2mm 1.5mm;
+  vertical-align: top;
+}
+
+tbody td:first-child {
+  font-weight: 600;
+}
+
+/* Table size variants — apply text-{size} class on <table> */
+/* th gets +1pt automatically via calc(1em + 1pt) above */
+table.text-xs { font-size: 7pt; }
+table.text-xs th { padding: 1mm; }
+table.text-xs td { padding: 0.5mm 1mm; }
+
+table.text-sm { font-size: 9pt; }
+table.text-sm th { padding: 1.5mm; }
+table.text-sm td { padding: 1mm 1.5mm; }
+
+table.text-md { font-size: 10pt; }
+table.text-md th { padding: 2.5mm; }
+table.text-md td { padding: 2mm 2.5mm; }
+
+/* Section Spacing */
+section {
+  margin-bottom: 8mm;
+}
+
+article {
+  margin-bottom: 0;
+}
+
+/* Page Break - Utility Class */
+.page-break {
+  page-break-after: always;
+  break-after: page;
+  height: 0;
+  margin: 0;
+  padding: 0;
+}
+
+/* Page 1 Header - Hero Section */
+.datasheet-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 2pt solid #e5e7eb;
+  /* margin: 0 0 10mm; */
+  /* padding: 5mm 10mm; */
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.logo img {
+  object-fit: contain;
+}
+
+
+
+.header-meta {
+  @apply text-gray-500;
+
+  text-align: right;
+  font-size: 10pt;
+  line-height: 1.2;
+}
+
+.header-meta p {
+  margin: 0 !important;
+}
+
+/* CTA Footer */
+.cta-footer {
+  background: linear-gradient(to right, #f3f4f6, #f9fafb);
+  border-top: 1pt solid #e5e7eb;
+  margin: 0;
+  padding: 5mm 10mm;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 3mm;
+}
+
+.cta-footer p {
+  margin: 0;
+}
+
+/* Section Header Bar */
+.section-header-bar {
+  background: #3578e5;
+  color: #fff;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 15mm;
+  margin: 0;
+  padding: 0 10mm;
+}
+
+.section-header-bar h2 {
+  font-size: 18pt;
+  font-weight: 600;
+  color: #fff;
+  margin: 0 !important;
+}
+
+.section-header-bar .product-name {
+  font-size: 10pt;
+  color: #fff;
+  font-weight: 400;
+}
+
+/* Page 2 Footer - Legal Footer */
+.datasheet-footer {
+  @apply text-gray-500;
+
+  border-top: 0.2pt solid #d1d5db;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  font-size: 10pt;
+  line-height: 11pt;
+  margin: auto 0 0;
+  padding: 3mm 10mm;
+}
+
+.datasheet-footer p {
+  margin: 0 0 1mm !important;
+  font-size: 8pt;
+  line-height: 10pt;
+}
+
+.datasheet-footer .footer-left p:first-child {
+  @apply font-semibold text-slate-900;
+}
+
+.footer-right {
+  text-align: right;
+}
+
+.footer-icons {
+  display: flex;
+  flex-direction: row;
+  gap: 3mm;
+  justify-content: flex-end;
+  align-items: center;
+  margin-top: 2mm;
+}
+
+.footer-icon-link {
+  @apply text-gray-600;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  text-decoration: none;
+}
+
+.footer-icon-link svg {
+  width: 4mm;
+  height: 4mm;
+}
+
+/* Header Solid Variant */
+.datasheet-header--solid {
+  background: #3578e5;
+  border: none;
+  color: #fff;
+  margin: 0;
+}
+
+.datasheet-header--solid .logo {
+  width: 40mm;
+  height: auto;
+}
+
+.datasheet-header--solid .logo h1 {
+  color: #fff;
+}
+
+.datasheet-header--solid .header-meta {
+  color: #fff;
+  text-align: right;
+}
+
+.datasheet-header--solid .header-meta p {
+  color: #fff;
+}
+
+/* Header Minimal Variant */
+.datasheet-header--minimal {
+  border: none;
+  margin: 0;
+  background: transparent;
+}
+
+.datasheet-header--minimal .logo {
+  width: 35mm;
+  height: auto;
+}
+
+/* Footer Compact Variant */
+.datasheet-footer--compact {
+  border-top: 0.5pt solid #d1d5db;
+  display: flex;
+  align-items: center;
+  font-size: 8pt;
+  line-height: 10pt;
+  color: #6b7280;
+  margin: 8mm 0 0;
+  padding: 2mm 10mm;
+  gap: 8mm;
+}
+
+.datasheet-footer--compact .footer-content {
+  display: flex;
+  align-items: center;
+  gap: 4mm;
+  flex-wrap: wrap;
+  width: 100%;
+}
+
+.datasheet-footer--compact .footer-brand {
+  font-weight: 600;
+  color: #131f3b;
+}
+
+.datasheet-footer--compact .footer-copyright {
+  color: #6b7280;
+}
+
+.datasheet-footer--compact .footer-link {
+  color: #3578e5;
+  text-decoration: none;
+  font-weight: 500;
+  transition: color 0.2s ease;
+}
+
+.datasheet-footer--compact .footer-link:hover {
+  color: #2563eb;
+  text-decoration: underline;
+}
+
+/* Footer Minimal Variant */
+.datasheet-footer--minimal {
+  border: none;
+  margin: 8mm 0 0;
+  padding: 1mm 10mm;
+  text-align: center;
+  font-size: 7pt;
+  line-height: 9pt;
+  color: #9ca3af;
+}
+
+.datasheet-footer--minimal p {
+  margin: 0 !important;
+}
+
+/* Project links - Utility Class */
+.project-link {
+  @apply text-blue-600;
+
+  text-decoration: underline;
+  font-weight: 500;
+}
+
+.project-link:hover {
+  @apply text-blue-700;
+
+  text-decoration: underline;
+}
+
+/* ==========================================
+   ELECTRONIC DISPLAY OPTIMIZATION
+   Responsive design for screens
+   ========================================== */
+
+/* Screen-optimized defaults */
+@media screen {
+  /* Remove page constraints on screens */
+  body {
+    max-width: 100%;
+    background: #f5f5f5;
+    padding: 2rem 0;
+  }
+
+  /* Create card-like effect for content */
+  .page {
+    background: #fff;
+    border-radius: 0.5rem;
+    box-shadow: 0 1px 3px rgb(0 0 0 / 10%), 0 1px 2px rgb(0 0 0 / 6%);
+    margin-bottom: 2rem;
+    padding: 2rem;
+  }
+
+  /* Hide print-only elements on screen */
+  .page-break {
+    display: none;
+  }
+
+  /* Screen-optimized header variations */
+  .datasheet-header--solid {
+    margin: 0 0 2rem;
+    padding: 1rem 2rem;
+    border-radius: 0 0 0.5rem 0.5rem;
+  }
+
+  .datasheet-header--solid .logo {
+    width: auto;
+    height: auto;
+  }
+
+  .datasheet-header--minimal {
+    margin: 0;
+    padding: 1rem 2rem;
+  }
+
+  /* Screen-optimized footer variations */
+  .datasheet-footer--compact {
+    margin: 1.5rem 0 -2rem;
+    padding: 0.75rem 2rem;
+    background: #f9fafb;
+    border-top: 1px solid #e5e7eb;
+    border-radius: 0 0 0.5rem 0.5rem;
+  }
+
+  .datasheet-footer--compact .footer-content {
+    justify-content: space-between;
+  }
+
+  .datasheet-footer--minimal {
+    margin: 1.5rem 0 -2rem;
+    padding: 0.5rem 2rem;
+    background: #fafafa;
+  }
+
+  .datasheet-footer--minimal p {
+    color: #d1d5db;
+    font-size: 12px;
+  }
+
+  /* Enhance interactive elements */
+  a {
+    transition: color 0.2s ease, text-decoration 0.2s ease;
+  }
+
+  a:hover {
+    color: #2563eb;
+    text-decoration: underline;
+  }
+
+  a:focus {
+    outline: 2px solid #3578e5;
+    outline-offset: 2px;
+    border-radius: 2px;
+  }
+
+  button {
+    cursor: pointer;
+    transition: all 0.2s ease;
+  }
+
+  .query-response-chat {
+    box-shadow: 0 1px 3px rgb(0 0 0 / 10%);
+  }
+
+  /* Better spacing for screens */
+  section {
+    margin-bottom: 3rem;
+  }
+
+  h2 {
+    margin-top: 2rem;
+  }
+
+}
+
+/* Responsive adjustments for screen viewing - Mobile (max 480px) */
+@media screen and (width <= 480px) {
+  body {
+    padding: 0;
+    font-size: 14px;
+    line-height: 20px;
+  }
+
+  .page {
+    padding: 1.5rem;
+    border-radius: 0.375rem;
+  }
+
+  h1 {
+    font-size: clamp(20px, 5vw, 26pt);
+    margin-bottom: 1rem;
+  }
+
+  h2 {
+    font-size: clamp(14px, 4vw, 18pt);
+    margin-bottom: 0.75rem;
+  }
+
+  h3 {
+    font-size: clamp(12px, 3.5vw, 14pt);
+    margin-bottom: 0.5rem;
+  }
+
+  p {
+    margin-bottom: 1rem;
+    line-height: 1.6;
+  }
+
+
+
+  .logo {
+    width: 100%;
+  }
+
+  .header-meta {
+    text-align: left;
+    font-size: 12px;
+  }
+
+  .datasheet-header--solid {
+    margin: 0 0 1rem;
+    padding: 0.75rem;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .datasheet-header--solid .header-meta {
+    text-align: left;
+  }
+
+  .datasheet-header--minimal {
+    margin: 0;
+    padding: 0.75rem;
+  }
+
+  /* Mobile footer variations */
+  .datasheet-footer {
+    margin: 1rem 0 0;
+    padding: 1rem;
+    flex-direction: column;
+    gap: 1rem;
+    font-size: 11px;
+  }
+
+  .footer-right {
+    text-align: left;
+  }
+
+  .datasheet-footer--compact {
+    flex-direction: column;
+    align-items: flex-start;
+    margin: 1rem 0 -1rem;
+    padding: 0.75rem;
+    gap: 0.5rem;
+  }
+
+  .datasheet-footer--compact .footer-content {
+    flex-direction: column;
+    gap: 0.5rem;
+    width: 100%;
+  }
+
+  .datasheet-footer--minimal {
+    margin: 1rem 0 -1rem;
+    padding: 0.5rem;
+  }
+
+  .cta-footer {
+    flex-direction: column;
+    gap: 1rem;
+    margin: 0;
+    padding: 1rem;
+  }
+
+  .section-header-bar {
+    margin: 0;
+    padding: 0 1rem;
+    height: auto;
+    min-height: 60px;
+    flex-wrap: wrap;
+  }
+
+  /* Larger tap targets */
+  button, a[role="button"] {
+    min-height: 44px;
+    min-width: 44px;
+  }
+
+  /* Table scrolling on mobile */
+  table {
+    font-size: 12px;
+    display: block;
+    overflow-x: auto;
+    border-collapse: collapse;
+  }
+
+  thead, tbody, th, td, tr {
+    display: block;
+  }
+
+  thead tr {
+    position: absolute;
+    top: -9999px;
+    left: -9999px;
+  }
+
+  tr {
+    margin-bottom: 1rem;
+    border: 1px solid #d1d5db;
+    border-radius: 4px;
+    overflow: hidden;
+  }
+
+  td {
+    padding: 0.5rem;
+    position: relative;
+    padding-left: 50%;
+    text-align: right;
+  }
+
+  td::before {
+    content: attr(data-label);
+    position: absolute;
+    left: 0.5rem;
+    font-weight: 600;
+    text-align: left;
+    width: 45%;
+  }
+}
+
+/* Tablet and Medium screens (481px - 800px) */
+@media screen and (width >= 481px) and (width <= 800px) {
+  body {
+    padding: 0;
+    font-size: 15px;
+    line-height: 22px;
+  }
+
+  .page {
+    padding: 1.75rem;
+  }
+
+  h1 {
+    font-size: clamp(22px, 4.5vw, 26pt);
+  }
+
+  h2 {
+    font-size: clamp(16px, 3.5vw, 18pt);
+  }
+
+
+
+  .cta-footer {
+    margin: 0;
+    padding: 1.5rem;
+  }
+
+  .section-header-bar {
+    margin: 0;
+    padding: 0 1.5rem;
+  }
+
+  .datasheet-footer {
+    margin: 1.5rem 0 0;
+    padding: 1.5rem;
+  }
+}
+
+/* Desktop screens (801px and above) */
+@media screen and (width >= 801px) {
+  body {
+    padding: 0;
+    font-size: 10pt;
+    line-height: 14pt;
+    max-width: 1200px;
+  }
+
+  .page {
+    padding: 2rem;
+  }
+
+
+  .cta-footer {
+    margin: 0;
+    padding: 2rem;
+  }
+
+  .section-header-bar {
+    margin: 0;
+    padding: 0 2rem;
+  }
+
+  .datasheet-footer {
+    margin: 2rem 0 0;
+    padding: 2rem;
+  }
+
+  section {
+    margin-bottom: 8mm;
+  }
+}
+
+