@frontlit/page-builder 0.1.0-alpha.6 → 0.1.0-alpha.8

package/dist/styles.css

@@ -1174,6 +1174,9 @@
   .min-h-0 {
     min-height: 0px;
   }
+  .min-h-10 {
+    min-height: calc(var(--spacing) * 10);
+  }
   .min-h-11 {
     min-height: calc(var(--spacing) * 11);
   }
@@ -1252,9 +1255,15 @@
   .w-12 {
     width: calc(var(--spacing) * 12);
   }
+  .w-24 {
+    width: calc(var(--spacing) * 24);
+  }
   .w-28 {
     width: calc(var(--spacing) * 28);
   }
+  .w-32 {
+    width: calc(var(--spacing) * 32);
+  }
   .w-40 {
     width: calc(var(--spacing) * 40);
   }
@@ -1345,6 +1354,9 @@
   .grow {
     flex-grow: 1;
   }
+  .border-collapse {
+    border-collapse: collapse;
+  }
   .-translate-x-1 {
     --tw-translate-x: calc(var(--spacing) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -1603,6 +1615,15 @@
   .scroll-m-20 {
     scroll-margin: calc(var(--spacing) * 20);
   }
+  .\[scrollbar-width\:none\] {
+    scrollbar-width: none;
+  }
+  .\[scrollbar-width\:thin\] {
+    scrollbar-width: thin;
+  }
+  .\[scrollbar-color\:var\(--border\)_transparent\] {
+    scrollbar-color: var(--border) transparent;
+  }
   .list-inside {
     list-style-position: inside;
   }
@@ -1786,6 +1807,9 @@
   .overflow-y-auto {
     overflow-y: auto;
   }
+  .overflow-y-hidden {
+    overflow-y: hidden;
+  }
   .rounded {
     border-radius: 0.25rem;
   }
@@ -3257,6 +3281,9 @@
   .pl-2 {
     padding-left: calc(var(--spacing) * 2);
   }
+  .pl-6 {
+    padding-left: calc(var(--spacing) * 6);
+  }
   .pl-8 {
     padding-left: calc(var(--spacing) * 8);
   }
@@ -3275,6 +3302,9 @@
   .text-right {
     text-align: right;
   }
+  .align-top {
+    vertical-align: top;
+  }
   .font-alegreya {
     font-family: var(--font-alegreya, Alegreya), ui-serif, Georgia, Cambria, "Times New Roman",
     Times, serif;
@@ -3437,6 +3467,9 @@
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
   }
+  .text-\[0\.875em\] {
+    font-size: 0.875em;
+  }
   .text-\[10px\] {
     font-size: 10px;
   }
@@ -4621,6 +4654,9 @@
   .running {
     animation-play-state: running;
   }
+  .group-open\:rotate-90:is(:where(.group):is([open], :popover-open, :open) *) {
+    rotate: 90deg;
+  }
   .group-open\:rotate-180:is(:where(.group):is([open], :popover-open, :open) *) {
     rotate: 180deg;
   }
@@ -4692,6 +4728,18 @@
       color: color-mix(in oklab, var(--muted-foreground) 70%, transparent);
     }
   }
+  .before\:mr-2::before {
+    content: var(--tw-content);
+    margin-right: calc(var(--spacing) * 2);
+  }
+  .before\:text-muted-foreground::before {
+    content: var(--tw-content);
+    color: var(--muted-foreground);
+  }
+  .before\:content-\[attr\(data-label\)\'\:\'\]::before {
+    --tw-content: attr(data-label)':';
+    content: var(--tw-content);
+  }
   .after\:absolute::after {
     content: var(--tw-content);
     position: absolute;
@@ -4759,6 +4807,10 @@
     border-style: var(--tw-border-style);
     border-width: 0px;
   }
+  .last\:border-b-0:last-child {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 0px;
+  }
   .last\:pb-0:last-child {
     padding-bottom: 0px;
   }
@@ -6765,6 +6817,9 @@
     --tw-outline-style: none;
     outline-style: none;
   }
+  .focus-visible\:ring-inset:focus-visible {
+    --tw-ring-inset: inset;
+  }
   .disabled\:pointer-events-none:disabled {
     pointer-events: none;
   }
@@ -8223,6 +8278,9 @@
   .disabled\:text-zinc-950:disabled {
     color: var(--color-zinc-950);
   }
+  .disabled\:opacity-40:disabled {
+    opacity: 40%;
+  }
   .disabled\:opacity-50:disabled {
     opacity: 50%;
   }
@@ -8408,6 +8466,21 @@
     }
   }
   @media (width >= 48rem) {
+    .md\:table {
+      display: table;
+    }
+    .md\:table-cell {
+      display: table-cell;
+    }
+    .md\:table-header-group {
+      display: table-header-group;
+    }
+    .md\:table-row {
+      display: table-row;
+    }
+    .md\:table-row-group {
+      display: table-row-group;
+    }
     .md\:w-1\/2 {
       width: calc(1 / 2 * 100%);
     }
@@ -8457,12 +8530,21 @@
     .md\:gap-10 {
       gap: calc(var(--spacing) * 10);
     }
+    .md\:p-0 {
+      padding: 0px;
+    }
     .md\:p-10 {
       padding: calc(var(--spacing) * 10);
     }
     .md\:p-12 {
       padding: calc(var(--spacing) * 12);
     }
+    .md\:px-3 {
+      padding-inline: calc(var(--spacing) * 3);
+    }
+    .md\:py-2 {
+      padding-block: calc(var(--spacing) * 2);
+    }
     .md\:text-sm {
       font-size: var(--text-sm);
       line-height: var(--tw-leading, var(--text-sm--line-height));
@@ -8470,6 +8552,11 @@
     .md\:text-\[length\:var\(--pb-title-tablet\)\] {
       font-size: var(--pb-title-tablet);
     }
+    .md\:before\:content-none::before {
+      content: var(--tw-content);
+      --tw-content: none;
+      content: none;
+    }
   }
   @media (width >= 64rem) {
     .lg\:\!block {
@@ -10601,6 +10688,262 @@
   border-radius: 0.5rem;
   margin: 1rem auto;
 }
+.tiptap-renderer .te-code-block__title {
+  border: 1px solid var(--border, hsl(214.3 31.8% 91.4%));
+  border-bottom: none;
+  border-radius: 0.5rem 0.5rem 0 0;
+  color: var(--muted-foreground, hsl(215.4 16.3% 46.9%));
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+  font-size: 0.8125rem;
+  padding: 0.5rem 1rem;
+  padding-right: 2.75rem;
+}
+.tiptap-renderer .te-code-block__title + pre {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+.tiptap-renderer .te-callout {
+  --te-callout-accent: var(--primary, hsl(222.2 47.4% 11.2%));
+  display: flex;
+  gap: 0.75rem;
+  margin: 1rem 0;
+  padding: 0.75rem 1rem;
+  border: 1px solid var(--te-callout-accent);
+  @supports (color: color-mix(in lab, red, red)) {
+    border: 1px solid color-mix(in srgb, var(--te-callout-accent) 35%, transparent);
+  }
+  border-radius: 0.5rem;
+  background: var(--te-callout-accent);
+  @supports (color: color-mix(in lab, red, red)) {
+    background: color-mix(in srgb, var(--te-callout-accent) 7%, transparent);
+  }
+}
+.tiptap-renderer .te-callout[data-type="tip"] {
+  --te-callout-accent: hsl(142 71% 36%);
+}
+.tiptap-renderer .te-callout[data-type="warning"] {
+  --te-callout-accent: hsl(38 92% 45%);
+}
+.tiptap-renderer .te-callout[data-type="danger"] {
+  --te-callout-accent: hsl(0 72% 51%);
+}
+.tiptap-renderer .te-callout[data-type="note"] {
+  --te-callout-accent: var(--muted-foreground, hsl(215.4 16.3% 46.9%));
+}
+.tiptap-renderer .te-callout__icon {
+  flex-shrink: 0;
+  width: 1.125rem;
+  height: 1.125rem;
+  margin-top: 0.2rem;
+  color: var(--te-callout-accent);
+}
+.tiptap-renderer .te-callout__body {
+  min-width: 0;
+  flex: 1;
+}
+.tiptap-renderer .te-callout__body > :first-child {
+  margin-top: 0;
+}
+.tiptap-renderer .te-callout__body > :last-child {
+  margin-bottom: 0;
+}
+.tiptap-renderer .te-callout__title {
+  font-weight: 600;
+}
+.tiptap-renderer .te-tabs {
+  margin: 1rem 0;
+}
+.tiptap-renderer .te-tabs__list {
+  display: flex;
+  gap: 0.25rem;
+  overflow-x: auto;
+  border-bottom: 1px solid var(--border, hsl(214.3 31.8% 91.4%));
+}
+.tiptap-renderer .te-tabs__tab {
+  appearance: none;
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+  padding: 0.5rem 0.75rem;
+  color: var(--muted-foreground, hsl(215.4 16.3% 46.9%));
+  font: inherit;
+  font-size: 0.875rem;
+  font-weight: 500;
+  white-space: nowrap;
+  cursor: pointer;
+}
+.tiptap-renderer .te-tabs__tab[aria-selected="true"] {
+  border-bottom-color: var(--primary, hsl(222.2 47.4% 11.2%));
+  color: var(--foreground, hsl(222.2 84% 4.9%));
+}
+.tiptap-renderer .te-tabs__panel > :first-child {
+  margin-top: 0.75rem;
+}
+.tiptap-renderer .te-code-group .te-code-block__title {
+  display: none;
+}
+.tiptap-renderer .te-steps {
+  counter-reset: te-step;
+  margin: 1rem 0;
+  padding-left: 0;
+}
+.tiptap-renderer .te-steps > .te-step {
+  counter-increment: te-step;
+  list-style: none;
+  position: relative;
+  padding-left: 2.75rem;
+  padding-bottom: 0.5rem;
+}
+.tiptap-renderer .te-steps > .te-step::before {
+  content: counter(te-step);
+  position: absolute;
+  left: 0;
+  top: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  border: 1px solid var(--border, hsl(214.3 31.8% 91.4%));
+  border-radius: 9999px;
+  background: var(--muted, hsl(210 40% 96.1%));
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+.tiptap-renderer .te-steps > .te-step::after {
+  content: "";
+  position: absolute;
+  left: 0.875rem;
+  top: 2.25rem;
+  bottom: 0.25rem;
+  border-left: 1px solid var(--border, hsl(214.3 31.8% 91.4%));
+}
+.tiptap-renderer .te-steps > .te-step > :first-child {
+  margin-top: 0;
+}
+.tiptap-renderer .te-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
+  gap: 0.75rem;
+  margin: 1rem 0;
+}
+.tiptap-renderer .te-card {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding: 1rem;
+  border: 1px solid var(--border, hsl(214.3 31.8% 91.4%));
+  border-radius: 0.5rem;
+  background: var(--card, transparent);
+  color: inherit;
+  text-decoration: none;
+}
+.tiptap-renderer a.te-card:hover {
+  background: var(--muted, hsl(210 40% 96.1%));
+}
+.tiptap-renderer .te-card__icon {
+  width: 1.25rem;
+  height: 1.25rem;
+  margin-bottom: 0.25rem;
+  color: var(--muted-foreground, hsl(215.4 16.3% 46.9%));
+}
+.tiptap-renderer .te-card__title {
+  font-weight: 600;
+}
+.tiptap-renderer .te-card__body {
+  color: var(--muted-foreground, hsl(215.4 16.3% 46.9%));
+  font-size: 0.875rem;
+}
+.tiptap-renderer .te-card__body > * {
+  margin: 0;
+}
+.tiptap-renderer .te-accordions {
+  margin: 1rem 0;
+  border: 1px solid var(--border, hsl(214.3 31.8% 91.4%));
+  border-radius: 0.5rem;
+}
+.tiptap-renderer .te-accordion + .te-accordion {
+  border-top: 1px solid var(--border, hsl(214.3 31.8% 91.4%));
+}
+.tiptap-renderer .te-accordion__title {
+  padding: 0.75rem 1rem;
+  font-weight: 600;
+  cursor: pointer;
+}
+.tiptap-renderer .te-accordion__body {
+  padding: 0 1rem;
+}
+.tiptap-renderer .te-type-table {
+  overflow-x: auto;
+}
+.tiptap-renderer .te-type-table table {
+  table-layout: auto;
+}
+.tiptap-renderer .te-type-table__required {
+  color: var(--muted-foreground, hsl(215.4 16.3% 46.9%));
+  font-size: 0.75rem;
+}
+.tiptap-editor .ProseMirror .te-block {
+  margin: 0.75rem 0;
+  border: 1px solid var(--border);
+  border-radius: 0.5rem;
+}
+.tiptap-editor .ProseMirror .te-block__bar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.25rem 0.5rem;
+  border-bottom: 1px solid var(--border);
+  background: var(--muted);
+  border-radius: 0.5rem 0.5rem 0 0;
+  font-size: 0.75rem;
+}
+.tiptap-editor .ProseMirror .te-block__label {
+  font-weight: 600;
+  color: var(--muted-foreground);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+.tiptap-editor .ProseMirror .te-block__content {
+  padding: 0.25rem 0.75rem;
+}
+.tiptap-editor .ProseMirror .te-block-item {
+  margin: 0.5rem 0;
+  border: 1px dashed var(--border);
+  border-radius: 0.375rem;
+}
+.tiptap-editor .ProseMirror .te-block-item > .te-block__bar {
+  background: transparent;
+}
+.tiptap-editor .ProseMirror .te-block[data-block="steps"] > .te-block__content {
+  counter-reset: te-step;
+}
+.tiptap-editor .ProseMirror .te-block-item[data-block="step"]::before {
+  counter-increment: te-step;
+  content: "Step " counter(te-step);
+  display: block;
+  padding: 0.25rem 0.75rem 0;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--muted-foreground);
+}
+.tiptap-editor .ProseMirror .te-block-code {
+  margin: 0.75rem 0;
+}
+.tiptap-editor .ProseMirror .te-block-code pre {
+  margin-top: 0;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+.tiptap-editor .ProseMirror .te-block-table {
+  table-layout: auto;
+  margin: 0.5rem 0;
+}
+.tiptap-editor .ProseMirror .te-block-table th, .tiptap-editor .ProseMirror .te-block-table td {
+  padding: 0.25rem;
+}
 @property --tw-translate-x {
   syntax: "*";
   inherits: false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frontlit/page-builder",
-  "version": "0.1.0-alpha.6",
+  "version": "0.1.0-alpha.8",
   "description": "Block-based WYSIWYG page builder and renderer for React",
   "author": "FrontLit",
   "license": "MIT",
@@ -162,7 +162,7 @@
   },
   "dependencies": {
     "@frontlit/media-uploader": "0.1.0-alpha.1",
-    "@frontlit/text-editor": "0.1.0-alpha.3",
+    "@frontlit/text-editor": "0.1.0-alpha.4",
     "@radix-ui/react-alert-dialog": "^1.1.23",
     "@radix-ui/react-avatar": "^1.2.6",
     "@radix-ui/react-checkbox": "^1.3.11",