@bendyline/squisq-editor-react 2.1.0 → 2.3.0

package/src/styles/folder-view.css

@@ -1,210 +0,0 @@
-/* ==========================================================================
-   FolderView — standalone folder browser surface
-   ==========================================================================
-   Companion to the editor shell: a list of files/subfolders plus a
-   prominent "New" action. Host-agnostic; mirrors the shell's chrome,
-   palette, and `data-theme` dark mode. */
-
-.squisq-folder-view {
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  font-family: var(
-    --squisq-ux-font,
-    -apple-system,
-    BlinkMacSystemFont,
-    'Segoe UI',
-    'Noto Sans',
-    Helvetica,
-    Arial,
-    sans-serif
-  );
-  color: #1f2937;
-  background: #fff;
-}
-
-/* ─── Header ─────────────────────────────────────────── */
-
-.squisq-folder-view-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 10px 14px;
-  border-bottom: 1px solid #e5e7eb;
-  background: #f9fafb;
-  flex-shrink: 0;
-}
-
-.squisq-folder-view-header-icon {
-  color: #6b7280;
-}
-
-.squisq-folder-view-title {
-  font-weight: 600;
-  font-size: 0.95rem;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.squisq-folder-view-count {
-  margin-left: auto;
-  color: #6b7280;
-  font-size: 0.8rem;
-  flex-shrink: 0;
-}
-
-/* ─── List ───────────────────────────────────────────── */
-
-.squisq-folder-view-body {
-  flex: 1;
-  min-height: 0;
-  overflow: auto;
-  padding: 8px;
-}
-
-.squisq-folder-view-empty {
-  margin: 0;
-  padding: 24px 16px;
-  color: #6b7280;
-  font-size: 0.9rem;
-  text-align: center;
-}
-
-.squisq-folder-view-list {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.squisq-folder-view-item {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 8px 10px;
-  background: transparent;
-  border: none;
-  border-radius: 6px;
-  color: inherit;
-  font: inherit;
-  cursor: pointer;
-  text-align: left;
-}
-
-.squisq-folder-view-item:hover {
-  background: rgba(0, 0, 0, 0.05);
-}
-
-.squisq-folder-view-item-icon {
-  flex-shrink: 0;
-  display: inline-flex;
-  justify-content: center;
-  color: #6b7280;
-}
-
-.squisq-folder-view-item-name {
-  flex: 1;
-  min-width: 0;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.squisq-folder-view-item-chevron {
-  flex-shrink: 0;
-  color: #9ca3af;
-  font-size: 0.7rem;
-}
-
-/* ─── New actions ────────────────────────────────────── */
-
-.squisq-folder-view-actions {
-  flex-shrink: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-  padding: 16px;
-  border-top: 1px solid #e5e7eb;
-}
-
-.squisq-folder-view-new {
-  width: 100%;
-  max-width: 360px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  padding: 14px 20px;
-  font-size: 1.05rem;
-  font-weight: 600;
-  color: #fff;
-  background: #3b82f6;
-  border: none;
-  border-radius: 10px;
-  cursor: pointer;
-  transition: background 0.12s ease;
-}
-
-.squisq-folder-view-new:hover {
-  background: #2563eb;
-}
-
-.squisq-folder-view-new-folder {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 6px 12px;
-  font-size: 0.85rem;
-  color: #6b7280;
-  background: transparent;
-  border: none;
-  border-radius: 6px;
-  cursor: pointer;
-}
-
-.squisq-folder-view-new-folder:hover {
-  color: #2563eb;
-  background: rgba(37, 99, 235, 0.08);
-}
-
-/* ─── Dark mode (data-theme="dark") ──────────────────── */
-
-.squisq-folder-view[data-theme='dark'] {
-  color: #e5e7eb;
-  background: #111827;
-}
-
-.squisq-folder-view[data-theme='dark'] .squisq-folder-view-header {
-  background: #1f2937;
-  border-bottom-color: #374151;
-}
-
-.squisq-folder-view[data-theme='dark'] .squisq-folder-view-header-icon,
-.squisq-folder-view[data-theme='dark'] .squisq-folder-view-count,
-.squisq-folder-view[data-theme='dark'] .squisq-folder-view-item-icon,
-.squisq-folder-view[data-theme='dark'] .squisq-folder-view-empty {
-  color: #9ca3af;
-}
-
-.squisq-folder-view[data-theme='dark'] .squisq-folder-view-item:hover {
-  background: rgba(255, 255, 255, 0.06);
-}
-
-.squisq-folder-view[data-theme='dark'] .squisq-folder-view-actions {
-  border-top-color: #374151;
-}
-
-.squisq-folder-view[data-theme='dark'] .squisq-folder-view-new:hover {
-  background: #60a5fa;
-}
-
-.squisq-folder-view[data-theme='dark'] .squisq-folder-view-new-folder {
-  color: #9ca3af;
-}
-
-.squisq-folder-view[data-theme='dark'] .squisq-folder-view-new-folder:hover {
-  color: #93c5fd;
-  background: rgba(96, 165, 250, 0.12);
-}

package/src/styles/image-edit-affordance.css

@@ -1,201 +0,0 @@
-/**
- * Image edit affordance + modal overlay.
- *
- * The affordance is the small floating "Edit" button that appears on
- * hovered/selected images inside the WYSIWYG view. The modal hosts a
- * full <ImageEditor> on top of the editor surface.
- */
-
-.squisq-image-edit-affordance {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 4px 10px;
-  font: 500 12px/1.2 var(--squisq-ux-font, system-ui, -apple-system, sans-serif);
-  /* Theme-tied colors. The shell sets `--squisq-editor-*` tokens (or
-     equivalents via [data-theme]) on the WYSIWYG root; we fall back to
-     a neutral light surface so the button is legible on photographic
-     content even when no theme variables are set. The dark-theme block
-     below overrides for [data-theme='dark']. */
-  color: var(--squisq-editor-text, #1f2937);
-  background: var(--squisq-editor-control-bg, rgba(255, 255, 255, 0.92));
-  border: 1px solid var(--squisq-editor-control-border, rgba(0, 0, 0, 0.18));
-  border-radius: 4px;
-  cursor: pointer;
-  z-index: 4;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
-  user-select: none;
-  backdrop-filter: blur(4px);
-}
-
-.squisq-image-edit-affordance:hover {
-  background: var(--squisq-editor-control-bg-hover, rgba(245, 245, 247, 0.98));
-}
-
-.squisq-image-edit-affordance:focus-visible {
-  outline: 2px solid var(--squisq-editor-accent, #4a9eff);
-  outline-offset: 2px;
-}
-
-[data-theme='dark'] .squisq-image-edit-affordance,
-.squisq-editor-shell[data-theme='dark'] .squisq-image-edit-affordance {
-  color: var(--squisq-editor-text, #f3f4f6);
-  background: var(--squisq-editor-control-bg, rgba(20, 20, 20, 0.85));
-  border-color: var(--squisq-editor-control-border, rgba(255, 255, 255, 0.2));
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
-}
-
-[data-theme='dark'] .squisq-image-edit-affordance:hover,
-.squisq-editor-shell[data-theme='dark'] .squisq-image-edit-affordance:hover {
-  background: var(--squisq-editor-control-bg-hover, rgba(45, 45, 45, 0.95));
-}
-
-/* ── Resize handle ──────────────────────────────────────────────
-   Small grip at the bottom-right corner of a hovered/selected image.
-   Mousedown starts an aspect-locked resize; double-click clears the
-   width/height attrs (returns image to natural rendered size). */
-.squisq-image-resize-handle {
-  position: absolute;
-  right: -4px;
-  bottom: -4px;
-  width: 14px;
-  height: 14px;
-  border: 1.5px solid var(--squisq-editor-accent, #4a9eff);
-  background: var(--squisq-editor-control-bg, rgba(255, 255, 255, 0.95));
-  border-radius: 2px;
-  cursor: nwse-resize;
-  z-index: 5;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
-  user-select: none;
-  touch-action: none;
-}
-
-.squisq-image-resize-handle:hover {
-  background: var(--squisq-editor-accent, #4a9eff);
-}
-
-[data-theme='dark'] .squisq-image-resize-handle,
-.squisq-editor-shell[data-theme='dark'] .squisq-image-resize-handle {
-  background: var(--squisq-editor-control-bg, rgba(20, 20, 20, 0.9));
-}
-
-.squisq-image-resize-readout {
-  position: absolute;
-  left: 8px;
-  bottom: 8px;
-  padding: 2px 6px;
-  font: 500 11px/1.2 var(--squisq-ux-font, system-ui, -apple-system, sans-serif);
-  color: var(--squisq-editor-text, #fff);
-  background: rgba(0, 0, 0, 0.7);
-  border-radius: 3px;
-  pointer-events: none;
-  z-index: 5;
-}
-
-.squisq-image-edit-modal {
-  position: fixed;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: rgba(0, 0, 0, 0.55);
-  z-index: 1000;
-  padding: 24px;
-}
-
-.squisq-image-edit-modal__surface {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  background: #fff;
-  border-radius: 6px;
-  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
-  overflow: hidden;
-}
-
-[data-theme='dark'] .squisq-image-edit-modal__surface,
-.squisq-editor-shell[data-theme='dark'] .squisq-image-edit-modal__surface {
-  background: #1e1e1e;
-  color: #e4e4e4;
-}
-
-.squisq-image-edit-modal__header {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 8px 12px;
-  border-bottom: 1px solid #d4d4d4;
-  font: 500 13px/1.2 var(--squisq-ux-font, system-ui, -apple-system, sans-serif);
-  background: #f5f5f5;
-}
-
-[data-theme='dark'] .squisq-image-edit-modal__header {
-  background: #2a2a2a;
-  border-bottom-color: #3a3a3a;
-}
-
-.squisq-image-edit-modal__title {
-  font-weight: 600;
-}
-
-.squisq-image-edit-modal__path {
-  flex: 1;
-  color: #666;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 12px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-[data-theme='dark'] .squisq-image-edit-modal__path {
-  color: #aaa;
-}
-
-.squisq-image-edit-modal__close {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  padding: 0;
-  font-size: 22px;
-  line-height: 1;
-  background: transparent;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  cursor: pointer;
-  color: inherit;
-}
-
-.squisq-image-edit-modal__close:hover {
-  background: rgba(0, 0, 0, 0.07);
-}
-
-[data-theme='dark'] .squisq-image-edit-modal__close:hover {
-  background: rgba(255, 255, 255, 0.08);
-}
-
-.squisq-image-edit-modal__body {
-  flex: 1;
-  min-height: 0;
-  display: flex;
-}
-
-.squisq-image-edit-modal__loading,
-.squisq-image-edit-modal__error {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font: 500 13px var(--squisq-ux-font, system-ui, -apple-system, sans-serif);
-  color: #666;
-}
-
-.squisq-image-edit-modal__error {
-  color: #c0392b;
-}

package/src/styles/index.css

@@ -1,20 +0,0 @@
-/**
- * @bendyline/squisq-editor-react — bundled stylesheet entry.
- * Aggregates all CSS shipped with this package.
- */
-
-@import '@fortawesome/fontawesome-free/css/all.min.css';
-@import './editor.css';
-@import './code-context.css';
-@import './folder-view.css';
-@import '../jsonEditor/json-editor.css';
-@import '../imageEditor/image-editor.css';
-@import './image-edit-affordance.css';
-@import './diagram.css';
-@import './ascii-diagram.css';
-@import './mermaid-diagram.css';
-@import './code-snippet.css';
-@import './tree-view.css';
-@import './ascii-timeline.css';
-@import '../scene/scene.css';
-@import '../customTemplates/designer.css';