@yoamigo.com/core 0.1.1 → 0.1.3

package/dist/index.js

@@ -503,6 +503,256 @@ function SafeHtml({ content, className, mode = "read-only" }) {
   ] });
 }
 
+// #style-inject:#style-inject
+function styleInject(css, { insertAt } = {}) {
+  if (!css || typeof document === "undefined") return;
+  const head = document.head || document.getElementsByTagName("head")[0];
+  const style = document.createElement("style");
+  style.type = "text/css";
+  if (insertAt === "top") {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+// src/components/ya-text.css
+styleInject(`.ya-text-editable {
+  cursor: text;
+  transition: outline 0.15s ease;
+}
+.ya-text-editable:hover {
+  outline: 2px dashed var(--color-primary, #D4A574);
+  outline-offset: 4px;
+  border-radius: 4px;
+}
+body.builder-selector-active .ya-text-editable:hover {
+  outline: none;
+  cursor: inherit;
+}
+.ya-text-editing {
+  outline: 2px solid var(--color-primary, #D4A574);
+  outline-offset: 4px;
+  border-radius: 4px;
+  position: relative;
+}
+.ya-bubble-menu {
+  display: flex;
+  gap: 4px;
+  padding: 6px 8px;
+  background: #1a1a1a;
+  border-radius: 8px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+  animation: ya-bubble-fade-in 0.15s ease;
+  font-family:
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    sans-serif;
+}
+@keyframes ya-bubble-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.ya-bubble-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: #e0e0e0;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  font-size: 14px;
+}
+.ya-bubble-btn:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: #ffffff;
+}
+.ya-bubble-btn.is-active {
+  background: var(--color-primary, #D4A574);
+  color: #1a1a1a;
+}
+.ya-bubble-btn.is-active:hover {
+  background: var(--color-primary, #D4A574);
+  filter: brightness(1.1);
+}
+.ya-bubble-divider {
+  width: 1px;
+  height: 20px;
+  background: rgba(255, 255, 255, 0.2);
+  margin: 6px 4px;
+}
+.ya-bubble-select {
+  appearance: none;
+  background: transparent;
+  color: #e0e0e0;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 6px;
+  padding: 6px 24px 6px 10px;
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  min-width: 70px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23e0e0e0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 6px center;
+}
+.ya-bubble-select:hover {
+  border-color: rgba(255, 255, 255, 0.4);
+  background-color: rgba(255, 255, 255, 0.05);
+}
+.ya-bubble-select:focus {
+  outline: none;
+  border-color: var(--color-primary, #D4A574);
+}
+.ya-bubble-select option {
+  background: #1a1a1a;
+  color: #e0e0e0;
+  padding: 8px;
+}
+.ProseMirror {
+  outline: none;
+}
+.ProseMirror p {
+  margin: 0;
+}
+.ProseMirror a {
+  color: var(--color-primary, #D4A574);
+  text-decoration: underline;
+}
+.ProseMirror a:hover {
+  color: var(--color-secondary, #5C4033);
+}
+.ProseMirror ::selection {
+  background: rgba(212, 165, 116, 0.3);
+}
+.ProseMirror p.is-editor-empty:first-child::before {
+  content: attr(data-placeholder);
+  float: left;
+  color: #adb5bd;
+  pointer-events: none;
+  height: 0;
+}
+.ya-text-actions {
+  display: flex;
+  gap: 8px;
+  position: absolute;
+  bottom: -48px;
+  right: 0;
+  z-index: 10;
+  background: rgba(26, 26, 26, 0.8);
+  padding: 8px 10px;
+  border-radius: 8px;
+  font-family:
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    sans-serif;
+}
+.ya-text-btn {
+  padding: 6px 14px;
+  font-size: 12px;
+  font-weight: 500;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  border: none;
+}
+.ya-text-btn-cancel {
+  background: #333333;
+  color: #ffffff;
+  border: 1px solid #555555;
+}
+.ya-text-btn-cancel:hover {
+  background: #444444;
+  color: #ffffff;
+  border-color: #666666;
+}
+.ya-text-btn-save {
+  background: #D4A574;
+  color: #1a1a1a;
+}
+.ya-text-btn-save:hover {
+  background: #c4956a;
+}
+.ya-link-popover {
+  position: fixed;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 12px;
+  background: #1a1a1a;
+  color: #e0e0e0;
+  border-radius: 8px;
+  font-size: 13px;
+  font-weight: 500;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+  cursor: pointer;
+  white-space: nowrap;
+  transform: translateX(-50%);
+  pointer-events: auto;
+  animation: ya-link-popover-fade-in 0.1s ease;
+}
+.ya-link-popover:hover {
+  background: #2a2a2a;
+}
+@keyframes ya-link-popover-fade-in {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+  }
+}
+.ya-link-popover::before {
+  content: "";
+  position: absolute;
+  top: -6px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-bottom: 6px solid #1a1a1a;
+}
+.ya-link-popover-icon {
+  width: 14px;
+  height: 14px;
+  opacity: 0.8;
+  flex-shrink: 0;
+}
+.ya-link-popover-prefix {
+  opacity: 0.7;
+}
+.ya-link-popover-name {
+  color: var(--color-primary, #D4A574);
+}
+`);
+
 // src/components/YaText.tsx
 import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 var FontSize = Extension.create({
@@ -907,6 +1157,11 @@ function resolveAssetUrl(path) {
 // src/components/YaTooltip.tsx
 import { useEffect as useEffect4, useRef as useRef4, useState as useState4, useCallback as useCallback4 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
+
+// src/components/ya-tooltip.css
+styleInject('.ya-tooltip {\n  position: fixed;\n  z-index: 9999;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 12px;\n  background: #1a1a1a;\n  color: white;\n  border-radius: 6px;\n  font-size: 13px;\n  font-weight: 500;\n  font-family:\n    system-ui,\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    sans-serif;\n  white-space: nowrap;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);\n  animation: ya-tooltip-fade-in 0.15s ease;\n  pointer-events: none;\n}\n@keyframes ya-tooltip-fade-in {\n  from {\n    opacity: 0;\n    transform: scale(0.95);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n.ya-tooltip svg {\n  width: 16px;\n  height: 16px;\n  flex-shrink: 0;\n}\n.ya-tooltip-bottom {\n  transform: translateX(-50%);\n}\n.ya-tooltip-bottom::before {\n  content: "";\n  position: absolute;\n  bottom: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  border: 6px solid transparent;\n  border-bottom-color: #1a1a1a;\n}\n.ya-tooltip-top {\n  transform: translateX(-50%);\n}\n.ya-tooltip-top::before {\n  content: "";\n  position: absolute;\n  top: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  border: 6px solid transparent;\n  border-top-color: #1a1a1a;\n}\n.ya-tooltip-right {\n  transform: translateY(-50%);\n}\n.ya-tooltip-right::before {\n  content: "";\n  position: absolute;\n  right: 100%;\n  top: 50%;\n  transform: translateY(-50%);\n  border: 6px solid transparent;\n  border-right-color: #1a1a1a;\n}\n.ya-tooltip-left {\n  transform: translateY(-50%);\n}\n.ya-tooltip-left::before {\n  content: "";\n  position: absolute;\n  left: 100%;\n  top: 50%;\n  transform: translateY(-50%);\n  border: 6px solid transparent;\n  border-left-color: #1a1a1a;\n}\n');
+
+// src/components/YaTooltip.tsx
 import { jsx as jsx5 } from "react/jsx-runtime";
 function YaTooltip({
   anchorRef,
@@ -1032,6 +1287,9 @@ function YaTooltip({
   );
 }
 
+// src/components/ya-image.css
+styleInject('.ya-image-container {\n  position: relative;\n  display: inline-block;\n  min-width: 45px;\n  min-height: 45px;\n  cursor: pointer;\n  transition: outline 0.15s ease;\n}\n.ya-image-container img {\n  display: block;\n}\n.ya-image-editable {\n  cursor: pointer;\n}\n.ya-image-editable:hover {\n  outline: 2px dashed var(--color-primary, #D4A574);\n  outline-offset: 4px;\n}\n.ya-image-selected {\n  outline: 3px solid var(--color-primary, #D4A574);\n  outline-offset: 4px;\n}\n.ya-image-overlay {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  background: rgba(0, 0, 0, 0.5);\n  opacity: 0;\n  transition: opacity 0.2s ease;\n  pointer-events: none;\n  border-radius: inherit;\n}\n.ya-image-editable:hover .ya-image-overlay {\n  opacity: 1;\n}\n.ya-image-selected .ya-image-overlay {\n  opacity: 0;\n}\n.ya-image-edit-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 48px;\n  height: 48px;\n  background: white;\n  border-radius: 50%;\n  color: #1a1a1a;\n  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);\n}\n.ya-image-edit-icon svg {\n  width: 24px;\n  height: 24px;\n}\n.ya-image-edit-label {\n  color: white;\n  font-size: 14px;\n  font-weight: 500;\n  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);\n}\n@keyframes ya-image-success {\n  0% {\n    outline-color: var(--color-primary, #D4A574);\n  }\n  50% {\n    outline-color: #22c55e;\n    outline-width: 4px;\n  }\n  100% {\n    outline-color: var(--color-primary, #D4A574);\n    outline-width: 2px;\n  }\n}\n.ya-image-success {\n  animation: ya-image-success 0.4s ease;\n}\n.ya-image-loading::after {\n  content: "";\n  position: absolute;\n  inset: 0;\n  background:\n    linear-gradient(\n      90deg,\n      rgba(255, 255, 255, 0) 0%,\n      rgba(255, 255, 255, 0.3) 50%,\n      rgba(255, 255, 255, 0) 100%);\n  background-size: 200% 100%;\n  animation: ya-image-shimmer 1.5s infinite;\n}\n@keyframes ya-image-shimmer {\n  0% {\n    background-position: -200% 0;\n  }\n  100% {\n    background-position: 200% 0;\n  }\n}\n.ya-image-container:focus {\n  outline: 3px solid var(--color-primary, #D4A574);\n  outline-offset: 4px;\n}\n.ya-image-container:focus:not(:focus-visible) {\n  outline: none;\n}\n.ya-image-container:focus-visible {\n  outline: 3px solid var(--color-primary, #D4A574);\n  outline-offset: 4px;\n}\n.ya-image-small .ya-image-overlay {\n  display: none;\n}\n');
+
 // src/components/YaImage.tsx
 import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
 function parseImageValue(value) {
@@ -1272,6 +1530,11 @@ import StarterKit2 from "@tiptap/starter-kit";
 import { TextStyle as TextStyle2 } from "@tiptap/extension-text-style";
 import { Extension as Extension2 } from "@tiptap/core";
 import { Link as WouterLink, useLocation } from "wouter";
+
+// src/components/ya-link.css
+styleInject('.ya-link-wrapper {\n  position: relative;\n  display: inline;\n}\n.ya-link-editable {\n  cursor: pointer;\n  transition: outline 0.15s ease;\n}\n.ya-link-editable:hover {\n  outline: 2px dashed var(--color-primary, #D4A574);\n  outline-offset: 4px;\n  border-radius: 4px;\n}\nbody.builder-selector-active .ya-link-editable:hover {\n  outline: none;\n  cursor: inherit;\n}\n.ya-link-editing {\n  outline: 2px solid var(--color-primary, #D4A574);\n  outline-offset: 4px;\n  border-radius: 4px;\n  position: relative;\n}\n.ya-link-actions {\n  display: flex;\n  gap: 8px;\n  position: absolute;\n  bottom: -60px;\n  right: 0;\n  z-index: 10;\n  background: rgba(26, 26, 26, 0.95);\n  padding: 8px 10px;\n  border-radius: 8px;\n  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);\n  font-family:\n    system-ui,\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    sans-serif;\n}\n.ya-link-btn {\n  padding: 6px 14px;\n  font-size: 12px;\n  font-weight: 500;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  border: none;\n}\n.ya-link-btn-cancel {\n  background: #333333;\n  color: #ffffff;\n  border: 1px solid #555555;\n}\n.ya-link-btn-cancel:hover {\n  background: #444444;\n  color: #ffffff;\n  border-color: #666666;\n}\n.ya-link-btn-save {\n  background: #D4A574;\n  color: #1a1a1a;\n}\n.ya-link-btn-save:hover {\n  background: #c4956a;\n}\n.ya-href-popover {\n  position: absolute;\n  top: 100%;\n  left: 50%;\n  margin-top: 8px;\n  z-index: 10;\n  min-width: 280px;\n  max-width: 320px;\n  background: #1a1a1a;\n  border-radius: 12px;\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);\n  transform: translateX(-50%);\n  animation: ya-href-popover-fade-in 0.15s ease;\n  overflow: hidden;\n  font-family:\n    system-ui,\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    sans-serif;\n}\n@keyframes ya-href-popover-fade-in {\n  from {\n    opacity: 0;\n    transform: translateX(-50%) translateY(-8px);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(-50%) translateY(0);\n  }\n}\n.ya-href-popover::before {\n  content: "";\n  position: absolute;\n  top: -6px;\n  left: 50%;\n  transform: translateX(-50%);\n  border-left: 8px solid transparent;\n  border-right: 8px solid transparent;\n  border-bottom: 8px solid #1a1a1a;\n}\n.ya-href-popover-header {\n  padding: 12px 16px;\n  font-size: 13px;\n  font-weight: 600;\n  color: #ffffff;\n  border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n}\n.ya-href-popover-section {\n  padding: 12px 16px;\n}\n.ya-href-popover-label {\n  display: block;\n  font-size: 11px;\n  font-weight: 500;\n  color: rgba(255, 255, 255, 0.6);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  margin-bottom: 8px;\n}\n.ya-href-collapsible-header {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  width: 100%;\n  padding: 0;\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  transition: color 0.15s ease;\n}\n.ya-href-collapsible-header:hover {\n  color: rgba(255, 255, 255, 0.8);\n}\n.ya-href-chevron {\n  font-size: 8px;\n  color: rgba(255, 255, 255, 0.4);\n}\n.ya-href-popover-pages {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  max-height: 200px;\n  overflow-y: auto;\n}\n.ya-href-page-btn {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 4px;\n  width: 100%;\n  padding: 10px 12px;\n  background: rgba(255, 255, 255, 0.05);\n  border: 1px solid transparent;\n  border-radius: 8px;\n  color: #e0e0e0;\n  font-size: 13px;\n  font-weight: 500;\n  text-align: left;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n.ya-href-page-btn:hover {\n  background: rgba(255, 255, 255, 0.1);\n  border-color: rgba(255, 255, 255, 0.2);\n}\n.ya-href-page-btn.is-selected {\n  background: #D4A574;\n  color: #1a1a1a;\n}\n.ya-href-page-btn.is-selected .ya-href-page-path {\n  color: rgba(26, 26, 26, 0.6);\n}\n.ya-href-page-path {\n  font-size: 11px;\n  color: rgba(255, 255, 255, 0.4);\n  font-family: monospace;\n  word-break: break-all;\n}\n.ya-href-external-toggle {\n  display: block;\n  width: 100%;\n  padding: 10px 16px;\n  background: transparent;\n  border: none;\n  border-top: 1px solid rgba(255, 255, 255, 0.1);\n  color: #D4A574;\n  font-size: 12px;\n  font-weight: 500;\n  text-align: center;\n  cursor: pointer;\n  transition: background 0.15s ease;\n}\n.ya-href-external-toggle:hover {\n  background: rgba(255, 255, 255, 0.05);\n}\n.ya-href-url-input {\n  width: 100%;\n  padding: 10px 12px;\n  background: rgba(255, 255, 255, 0.05);\n  border: 1px solid rgba(255, 255, 255, 0.2);\n  border-radius: 8px;\n  color: #ffffff;\n  font-size: 13px;\n  outline: none;\n  transition: border-color 0.15s ease;\n}\n.ya-href-url-input::placeholder {\n  color: rgba(255, 255, 255, 0.4);\n}\n.ya-href-url-input:focus {\n  border-color: var(--color-primary, #D4A574);\n}\n.ya-href-popover-actions {\n  display: flex;\n  justify-content: flex-end;\n  gap: 8px;\n  padding: 12px 16px;\n  border-top: 1px solid rgba(255, 255, 255, 0.1);\n}\n.ya-link-edit-popover {\n  position: absolute;\n  top: 100%;\n  left: 50%;\n  margin-top: 8px;\n  z-index: 10;\n  background: #2a2a2a;\n  border-radius: 6px;\n  padding: 4px;\n  display: flex;\n  gap: 4px;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);\n  transform: translateX(-50%);\n  animation: ya-edit-popover-fade-in 0.1s ease;\n  font-family:\n    system-ui,\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    sans-serif;\n  white-space: nowrap;\n}\n@keyframes ya-edit-popover-fade-in {\n  from {\n    opacity: 0;\n    transform: translateX(-50%) translateY(-4px);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(-50%) translateY(0);\n  }\n}\n.ya-link-edit-popover::before {\n  content: "";\n  position: absolute;\n  top: -5px;\n  left: 50%;\n  transform: translateX(-50%);\n  border-left: 6px solid transparent;\n  border-right: 6px solid transparent;\n  border-bottom: 6px solid #2a2a2a;\n}\n.ya-link-edit-popover button {\n  background: #3a3a3a;\n  border: none;\n  color: #fff;\n  padding: 6px 12px;\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 13px;\n  font-weight: 500;\n  transition: background 0.15s ease;\n}\n.ya-link-edit-popover button:hover {\n  background: #4a4a4a;\n}\n');
+
+// src/components/YaLink.tsx
 import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
 function isInternalPath(path) {
   if (!path) return false;

package/dist/plugin.js

@@ -19,16 +19,16 @@ function yoamigoPlugin(options = {}) {
             { find: "react-dom/client", replacement: "preact/compat/client" },
             { find: "react-dom", replacement: "preact/compat" },
             { find: "react/jsx-runtime", replacement: "preact/jsx-runtime" },
-            // === @yoamigo/core -> Production barrel ===
+            // === @yoamigo.com/core -> Production barrel ===
             // Redirect the entire components import to use static versions.
             // This removes Tiptap and editing UI from the production bundle.
             {
-              find: /^@yoamigo\/core$/,
-              replacement: "@yoamigo/core/prod"
+              find: /^@yoamigo\.com\/core$/,
+              replacement: "@yoamigo.com/core/prod"
             },
             {
-              find: /^@yoamigo\/core\/lib$/,
-              replacement: "@yoamigo/core/lib/prod"
+              find: /^@yoamigo\.com\/core\/lib$/,
+              replacement: "@yoamigo.com/core/lib/prod"
             }
           ] : [],
           // === Template-specific path aliases ===

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yoamigo.com/core",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "Core components, router, and utilities for YoAmigo templates",
   "type": "module",
   "license": "SEE LICENSE IN LICENSE",
@@ -30,8 +30,7 @@
     "./lib/prod": {
       "types": "./dist/lib-prod.d.ts",
       "import": "./dist/lib-prod.js"
-    },
-    "./styles.css": "./dist/index.css"
+    }
   },
   "files": [
     "dist",

package/dist/index.css

@@ -1,715 +0,0 @@
-/* src/components/ya-text.css */
-.ya-text-editable {
-  cursor: text;
-  transition: outline 0.15s ease;
-}
-.ya-text-editable:hover {
-  outline: 2px dashed var(--color-primary, #D4A574);
-  outline-offset: 4px;
-  border-radius: 4px;
-}
-body.builder-selector-active .ya-text-editable:hover {
-  outline: none;
-  cursor: inherit;
-}
-.ya-text-editing {
-  outline: 2px solid var(--color-primary, #D4A574);
-  outline-offset: 4px;
-  border-radius: 4px;
-  position: relative;
-}
-.ya-bubble-menu {
-  display: flex;
-  gap: 4px;
-  padding: 6px 8px;
-  background: #1a1a1a;
-  border-radius: 8px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
-  animation: ya-bubble-fade-in 0.15s ease;
-  font-family:
-    system-ui,
-    -apple-system,
-    BlinkMacSystemFont,
-    "Segoe UI",
-    sans-serif;
-}
-@keyframes ya-bubble-fade-in {
-  from {
-    opacity: 0;
-    transform: translateY(4px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-.ya-bubble-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  padding: 0;
-  border: none;
-  background: transparent;
-  color: #e0e0e0;
-  border-radius: 6px;
-  cursor: pointer;
-  transition: all 0.15s ease;
-  font-size: 14px;
-}
-.ya-bubble-btn:hover {
-  background: rgba(255, 255, 255, 0.1);
-  color: #ffffff;
-}
-.ya-bubble-btn.is-active {
-  background: var(--color-primary, #D4A574);
-  color: #1a1a1a;
-}
-.ya-bubble-btn.is-active:hover {
-  background: var(--color-primary, #D4A574);
-  filter: brightness(1.1);
-}
-.ya-bubble-divider {
-  width: 1px;
-  height: 20px;
-  background: rgba(255, 255, 255, 0.2);
-  margin: 6px 4px;
-}
-.ya-bubble-select {
-  appearance: none;
-  background: transparent;
-  color: #e0e0e0;
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  border-radius: 6px;
-  padding: 6px 24px 6px 10px;
-  font-size: 12px;
-  cursor: pointer;
-  transition: all 0.15s ease;
-  min-width: 70px;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23e0e0e0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  background-position: right 6px center;
-}
-.ya-bubble-select:hover {
-  border-color: rgba(255, 255, 255, 0.4);
-  background-color: rgba(255, 255, 255, 0.05);
-}
-.ya-bubble-select:focus {
-  outline: none;
-  border-color: var(--color-primary, #D4A574);
-}
-.ya-bubble-select option {
-  background: #1a1a1a;
-  color: #e0e0e0;
-  padding: 8px;
-}
-.ProseMirror {
-  outline: none;
-}
-.ProseMirror p {
-  margin: 0;
-}
-.ProseMirror a {
-  color: var(--color-primary, #D4A574);
-  text-decoration: underline;
-}
-.ProseMirror a:hover {
-  color: var(--color-secondary, #5C4033);
-}
-.ProseMirror ::selection {
-  background: rgba(212, 165, 116, 0.3);
-}
-.ProseMirror p.is-editor-empty:first-child::before {
-  content: attr(data-placeholder);
-  float: left;
-  color: #adb5bd;
-  pointer-events: none;
-  height: 0;
-}
-.ya-text-actions {
-  display: flex;
-  gap: 8px;
-  position: absolute;
-  bottom: -48px;
-  right: 0;
-  z-index: 10;
-  background: rgba(26, 26, 26, 0.8);
-  padding: 8px 10px;
-  border-radius: 8px;
-  font-family:
-    system-ui,
-    -apple-system,
-    BlinkMacSystemFont,
-    "Segoe UI",
-    sans-serif;
-}
-.ya-text-btn {
-  padding: 6px 14px;
-  font-size: 12px;
-  font-weight: 500;
-  border-radius: 6px;
-  cursor: pointer;
-  transition: all 0.15s ease;
-  border: none;
-}
-.ya-text-btn-cancel {
-  background: #333333;
-  color: #ffffff;
-  border: 1px solid #555555;
-}
-.ya-text-btn-cancel:hover {
-  background: #444444;
-  color: #ffffff;
-  border-color: #666666;
-}
-.ya-text-btn-save {
-  background: #D4A574;
-  color: #1a1a1a;
-}
-.ya-text-btn-save:hover {
-  background: #c4956a;
-}
-.ya-link-popover {
-  position: fixed;
-  z-index: 9999;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 8px 12px;
-  background: #1a1a1a;
-  color: #e0e0e0;
-  border-radius: 8px;
-  font-size: 13px;
-  font-weight: 500;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
-  cursor: pointer;
-  white-space: nowrap;
-  transform: translateX(-50%);
-  pointer-events: auto;
-  animation: ya-link-popover-fade-in 0.1s ease;
-}
-.ya-link-popover:hover {
-  background: #2a2a2a;
-}
-@keyframes ya-link-popover-fade-in {
-  from {
-    opacity: 0;
-    transform: translateX(-50%) translateY(-4px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(-50%) translateY(0);
-  }
-}
-.ya-link-popover::before {
-  content: "";
-  position: absolute;
-  top: -6px;
-  left: 50%;
-  transform: translateX(-50%);
-  border-left: 6px solid transparent;
-  border-right: 6px solid transparent;
-  border-bottom: 6px solid #1a1a1a;
-}
-.ya-link-popover-icon {
-  width: 14px;
-  height: 14px;
-  opacity: 0.8;
-  flex-shrink: 0;
-}
-.ya-link-popover-prefix {
-  opacity: 0.7;
-}
-.ya-link-popover-name {
-  color: var(--color-primary, #D4A574);
-}
-
-/* src/components/ya-tooltip.css */
-.ya-tooltip {
-  position: fixed;
-  z-index: 9999;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 8px 12px;
-  background: #1a1a1a;
-  color: white;
-  border-radius: 6px;
-  font-size: 13px;
-  font-weight: 500;
-  font-family:
-    system-ui,
-    -apple-system,
-    BlinkMacSystemFont,
-    "Segoe UI",
-    sans-serif;
-  white-space: nowrap;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-  animation: ya-tooltip-fade-in 0.15s ease;
-  pointer-events: none;
-}
-@keyframes ya-tooltip-fade-in {
-  from {
-    opacity: 0;
-    transform: scale(0.95);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-.ya-tooltip svg {
-  width: 16px;
-  height: 16px;
-  flex-shrink: 0;
-}
-.ya-tooltip-bottom {
-  transform: translateX(-50%);
-}
-.ya-tooltip-bottom::before {
-  content: "";
-  position: absolute;
-  bottom: 100%;
-  left: 50%;
-  transform: translateX(-50%);
-  border: 6px solid transparent;
-  border-bottom-color: #1a1a1a;
-}
-.ya-tooltip-top {
-  transform: translateX(-50%);
-}
-.ya-tooltip-top::before {
-  content: "";
-  position: absolute;
-  top: 100%;
-  left: 50%;
-  transform: translateX(-50%);
-  border: 6px solid transparent;
-  border-top-color: #1a1a1a;
-}
-.ya-tooltip-right {
-  transform: translateY(-50%);
-}
-.ya-tooltip-right::before {
-  content: "";
-  position: absolute;
-  right: 100%;
-  top: 50%;
-  transform: translateY(-50%);
-  border: 6px solid transparent;
-  border-right-color: #1a1a1a;
-}
-.ya-tooltip-left {
-  transform: translateY(-50%);
-}
-.ya-tooltip-left::before {
-  content: "";
-  position: absolute;
-  left: 100%;
-  top: 50%;
-  transform: translateY(-50%);
-  border: 6px solid transparent;
-  border-left-color: #1a1a1a;
-}
-
-/* src/components/ya-image.css */
-.ya-image-container {
-  position: relative;
-  display: inline-block;
-  min-width: 45px;
-  min-height: 45px;
-  cursor: pointer;
-  transition: outline 0.15s ease;
-}
-.ya-image-container img {
-  display: block;
-}
-.ya-image-editable {
-  cursor: pointer;
-}
-.ya-image-editable:hover {
-  outline: 2px dashed var(--color-primary, #D4A574);
-  outline-offset: 4px;
-}
-.ya-image-selected {
-  outline: 3px solid var(--color-primary, #D4A574);
-  outline-offset: 4px;
-}
-.ya-image-overlay {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  background: rgba(0, 0, 0, 0.5);
-  opacity: 0;
-  transition: opacity 0.2s ease;
-  pointer-events: none;
-  border-radius: inherit;
-}
-.ya-image-editable:hover .ya-image-overlay {
-  opacity: 1;
-}
-.ya-image-selected .ya-image-overlay {
-  opacity: 0;
-}
-.ya-image-edit-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 48px;
-  height: 48px;
-  background: white;
-  border-radius: 50%;
-  color: #1a1a1a;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
-}
-.ya-image-edit-icon svg {
-  width: 24px;
-  height: 24px;
-}
-.ya-image-edit-label {
-  color: white;
-  font-size: 14px;
-  font-weight: 500;
-  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
-}
-@keyframes ya-image-success {
-  0% {
-    outline-color: var(--color-primary, #D4A574);
-  }
-  50% {
-    outline-color: #22c55e;
-    outline-width: 4px;
-  }
-  100% {
-    outline-color: var(--color-primary, #D4A574);
-    outline-width: 2px;
-  }
-}
-.ya-image-success {
-  animation: ya-image-success 0.4s ease;
-}
-.ya-image-loading::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  background:
-    linear-gradient(
-      90deg,
-      rgba(255, 255, 255, 0) 0%,
-      rgba(255, 255, 255, 0.3) 50%,
-      rgba(255, 255, 255, 0) 100%);
-  background-size: 200% 100%;
-  animation: ya-image-shimmer 1.5s infinite;
-}
-@keyframes ya-image-shimmer {
-  0% {
-    background-position: -200% 0;
-  }
-  100% {
-    background-position: 200% 0;
-  }
-}
-.ya-image-container:focus {
-  outline: 3px solid var(--color-primary, #D4A574);
-  outline-offset: 4px;
-}
-.ya-image-container:focus:not(:focus-visible) {
-  outline: none;
-}
-.ya-image-container:focus-visible {
-  outline: 3px solid var(--color-primary, #D4A574);
-  outline-offset: 4px;
-}
-.ya-image-small .ya-image-overlay {
-  display: none;
-}
-
-/* src/components/ya-link.css */
-.ya-link-wrapper {
-  position: relative;
-  display: inline;
-}
-.ya-link-editable {
-  cursor: pointer;
-  transition: outline 0.15s ease;
-}
-.ya-link-editable:hover {
-  outline: 2px dashed var(--color-primary, #D4A574);
-  outline-offset: 4px;
-  border-radius: 4px;
-}
-body.builder-selector-active .ya-link-editable:hover {
-  outline: none;
-  cursor: inherit;
-}
-.ya-link-editing {
-  outline: 2px solid var(--color-primary, #D4A574);
-  outline-offset: 4px;
-  border-radius: 4px;
-  position: relative;
-}
-.ya-link-actions {
-  display: flex;
-  gap: 8px;
-  position: absolute;
-  bottom: -60px;
-  right: 0;
-  z-index: 10;
-  background: rgba(26, 26, 26, 0.95);
-  padding: 8px 10px;
-  border-radius: 8px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
-  font-family:
-    system-ui,
-    -apple-system,
-    BlinkMacSystemFont,
-    "Segoe UI",
-    sans-serif;
-}
-.ya-link-btn {
-  padding: 6px 14px;
-  font-size: 12px;
-  font-weight: 500;
-  border-radius: 6px;
-  cursor: pointer;
-  transition: all 0.15s ease;
-  border: none;
-}
-.ya-link-btn-cancel {
-  background: #333333;
-  color: #ffffff;
-  border: 1px solid #555555;
-}
-.ya-link-btn-cancel:hover {
-  background: #444444;
-  color: #ffffff;
-  border-color: #666666;
-}
-.ya-link-btn-save {
-  background: #D4A574;
-  color: #1a1a1a;
-}
-.ya-link-btn-save:hover {
-  background: #c4956a;
-}
-.ya-href-popover {
-  position: absolute;
-  top: 100%;
-  left: 50%;
-  margin-top: 8px;
-  z-index: 10;
-  min-width: 280px;
-  max-width: 320px;
-  background: #1a1a1a;
-  border-radius: 12px;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
-  transform: translateX(-50%);
-  animation: ya-href-popover-fade-in 0.15s ease;
-  overflow: hidden;
-  font-family:
-    system-ui,
-    -apple-system,
-    BlinkMacSystemFont,
-    "Segoe UI",
-    sans-serif;
-}
-@keyframes ya-href-popover-fade-in {
-  from {
-    opacity: 0;
-    transform: translateX(-50%) translateY(-8px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(-50%) translateY(0);
-  }
-}
-.ya-href-popover::before {
-  content: "";
-  position: absolute;
-  top: -6px;
-  left: 50%;
-  transform: translateX(-50%);
-  border-left: 8px solid transparent;
-  border-right: 8px solid transparent;
-  border-bottom: 8px solid #1a1a1a;
-}
-.ya-href-popover-header {
-  padding: 12px 16px;
-  font-size: 13px;
-  font-weight: 600;
-  color: #ffffff;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-}
-.ya-href-popover-section {
-  padding: 12px 16px;
-}
-.ya-href-popover-label {
-  display: block;
-  font-size: 11px;
-  font-weight: 500;
-  color: rgba(255, 255, 255, 0.6);
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  margin-bottom: 8px;
-}
-.ya-href-collapsible-header {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  width: 100%;
-  padding: 0;
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  transition: color 0.15s ease;
-}
-.ya-href-collapsible-header:hover {
-  color: rgba(255, 255, 255, 0.8);
-}
-.ya-href-chevron {
-  font-size: 8px;
-  color: rgba(255, 255, 255, 0.4);
-}
-.ya-href-popover-pages {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  max-height: 200px;
-  overflow-y: auto;
-}
-.ya-href-page-btn {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 4px;
-  width: 100%;
-  padding: 10px 12px;
-  background: rgba(255, 255, 255, 0.05);
-  border: 1px solid transparent;
-  border-radius: 8px;
-  color: #e0e0e0;
-  font-size: 13px;
-  font-weight: 500;
-  text-align: left;
-  cursor: pointer;
-  transition: all 0.15s ease;
-}
-.ya-href-page-btn:hover {
-  background: rgba(255, 255, 255, 0.1);
-  border-color: rgba(255, 255, 255, 0.2);
-}
-.ya-href-page-btn.is-selected {
-  background: #D4A574;
-  color: #1a1a1a;
-}
-.ya-href-page-btn.is-selected .ya-href-page-path {
-  color: rgba(26, 26, 26, 0.6);
-}
-.ya-href-page-path {
-  font-size: 11px;
-  color: rgba(255, 255, 255, 0.4);
-  font-family: monospace;
-  word-break: break-all;
-}
-.ya-href-external-toggle {
-  display: block;
-  width: 100%;
-  padding: 10px 16px;
-  background: transparent;
-  border: none;
-  border-top: 1px solid rgba(255, 255, 255, 0.1);
-  color: #D4A574;
-  font-size: 12px;
-  font-weight: 500;
-  text-align: center;
-  cursor: pointer;
-  transition: background 0.15s ease;
-}
-.ya-href-external-toggle:hover {
-  background: rgba(255, 255, 255, 0.05);
-}
-.ya-href-url-input {
-  width: 100%;
-  padding: 10px 12px;
-  background: rgba(255, 255, 255, 0.05);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  border-radius: 8px;
-  color: #ffffff;
-  font-size: 13px;
-  outline: none;
-  transition: border-color 0.15s ease;
-}
-.ya-href-url-input::placeholder {
-  color: rgba(255, 255, 255, 0.4);
-}
-.ya-href-url-input:focus {
-  border-color: var(--color-primary, #D4A574);
-}
-.ya-href-popover-actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-  padding: 12px 16px;
-  border-top: 1px solid rgba(255, 255, 255, 0.1);
-}
-.ya-link-edit-popover {
-  position: absolute;
-  top: 100%;
-  left: 50%;
-  margin-top: 8px;
-  z-index: 10;
-  background: #2a2a2a;
-  border-radius: 6px;
-  padding: 4px;
-  display: flex;
-  gap: 4px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-  transform: translateX(-50%);
-  animation: ya-edit-popover-fade-in 0.1s ease;
-  font-family:
-    system-ui,
-    -apple-system,
-    BlinkMacSystemFont,
-    "Segoe UI",
-    sans-serif;
-  white-space: nowrap;
-}
-@keyframes ya-edit-popover-fade-in {
-  from {
-    opacity: 0;
-    transform: translateX(-50%) translateY(-4px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(-50%) translateY(0);
-  }
-}
-.ya-link-edit-popover::before {
-  content: "";
-  position: absolute;
-  top: -5px;
-  left: 50%;
-  transform: translateX(-50%);
-  border-left: 6px solid transparent;
-  border-right: 6px solid transparent;
-  border-bottom: 6px solid #2a2a2a;
-}
-.ya-link-edit-popover button {
-  background: #3a3a3a;
-  border: none;
-  color: #fff;
-  padding: 6px 12px;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 13px;
-  font-weight: 500;
-  transition: background 0.15s ease;
-}
-.ya-link-edit-popover button:hover {
-  background: #4a4a4a;
-}