@zuilib/text-editor 0.3.0 → 0.4.0

package/dist/styles.css

@@ -275,18 +275,20 @@
 /* Tables — artifact-style: rounded outer border, subtle header, tight rules */
 .zui-table {
   width: 100%;
+  max-width: 100%;
   margin: 1rem 0;
   border-collapse: separate;
   border-spacing: 0;
   border: 1px solid color-mix(in srgb, currentColor 15%, transparent);
   border-radius: 0.625rem;
   overflow: hidden;
-  font-size: 0.875rem;
+  /* Density presets set these custom properties inline (tableSettings.ts) */
+  font-size: var(--zui-table-font-size, 0.875rem);
   table-layout: fixed;
 }
 
 .zui-table-cell {
-  padding: 0.5rem 0.75rem;
+  padding: var(--zui-table-cell-padding, 0.5rem 0.75rem);
   border-bottom: 1px solid color-mix(in srgb, currentColor 10%, transparent);
   border-right: 1px solid color-mix(in srgb, currentColor 10%, transparent);
   vertical-align: top;
@@ -317,11 +319,42 @@
   background: color-mix(in srgb, #6965db 14%, transparent);
 }
 
+/*
+ * Floating table settings (width, density), straddling the top-right corner
+ * of the table the caret is in (positioned within .zui-text-editor-main). It
+ * stays inside the table's own top margin so it never covers the previous
+ * paragraph. The settings themselves are an inline style on the <table>
+ * (see tableSettings.ts).
+ */
+.zui-table-settings {
+  position: absolute;
+  z-index: 5;
+  display: flex;
+  gap: 0.125rem;
+  padding: 0.125rem;
+  border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
+  border-radius: 0.5rem;
+  background: #ffffff;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+  transform: translateY(-70%);
+}
+
+.dark .zui-table-settings {
+  background: #232329;
+  border-color: rgba(255, 255, 255, 0.1);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
+}
+
 /* Drawing canvas */
 .zui-drawing {
   margin: 1rem 0;
 }
 
+.zui-drawing-canvas.is-content-width {
+  width: fit-content;
+  max-width: 100%;
+}
+
 .zui-drawing-canvas {
   position: relative;
   border-radius: 0.75rem;
@@ -333,6 +366,7 @@
 .zui-drawing-surface {
   display: block;
   width: 100%;
+  max-width: 100%;
   touch-action: none;
   background-color: #ffffff;
   background-image: radial-gradient(
@@ -416,6 +450,11 @@
   pointer-events: auto;
 }
 
+/* Canvas-level controls (width) sit at the far right of the toolbar row */
+.zui-drawing-toolbar-group-end {
+  margin-left: auto;
+}
+
 .zui-drawing-tool {
   display: inline-flex;
   align-items: center;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zuilib/text-editor",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "ZUI — A markdown editor component wrapping Lexical",
   "type": "module",
   "main": "./dist/index.js",