@bendyline/squisq-editor-react 2.1.0 → 2.2.0

package/src/imageEditor/image-editor.css

@@ -1,574 +0,0 @@
-/**
- * Image editor — layout and chrome for the `<ImageEditor>` component.
- *
- * Color tokens follow the same scoped-CSS-vars approach as the rest of
- * the editor; defaults are tuned for the dark host the editor typically
- * lives in but can be overridden by setting the listed `--squisq-image-editor-*`
- * custom properties on the `.squisq-image-editor` root.
- */
-
-.squisq-image-editor {
-  --squisq-image-editor-bg: #14141a;
-  --squisq-image-editor-panel-bg: #1d1d23;
-  --squisq-image-editor-panel-border: #2a2a32;
-  --squisq-image-editor-text: #e6e6ea;
-  --squisq-image-editor-text-muted: #9999a3;
-  --squisq-image-editor-accent: #3399ff;
-  --squisq-image-editor-control-bg: #2a2a32;
-  --squisq-image-editor-control-border: #3a3a42;
-  --squisq-image-editor-workspace-bg: #1f1f24;
-
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  min-height: 400px;
-  background: var(--squisq-image-editor-bg);
-  color: var(--squisq-image-editor-text);
-  font-family: var(--squisq-image-editor-body-font, system-ui, -apple-system, sans-serif);
-  font-size: 13px;
-}
-
-.squisq-image-editor-loading,
-.squisq-image-editor-error {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex: 1 1 auto;
-  padding: 2rem;
-  color: var(--squisq-image-editor-text-muted);
-}
-.squisq-image-editor-error {
-  color: #ff6b6b;
-}
-
-/* ── Toolbar ───────────────────────────────────────────────────────── */
-.squisq-image-editor-toolbar {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 0.4rem 0.75rem;
-  background: var(--squisq-image-editor-panel-bg);
-  border-bottom: 1px solid var(--squisq-image-editor-panel-border);
-  flex: 0 0 auto;
-}
-.squisq-image-editor-tool-group {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-}
-.squisq-image-editor-tool-group--right {
-  margin-left: auto;
-}
-/* Read-only property value (e.g. a path shape's kind). */
-.squisq-image-editor-readonly-value {
-  text-transform: capitalize;
-  opacity: 0.8;
-}
-/* Anchor for the shape palette popover that drops from the Shape tool. */
-.squisq-image-editor-shape-trigger {
-  position: relative;
-  display: inline-flex;
-}
-.squisq-image-editor-shape-trigger .squisq-shape-palette {
-  z-index: 20;
-}
-.squisq-image-editor-tool-button {
-  background: var(--squisq-image-editor-control-bg);
-  color: inherit;
-  border: 1px solid var(--squisq-image-editor-control-border);
-  border-radius: 4px;
-  padding: 0.3rem 0.55rem;
-  font: inherit;
-  /* Unified text size for every button on the toolbar. Icon-only
-     buttons get a slightly larger glyph via the SVG rule below so the
-     icons remain legible without disrupting the text rhythm of
-     adjacent labeled buttons. */
-  font-size: 13px;
-  cursor: pointer;
-  line-height: 1;
-  min-width: 28px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.35rem;
-}
-.squisq-image-editor-tool-button svg {
-  font-size: 15px;
-}
-.squisq-image-editor-tool-button--with-label {
-  font-size: 13px;
-}
-.squisq-image-editor-tool-button--menu {
-  width: 100%;
-  justify-content: flex-start;
-  border: none;
-  background: transparent;
-  padding: 0.35rem 0.5rem;
-}
-.squisq-image-editor-tool-button--menu:hover {
-  background: color-mix(in srgb, var(--squisq-image-editor-control-bg) 70%, transparent);
-}
-.squisq-image-editor-tool-button:hover {
-  background: var(--squisq-image-editor-control-border);
-}
-.squisq-image-editor-tool-button.is-active,
-.squisq-image-editor-tool-button[aria-checked='true'] {
-  background: var(--squisq-image-editor-accent);
-  border-color: var(--squisq-image-editor-accent);
-  color: #fff;
-}
-.squisq-image-editor-tool-button:disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
-
-/* ── Body / layout ─────────────────────────────────────────────────── */
-.squisq-image-editor-body {
-  display: flex;
-  flex: 1 1 auto;
-  min-height: 0;
-}
-.squisq-image-editor-center {
-  flex: 1 1 auto;
-  min-width: 0;
-  display: flex;
-}
-.squisq-image-editor-side {
-  flex: 0 0 280px;
-  display: flex;
-  flex-direction: column;
-  border-left: 1px solid var(--squisq-image-editor-panel-border);
-  background: var(--squisq-image-editor-panel-bg);
-  overflow: auto;
-}
-
-/* ── Canvas surface ────────────────────────────────────────────────── */
-.squisq-image-editor-surface {
-  flex: 1 1 auto;
-  min-width: 0;
-  min-height: 0;
-  overflow: auto;
-  background: var(--squisq-image-editor-workspace-bg);
-}
-.squisq-image-editor-canvas-wrap {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 100%;
-  min-height: 100%;
-  padding: 16px;
-  box-sizing: border-box;
-}
-.squisq-image-editor-canvas {
-  display: block;
-  flex: 0 0 auto;
-  background: transparent;
-  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
-  user-select: none;
-  touch-action: none;
-  image-rendering: pixelated;
-}
-.squisq-image-editor-canvas--tool-text,
-.squisq-image-editor-canvas--tool-shape {
-  cursor: crosshair;
-}
-.squisq-image-editor-canvas--tool-crop {
-  cursor: crosshair;
-}
-.squisq-image-editor-canvas--tool-zoom-rect {
-  cursor: zoom-in;
-}
-
-/* ── Layers panel ──────────────────────────────────────────────────── */
-.squisq-image-editor-panel-header {
-  padding: 0.5rem 0.75rem;
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--squisq-image-editor-text-muted);
-  border-bottom: 1px solid var(--squisq-image-editor-panel-border);
-}
-.squisq-image-editor-layers {
-  border-bottom: 1px solid var(--squisq-image-editor-panel-border);
-}
-.squisq-image-editor-layers-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  min-height: 32px;
-}
-.squisq-image-editor-layer-add {
-  position: relative;
-  display: inline-flex;
-}
-.squisq-image-editor-layer-add-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 22px;
-  height: 22px;
-  padding: 0;
-  color: inherit;
-  background: transparent;
-  border: 1px solid transparent;
-  border-radius: 3px;
-  cursor: pointer;
-  font: inherit;
-}
-.squisq-image-editor-layer-add-button:hover,
-.squisq-image-editor-layer-add-button[aria-expanded='true'] {
-  background: var(--squisq-image-editor-control-bg);
-  border-color: var(--squisq-image-editor-control-border);
-}
-.squisq-image-editor-layer-add-menu {
-  position: absolute;
-  top: calc(100% + 4px);
-  right: 0;
-  z-index: 20;
-  min-width: 150px;
-  padding: 4px;
-  background: var(--squisq-image-editor-panel-bg);
-  border: 1px solid var(--squisq-image-editor-panel-border);
-  border-radius: 5px;
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
-  text-transform: none;
-  letter-spacing: normal;
-}
-.squisq-image-editor-layer-add-menu-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  width: 100%;
-  padding: 6px 8px;
-  color: inherit;
-  background: transparent;
-  border: 0;
-  border-radius: 3px;
-  cursor: pointer;
-  font: inherit;
-  font-size: 12px;
-  text-align: left;
-}
-.squisq-image-editor-layer-add-menu-item:hover,
-.squisq-image-editor-layer-add-menu-item:focus-visible {
-  background: var(--squisq-image-editor-control-bg);
-  outline: none;
-}
-.squisq-image-editor-layer-add-menu-item svg {
-  flex: 0 0 auto;
-  width: 14px;
-}
-.squisq-image-editor-layer-list {
-  list-style: none;
-  margin: 0;
-  padding: 0.25rem 0;
-  max-height: 240px;
-  overflow: auto;
-}
-.squisq-image-editor-layer-empty {
-  padding: 0.5rem 0.75rem;
-  color: var(--squisq-image-editor-text-muted);
-  font-style: italic;
-}
-.squisq-image-editor-layer-item {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-  padding: 0.2rem 0.5rem;
-}
-.squisq-image-editor-layer-item.is-selected {
-  background: rgba(51, 153, 255, 0.18);
-}
-.squisq-image-editor-layer-item.is-hidden {
-  opacity: 0.5;
-}
-.squisq-image-editor-layer-toggle {
-  background: transparent;
-  border: 1px solid transparent;
-  color: inherit;
-  padding: 2px 5px;
-  border-radius: 3px;
-  font: inherit;
-  font-size: 15px;
-  cursor: pointer;
-  line-height: 1;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-.squisq-image-editor-layer-toggle:hover:not(:disabled) {
-  background: var(--squisq-image-editor-control-bg);
-}
-.squisq-image-editor-layer-toggle:disabled {
-  opacity: 0.3;
-  cursor: not-allowed;
-}
-.squisq-image-editor-layer-name {
-  min-width: 0;
-  flex: 1 1 auto;
-  text-align: left;
-  background: transparent;
-  border: none;
-  color: inherit;
-  cursor: pointer;
-  font: inherit;
-  padding: 2px 4px;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.squisq-image-editor-layer-name-text {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.squisq-image-editor-layer-kind {
-  flex: 0 0 auto;
-  margin-left: auto;
-  font-size: 10px;
-  color: var(--squisq-image-editor-text-muted);
-  text-transform: uppercase;
-}
-
-/* ── Properties panel ──────────────────────────────────────────────── */
-.squisq-image-editor-properties {
-  flex: 1 1 auto;
-}
-.squisq-image-editor-properties-empty {
-  padding: 0.75rem;
-  color: var(--squisq-image-editor-text-muted);
-  font-style: italic;
-}
-.squisq-image-editor-fieldset {
-  border: none;
-  border-bottom: 1px solid var(--squisq-image-editor-panel-border);
-  margin: 0;
-  padding: 0.5rem 0.75rem 0.6rem;
-}
-.squisq-image-editor-fieldset legend {
-  padding: 0;
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  color: var(--squisq-image-editor-text-muted);
-  margin-bottom: 0.4rem;
-}
-.squisq-image-editor-field {
-  display: grid;
-  grid-template-columns: 80px 1fr;
-  align-items: center;
-  gap: 0.5rem;
-  margin-bottom: 0.3rem;
-  font-size: 12px;
-}
-.squisq-image-editor-field--multiline {
-  grid-template-columns: 80px 1fr;
-  align-items: start;
-}
-.squisq-image-editor-field > span {
-  color: var(--squisq-image-editor-text-muted);
-}
-.squisq-image-editor-field input[type='number'],
-.squisq-image-editor-field input[type='text'],
-.squisq-image-editor-field select,
-.squisq-image-editor-field textarea {
-  width: 100%;
-  background: var(--squisq-image-editor-control-bg);
-  border: 1px solid var(--squisq-image-editor-control-border);
-  color: inherit;
-  border-radius: 3px;
-  padding: 3px 5px;
-  font: inherit;
-  box-sizing: border-box;
-}
-.squisq-image-editor-field textarea {
-  resize: vertical;
-  min-height: 56px;
-}
-.squisq-image-editor-color-row {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-}
-.squisq-image-editor-color-row input[type='color'] {
-  width: 28px;
-  height: 24px;
-  padding: 0;
-  border: 1px solid var(--squisq-image-editor-control-border);
-  border-radius: 3px;
-  background: transparent;
-  cursor: pointer;
-  flex: 0 0 auto;
-}
-.squisq-image-editor-color-row input[type='text'] {
-  flex: 1 1 auto;
-  font-family: ui-monospace, monospace;
-  font-size: 11px;
-}
-.squisq-image-editor-color-clear {
-  background: var(--squisq-image-editor-control-bg);
-  border: 1px solid var(--squisq-image-editor-control-border);
-  color: inherit;
-  border-radius: 3px;
-  padding: 2px 5px;
-  cursor: pointer;
-  font: inherit;
-  font-size: 14px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-/* ── Zoom controls ──────────────────────────────────────────────────── */
-.squisq-image-editor-tool-group--zoom {
-  gap: 0.15rem;
-}
-.squisq-image-editor-zoom-input {
-  width: 44px;
-  text-align: center;
-  background: var(--squisq-image-editor-control-bg);
-  border: 1px solid var(--squisq-image-editor-control-border);
-  color: inherit;
-  border-radius: 3px;
-  padding: 3px 2px;
-  font: inherit;
-  font-size: 12px;
-  -moz-appearance: textfield;
-}
-.squisq-image-editor-zoom-input::-webkit-inner-spin-button,
-.squisq-image-editor-zoom-input::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-}
-.squisq-image-editor-zoom-label {
-  font-size: 12px;
-  color: var(--squisq-image-editor-text-muted);
-  padding: 0 1px;
-}
-
-/* -- Version history dropdown --------------------------------------- */
-.squisq-image-editor-version-dropdown {
-  position: relative;
-  display: inline-flex;
-}
-.squisq-image-editor-version-popover {
-  position: absolute;
-  top: calc(100% + 4px);
-  right: 0;
-  z-index: 10;
-  min-width: 420px;
-  max-width: 560px;
-  background: var(--squisq-image-editor-panel-bg);
-  border: 1px solid var(--squisq-image-editor-panel-border);
-  border-radius: 6px;
-  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
-  padding: 6px;
-  color: var(--squisq-image-editor-text);
-}
-.squisq-image-editor-version-popover__title {
-  font-size: 11px;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--squisq-image-editor-text-muted);
-  padding: 4px 6px 6px;
-}
-.squisq-image-editor-version-popover__empty {
-  font-size: 12px;
-  color: var(--squisq-image-editor-text-muted);
-  padding: 8px 6px 10px;
-}
-.squisq-image-editor-version-popover__list {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  max-height: 280px;
-  overflow-y: auto;
-}
-.squisq-image-editor-version-popover__row {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 6px 4px;
-  border-radius: 4px;
-  min-width: 0;
-}
-.squisq-image-editor-version-popover__row:hover {
-  background: color-mix(in srgb, var(--squisq-image-editor-control-bg) 70%, transparent);
-}
-.squisq-image-editor-version-popover__thumb {
-  flex: 0 0 auto;
-  width: 56px;
-  height: 40px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: color-mix(in srgb, var(--squisq-image-editor-bg) 50%, transparent);
-  border: 1px solid var(--squisq-image-editor-panel-border);
-  border-radius: 3px;
-  overflow: hidden;
-}
-.squisq-image-editor-version-popover__thumb-img {
-  max-width: 100%;
-  max-height: 100%;
-  object-fit: contain;
-  display: block;
-}
-.squisq-image-editor-version-popover__thumb-placeholder {
-  width: 100%;
-  height: 100%;
-  background: repeating-linear-gradient(
-    45deg,
-    transparent 0 4px,
-    color-mix(in srgb, var(--squisq-image-editor-text-muted) 25%, transparent) 4px 8px
-  );
-}
-.squisq-image-editor-version-popover__info {
-  flex: 1 1 auto;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-.squisq-image-editor-version-popover__when {
-  font-size: 12px;
-  font-variant-numeric: tabular-nums;
-  color: var(--squisq-image-editor-text);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: flex;
-  align-items: center;
-}
-.squisq-image-editor-version-popover__summary {
-  font-size: 11px;
-  color: var(--squisq-image-editor-text-muted);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.squisq-image-editor-version-popover__row--current {
-  background: color-mix(in srgb, var(--squisq-image-editor-accent) 12%, transparent);
-}
-.squisq-image-editor-version-popover__row--current:hover {
-  background: color-mix(in srgb, var(--squisq-image-editor-accent) 18%, transparent);
-}
-.squisq-image-editor-version-popover__badge {
-  display: inline-block;
-  margin-right: 6px;
-  padding: 1px 6px;
-  font-size: 10px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  color: var(--squisq-image-editor-accent);
-  background: color-mix(in srgb, var(--squisq-image-editor-accent) 18%, transparent);
-  border: 1px solid color-mix(in srgb, var(--squisq-image-editor-accent) 40%, transparent);
-  border-radius: 3px;
-  vertical-align: 1px;
-}

package/src/imageEditor/layers/EditorImageLayer.tsx

@@ -1,45 +0,0 @@
-/**
- * SVG renderer for an `ImageEditLayer` of kind `image` inside the editor.
- * Resolves the asset path to a blob URL via the host-supplied
- * `resolveAssetUrl` (typically backed by the sidecar container).
- */
-
-import { useEffect, useState } from 'react';
-import type { ImageEditCanvas, ImageEditLayer } from '@bendyline/squisq/schemas';
-
-interface Props {
-  layer: ImageEditLayer & { type: 'image' };
-  canvas: ImageEditCanvas;
-  resolveAssetUrl: (path: string) => Promise<string>;
-}
-
-export function EditorImageLayer({ layer, canvas, resolveAssetUrl }: Props) {
-  const [href, setHref] = useState<string | null>(null);
-  const src = layer.content.src;
-
-  useEffect(() => {
-    let cancelled = false;
-    resolveAssetUrl(src)
-      .then((url) => {
-        if (!cancelled) setHref(url);
-      })
-      .catch(() => {
-        if (!cancelled) setHref(null);
-      });
-    return () => {
-      cancelled = true;
-    };
-  }, [src, resolveAssetUrl]);
-
-  if (!href) return null;
-
-  const p = layer.position;
-  const x = typeof p.x === 'number' ? p.x : 0;
-  const y = typeof p.y === 'number' ? p.y : 0;
-  const width = typeof p.width === 'number' ? p.width : canvas.width;
-  const height = typeof p.height === 'number' ? p.height : canvas.height;
-  const fit = layer.content.fit ?? 'fill';
-  const par = fit === 'cover' ? 'xMidYMid slice' : fit === 'contain' ? 'xMidYMid meet' : 'none';
-
-  return <image href={href} x={x} y={y} width={width} height={height} preserveAspectRatio={par} />;
-}

package/src/imageEditor/layers/EditorShapeLayer.tsx

@@ -1,62 +0,0 @@
-/**
- * SVG renderer for an `ImageEditLayer` of kind `shape` inside the editor.
- * Mirrors `react/src/layers/ShapeLayer.tsx` minus the animation/anchor
- * logic since the editor authors layers with numeric, top-left positions.
- */
-
-import type { ImageEditCanvas, ImageEditLayer } from '@bendyline/squisq/schemas';
-
-interface Props {
-  layer: ImageEditLayer & { type: 'shape' };
-  canvas: ImageEditCanvas;
-}
-
-export function EditorShapeLayer({ layer, canvas: _canvas }: Props) {
-  const p = layer.position;
-  const x = typeof p.x === 'number' ? p.x : 0;
-  const y = typeof p.y === 'number' ? p.y : 0;
-  const width = typeof p.width === 'number' ? p.width : 100;
-  const height = typeof p.height === 'number' ? p.height : 100;
-  const c = layer.content;
-  const fill = c.fill ?? 'none';
-  const stroke = c.stroke;
-  const strokeWidth = c.strokeWidth;
-
-  if (c.shape === 'rect') {
-    return (
-      <rect
-        x={x}
-        y={y}
-        width={width}
-        height={height}
-        rx={c.borderRadius}
-        ry={c.borderRadius}
-        fill={fill}
-        stroke={stroke}
-        strokeWidth={strokeWidth}
-      />
-    );
-  }
-  if (c.shape === 'circle') {
-    return (
-      <circle
-        cx={x + width / 2}
-        cy={y + height / 2}
-        r={Math.min(width, height) / 2}
-        fill={fill}
-        stroke={stroke}
-        strokeWidth={strokeWidth}
-      />
-    );
-  }
-  return (
-    <line
-      x1={x}
-      y1={y}
-      x2={x + width}
-      y2={y + height}
-      stroke={stroke ?? '#000'}
-      strokeWidth={strokeWidth ?? 1}
-    />
-  );
-}