@tecof/theme-editor 0.0.35 → 0.0.37

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -2,7 +2,6 @@
2
2
 
3
3
  var React__default = require('react');
4
4
  var jsxRuntime = require('react/jsx-runtime');
5
- var core = require('@puckeditor/core');
6
5
  var zustand = require('zustand');
7
6
  var immer = require('zustand/middleware/immer');
8
7
  var nanoid = require('nanoid');
@@ -337,713 +336,6 @@ function useTecof() {
337
336
  return ctx;
338
337
  }
339
338
 
340
- // node_modules/lucide-react/dist/esm/shared/src/utils/mergeClasses.js
341
- var mergeClasses = (...classes) => classes.filter((className, index2, array) => {
342
- return Boolean(className) && className.trim() !== "" && array.indexOf(className) === index2;
343
- }).join(" ").trim();
344
-
345
- // node_modules/lucide-react/dist/esm/shared/src/utils/toKebabCase.js
346
- var toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
347
-
348
- // node_modules/lucide-react/dist/esm/shared/src/utils/toCamelCase.js
349
- var toCamelCase = (string) => string.replace(
350
- /^([A-Z])|[\s-_]+(\w)/g,
351
- (match, p1, p2) => p2 ? p2.toUpperCase() : p1.toLowerCase()
352
- );
353
-
354
- // node_modules/lucide-react/dist/esm/shared/src/utils/toPascalCase.js
355
- var toPascalCase = (string) => {
356
- const camelCase = toCamelCase(string);
357
- return camelCase.charAt(0).toUpperCase() + camelCase.slice(1);
358
- };
359
-
360
- // node_modules/lucide-react/dist/esm/defaultAttributes.js
361
- var defaultAttributes = {
362
- xmlns: "http://www.w3.org/2000/svg",
363
- width: 24,
364
- height: 24,
365
- viewBox: "0 0 24 24",
366
- fill: "none",
367
- stroke: "currentColor",
368
- strokeWidth: 2,
369
- strokeLinecap: "round",
370
- strokeLinejoin: "round"
371
- };
372
-
373
- // node_modules/lucide-react/dist/esm/shared/src/utils/hasA11yProp.js
374
- var hasA11yProp = (props) => {
375
- for (const prop in props) {
376
- if (prop.startsWith("aria-") || prop === "role" || prop === "title") {
377
- return true;
378
- }
379
- }
380
- return false;
381
- };
382
- var LucideContext = React__default.createContext({});
383
- var useLucideContext = () => React__default.useContext(LucideContext);
384
-
385
- // node_modules/lucide-react/dist/esm/Icon.js
386
- var Icon = React__default.forwardRef(
387
- ({ color, size, strokeWidth, absoluteStrokeWidth, className = "", children, iconNode, ...rest }, ref) => {
388
- const {
389
- size: contextSize = 24,
390
- strokeWidth: contextStrokeWidth = 2,
391
- absoluteStrokeWidth: contextAbsoluteStrokeWidth = false,
392
- color: contextColor = "currentColor",
393
- className: contextClass = ""
394
- } = useLucideContext() ?? {};
395
- const calculatedStrokeWidth = absoluteStrokeWidth ?? contextAbsoluteStrokeWidth ? Number(strokeWidth ?? contextStrokeWidth) * 24 / Number(size ?? contextSize) : strokeWidth ?? contextStrokeWidth;
396
- return React__default.createElement(
397
- "svg",
398
- {
399
- ref,
400
- ...defaultAttributes,
401
- width: size ?? contextSize ?? defaultAttributes.width,
402
- height: size ?? contextSize ?? defaultAttributes.height,
403
- stroke: color ?? contextColor,
404
- strokeWidth: calculatedStrokeWidth,
405
- className: mergeClasses("lucide", contextClass, className),
406
- ...!children && !hasA11yProp(rest) && { "aria-hidden": "true" },
407
- ...rest
408
- },
409
- [
410
- ...iconNode.map(([tag, attrs]) => React__default.createElement(tag, attrs)),
411
- ...Array.isArray(children) ? children : [children]
412
- ]
413
- );
414
- }
415
- );
416
-
417
- // node_modules/lucide-react/dist/esm/createLucideIcon.js
418
- var createLucideIcon = (iconName, iconNode) => {
419
- const Component2 = React__default.forwardRef(
420
- ({ className, ...props }, ref) => React__default.createElement(Icon, {
421
- ref,
422
- iconNode,
423
- className: mergeClasses(
424
- `lucide-${toKebabCase(toPascalCase(iconName))}`,
425
- `lucide-${iconName}`,
426
- className
427
- ),
428
- ...props
429
- })
430
- );
431
- Component2.displayName = toPascalCase(iconName);
432
- return Component2;
433
- };
434
-
435
- // node_modules/lucide-react/dist/esm/icons/arrow-down.js
436
- var __iconNode = [
437
- ["path", { d: "M12 5v14", key: "s699le" }],
438
- ["path", { d: "m19 12-7 7-7-7", key: "1idqje" }]
439
- ];
440
- var ArrowDown = createLucideIcon("arrow-down", __iconNode);
441
-
442
- // node_modules/lucide-react/dist/esm/icons/arrow-up.js
443
- var __iconNode2 = [
444
- ["path", { d: "m5 12 7-7 7 7", key: "hav0vg" }],
445
- ["path", { d: "M12 19V5", key: "x0mq9r" }]
446
- ];
447
- var ArrowUp = createLucideIcon("arrow-up", __iconNode2);
448
-
449
- // node_modules/lucide-react/dist/esm/icons/check.js
450
- var __iconNode3 = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
451
- var Check = createLucideIcon("check", __iconNode3);
452
-
453
- // node_modules/lucide-react/dist/esm/icons/chevron-down.js
454
- var __iconNode4 = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
455
- var ChevronDown = createLucideIcon("chevron-down", __iconNode4);
456
-
457
- // node_modules/lucide-react/dist/esm/icons/chevron-right.js
458
- var __iconNode5 = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
459
- var ChevronRight = createLucideIcon("chevron-right", __iconNode5);
460
-
461
- // node_modules/lucide-react/dist/esm/icons/chevron-up.js
462
- var __iconNode6 = [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]];
463
- var ChevronUp = createLucideIcon("chevron-up", __iconNode6);
464
-
465
- // node_modules/lucide-react/dist/esm/icons/code.js
466
- var __iconNode7 = [
467
- ["path", { d: "m16 18 6-6-6-6", key: "eg8j8" }],
468
- ["path", { d: "m8 6-6 6 6 6", key: "ppft3o" }]
469
- ];
470
- var Code = createLucideIcon("code", __iconNode7);
471
-
472
- // node_modules/lucide-react/dist/esm/icons/copy.js
473
- var __iconNode8 = [
474
- ["rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2", key: "17jyea" }],
475
- ["path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2", key: "zix9uf" }]
476
- ];
477
- var Copy = createLucideIcon("copy", __iconNode8);
478
-
479
- // node_modules/lucide-react/dist/esm/icons/database.js
480
- var __iconNode9 = [
481
- ["ellipse", { cx: "12", cy: "5", rx: "9", ry: "3", key: "msslwz" }],
482
- ["path", { d: "M3 5V19A9 3 0 0 0 21 19V5", key: "1wlel7" }],
483
- ["path", { d: "M3 12A9 3 0 0 0 21 12", key: "mv7ke4" }]
484
- ];
485
- var Database = createLucideIcon("database", __iconNode9);
486
-
487
- // node_modules/lucide-react/dist/esm/icons/external-link.js
488
- var __iconNode10 = [
489
- ["path", { d: "M15 3h6v6", key: "1q9fwt" }],
490
- ["path", { d: "M10 14 21 3", key: "gplh6r" }],
491
- ["path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6", key: "a6xqqp" }]
492
- ];
493
- var ExternalLink = createLucideIcon("external-link", __iconNode10);
494
-
495
- // node_modules/lucide-react/dist/esm/icons/file-text.js
496
- var __iconNode11 = [
497
- [
498
- "path",
499
- {
500
- d: "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z",
501
- key: "1oefj6"
502
- }
503
- ],
504
- ["path", { d: "M14 2v5a1 1 0 0 0 1 1h5", key: "wfsgrz" }],
505
- ["path", { d: "M10 9H8", key: "b1mrlr" }],
506
- ["path", { d: "M16 13H8", key: "t4e002" }],
507
- ["path", { d: "M16 17H8", key: "z1uh3a" }]
508
- ];
509
- var FileText = createLucideIcon("file-text", __iconNode11);
510
-
511
- // node_modules/lucide-react/dist/esm/icons/file.js
512
- var __iconNode12 = [
513
- [
514
- "path",
515
- {
516
- d: "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z",
517
- key: "1oefj6"
518
- }
519
- ],
520
- ["path", { d: "M14 2v5a1 1 0 0 0 1 1h5", key: "wfsgrz" }]
521
- ];
522
- var File2 = createLucideIcon("file", __iconNode12);
523
-
524
- // node_modules/lucide-react/dist/esm/icons/folder-open.js
525
- var __iconNode13 = [
526
- [
527
- "path",
528
- {
529
- d: "m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2",
530
- key: "usdka0"
531
- }
532
- ]
533
- ];
534
- var FolderOpen = createLucideIcon("folder-open", __iconNode13);
535
-
536
- // node_modules/lucide-react/dist/esm/icons/globe.js
537
- var __iconNode14 = [
538
- ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
539
- ["path", { d: "M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20", key: "13o1zl" }],
540
- ["path", { d: "M2 12h20", key: "9i4pu4" }]
541
- ];
542
- var Globe = createLucideIcon("globe", __iconNode14);
543
-
544
- // node_modules/lucide-react/dist/esm/icons/grip-vertical.js
545
- var __iconNode15 = [
546
- ["circle", { cx: "9", cy: "12", r: "1", key: "1vctgf" }],
547
- ["circle", { cx: "9", cy: "5", r: "1", key: "hp0tcf" }],
548
- ["circle", { cx: "9", cy: "19", r: "1", key: "fkjjf6" }],
549
- ["circle", { cx: "15", cy: "12", r: "1", key: "1tmaij" }],
550
- ["circle", { cx: "15", cy: "5", r: "1", key: "19l28e" }],
551
- ["circle", { cx: "15", cy: "19", r: "1", key: "f4zoj3" }]
552
- ];
553
- var GripVertical = createLucideIcon("grip-vertical", __iconNode15);
554
-
555
- // node_modules/lucide-react/dist/esm/icons/image-plus.js
556
- var __iconNode16 = [
557
- ["path", { d: "M16 5h6", key: "1vod17" }],
558
- ["path", { d: "M19 2v6", key: "4bpg5p" }],
559
- ["path", { d: "M21 11.5V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7.5", key: "1ue2ih" }],
560
- ["path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21", key: "1xmnt7" }],
561
- ["circle", { cx: "9", cy: "9", r: "2", key: "af1f0g" }]
562
- ];
563
- var ImagePlus = createLucideIcon("image-plus", __iconNode16);
564
-
565
- // node_modules/lucide-react/dist/esm/icons/image.js
566
- var __iconNode17 = [
567
- ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", ry: "2", key: "1m3agn" }],
568
- ["circle", { cx: "9", cy: "9", r: "2", key: "af1f0g" }],
569
- ["path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21", key: "1xmnt7" }]
570
- ];
571
- var Image2 = createLucideIcon("image", __iconNode17);
572
-
573
- // node_modules/lucide-react/dist/esm/icons/languages.js
574
- var __iconNode18 = [
575
- ["path", { d: "m5 8 6 6", key: "1wu5hv" }],
576
- ["path", { d: "m4 14 6-6 2-3", key: "1k1g8d" }],
577
- ["path", { d: "M2 5h12", key: "or177f" }],
578
- ["path", { d: "M7 2h1", key: "1t2jsx" }],
579
- ["path", { d: "m22 22-5-10-5 10", key: "don7ne" }],
580
- ["path", { d: "M14 18h6", key: "1m8k6r" }]
581
- ];
582
- var Languages = createLucideIcon("languages", __iconNode18);
583
-
584
- // node_modules/lucide-react/dist/esm/icons/link-2.js
585
- var __iconNode19 = [
586
- ["path", { d: "M9 17H7A5 5 0 0 1 7 7h2", key: "8i5ue5" }],
587
- ["path", { d: "M15 7h2a5 5 0 1 1 0 10h-2", key: "1b9ql8" }],
588
- ["line", { x1: "8", x2: "16", y1: "12", y2: "12", key: "1jonct" }]
589
- ];
590
- var Link2 = createLucideIcon("link-2", __iconNode19);
591
-
592
- // node_modules/lucide-react/dist/esm/icons/link.js
593
- var __iconNode20 = [
594
- ["path", { d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71", key: "1cjeqo" }],
595
- ["path", { d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71", key: "19qd67" }]
596
- ];
597
- var Link = createLucideIcon("link", __iconNode20);
598
-
599
- // node_modules/lucide-react/dist/esm/icons/loader-circle.js
600
- var __iconNode21 = [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]];
601
- var LoaderCircle = createLucideIcon("loader-circle", __iconNode21);
602
-
603
- // node_modules/lucide-react/dist/esm/icons/pencil.js
604
- var __iconNode22 = [
605
- [
606
- "path",
607
- {
608
- d: "M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z",
609
- key: "1a8usu"
610
- }
611
- ],
612
- ["path", { d: "m15 5 4 4", key: "1mk7zo" }]
613
- ];
614
- var Pencil = createLucideIcon("pencil", __iconNode22);
615
-
616
- // node_modules/lucide-react/dist/esm/icons/plus.js
617
- var __iconNode23 = [
618
- ["path", { d: "M5 12h14", key: "1ays0h" }],
619
- ["path", { d: "M12 5v14", key: "s699le" }]
620
- ];
621
- var Plus = createLucideIcon("plus", __iconNode23);
622
-
623
- // node_modules/lucide-react/dist/esm/icons/refresh-ccw.js
624
- var __iconNode24 = [
625
- ["path", { d: "M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8", key: "14sxne" }],
626
- ["path", { d: "M3 3v5h5", key: "1xhq8a" }],
627
- ["path", { d: "M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16", key: "1hlbsb" }],
628
- ["path", { d: "M16 16h5v5", key: "ccwih5" }]
629
- ];
630
- var RefreshCcw = createLucideIcon("refresh-ccw", __iconNode24);
631
-
632
- // node_modules/lucide-react/dist/esm/icons/refresh-cw.js
633
- var __iconNode25 = [
634
- ["path", { d: "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8", key: "v9h5vc" }],
635
- ["path", { d: "M21 3v5h-5", key: "1q7to0" }],
636
- ["path", { d: "M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16", key: "3uifl3" }],
637
- ["path", { d: "M8 16H3v5", key: "1cv678" }]
638
- ];
639
- var RefreshCw = createLucideIcon("refresh-cw", __iconNode25);
640
-
641
- // node_modules/lucide-react/dist/esm/icons/rotate-ccw.js
642
- var __iconNode26 = [
643
- ["path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8", key: "1357e3" }],
644
- ["path", { d: "M3 3v5h5", key: "1xhq8a" }]
645
- ];
646
- var RotateCcw = createLucideIcon("rotate-ccw", __iconNode26);
647
-
648
- // node_modules/lucide-react/dist/esm/icons/search.js
649
- var __iconNode27 = [
650
- ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
651
- ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
652
- ];
653
- var Search = createLucideIcon("search", __iconNode27);
654
-
655
- // node_modules/lucide-react/dist/esm/icons/trash-2.js
656
- var __iconNode28 = [
657
- ["path", { d: "M10 11v6", key: "nco0om" }],
658
- ["path", { d: "M14 11v6", key: "outv1u" }],
659
- ["path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6", key: "miytrc" }],
660
- ["path", { d: "M3 6h18", key: "d0wm0j" }],
661
- ["path", { d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2", key: "e791ji" }]
662
- ];
663
- var Trash2 = createLucideIcon("trash-2", __iconNode28);
664
-
665
- // node_modules/lucide-react/dist/esm/icons/upload.js
666
- var __iconNode29 = [
667
- ["path", { d: "M12 3v12", key: "1x0j5s" }],
668
- ["path", { d: "m17 8-5-5-5 5", key: "7q97r8" }],
669
- ["path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4", key: "ih7n3h" }]
670
- ];
671
- var Upload = createLucideIcon("upload", __iconNode29);
672
-
673
- // node_modules/lucide-react/dist/esm/icons/x.js
674
- var __iconNode30 = [
675
- ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
676
- ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
677
- ];
678
- var X = createLucideIcon("x", __iconNode30);
679
- var EMPTY_PAGE = { content: [], root: { props: {} }, zones: {} };
680
- var DrawerSearchContext = React__default.createContext(null);
681
- var ComponentDrawerItem = ({
682
- name: name3,
683
- apiClient,
684
- children
685
- }) => {
686
- const [imgSrc, setImgSrc] = React__default.useState(null);
687
- const [loading, setLoading] = React__default.useState(false);
688
- const [error2, setError] = React__default.useState(false);
689
- const fetchedRef = React__default.useRef(false);
690
- const handleMouseEnter = React__default.useCallback(async () => {
691
- if (fetchedRef.current) return;
692
- fetchedRef.current = true;
693
- setLoading(true);
694
- try {
695
- const domain = typeof window !== "undefined" ? window.location.hostname : "";
696
- const blobUrl = await apiClient.getComponentPreview(domain, name3);
697
- if (blobUrl) {
698
- setImgSrc(blobUrl);
699
- } else {
700
- setError(true);
701
- }
702
- } catch {
703
- setError(true);
704
- } finally {
705
- setLoading(false);
706
- }
707
- }, [name3, apiClient]);
708
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tecof-drawer-item-group group", onMouseEnter: handleMouseEnter, children: [
709
- children,
710
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tecof-drawer-popover", children: [
711
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tecof-drawer-popover-header", children: [
712
- name3,
713
- " \xD6nizleme"
714
- ] }),
715
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tecof-drawer-popover-body", children: [
716
- (loading || !imgSrc && !error2) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tecof-drawer-skeleton" }),
717
- imgSrc && /* @__PURE__ */ jsxRuntime.jsx(
718
- "img",
719
- {
720
- src: imgSrc,
721
- alt: `${name3} preview`,
722
- className: "tecof-drawer-img"
723
- }
724
- ),
725
- error2 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tecof-drawer-preview-error", children: "\xD6nizleme y\xFCklenemedi" })
726
- ] })
727
- ] })
728
- ] });
729
- };
730
- var CustomDrawer = ({ children }) => {
731
- const context = React__default.useContext(DrawerSearchContext);
732
- if (!context) return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tecof-drawer-list-layout", children });
733
- const { searchQuery, setSearchQuery } = context;
734
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tecof-drawer-wrapper-layout", children: [
735
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tecof-drawer-search-wrapper", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tecof-drawer-search-box", children: [
736
- /* @__PURE__ */ jsxRuntime.jsx(Search, { size: 14, color: "#71717a" }),
737
- /* @__PURE__ */ jsxRuntime.jsx(
738
- "input",
739
- {
740
- type: "text",
741
- placeholder: "Blok ara...",
742
- value: searchQuery,
743
- onChange: (e3) => setSearchQuery(e3.target.value),
744
- className: "tecof-drawer-search-input"
745
- }
746
- ),
747
- searchQuery && /* @__PURE__ */ jsxRuntime.jsx(
748
- "button",
749
- {
750
- type: "button",
751
- onClick: () => setSearchQuery(""),
752
- className: "tecof-drawer-clear-btn",
753
- title: "Temizle",
754
- children: /* @__PURE__ */ jsxRuntime.jsx(X, { size: 14 })
755
- }
756
- )
757
- ] }) }),
758
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tecof-drawer-list-layout", children })
759
- ] });
760
- };
761
- var CustomDrawerItem = ({ children, name: name3 }) => {
762
- const context = React__default.useContext(DrawerSearchContext);
763
- const { apiClient } = useTecof();
764
- if (!context) {
765
- return /* @__PURE__ */ jsxRuntime.jsx(ComponentDrawerItem, { name: name3, apiClient, children });
766
- }
767
- const { searchQuery, config: config3 } = context;
768
- const componentConfig = config3.components?.[name3];
769
- const label = componentConfig?.label || name3;
770
- if (searchQuery.trim()) {
771
- const query = searchQuery.toLowerCase();
772
- const matchesName = name3.toLowerCase().includes(query);
773
- const matchesLabel = label.toLowerCase().includes(query);
774
- if (!matchesName && !matchesLabel) {
775
- return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
776
- }
777
- }
778
- return /* @__PURE__ */ jsxRuntime.jsx(ComponentDrawerItem, { name: name3, apiClient, children });
779
- };
780
- var AutoFieldsOnSelect = () => {
781
- const { selectedItem, dispatch } = core.usePuck();
782
- const prevSelectedRef = React__default.useRef(null);
783
- React__default.useEffect(() => {
784
- const currentId = selectedItem?.props?.id || null;
785
- if (currentId && currentId !== prevSelectedRef.current) {
786
- dispatch({
787
- type: "setUi",
788
- ui: { plugin: { current: "fields" } }
789
- });
790
- }
791
- prevSelectedRef.current = currentId;
792
- }, [selectedItem, dispatch]);
793
- return null;
794
- };
795
- var CustomActionBar = ({ children, label }) => {
796
- const { appState, dispatch, getSelectorForId, selectedItem } = core.usePuck();
797
- const canMoveUp = React__default.useMemo(() => {
798
- if (!selectedItem || !selectedItem.props?.id) return false;
799
- const selector = getSelectorForId(selectedItem.props.id);
800
- if (!selector) return false;
801
- return selector.index > 0;
802
- }, [selectedItem, getSelectorForId]);
803
- const canMoveDown = React__default.useMemo(() => {
804
- if (!selectedItem || !selectedItem.props?.id) return false;
805
- const selector = getSelectorForId(selectedItem.props.id);
806
- if (!selector) return false;
807
- const { index: index2, zone } = selector;
808
- const items = zone ? appState.data.zones?.[zone] || [] : appState.data.content || [];
809
- return index2 < items.length - 1;
810
- }, [selectedItem, getSelectorForId, appState.data]);
811
- const handleMove = React__default.useCallback((direction) => {
812
- if (!selectedItem || !selectedItem.props?.id) return;
813
- const selector = getSelectorForId(selectedItem.props.id);
814
- if (!selector) return;
815
- const { index: index2, zone } = selector;
816
- let items = zone ? [...appState.data.zones?.[zone] || []] : [...appState.data.content || []];
817
- const targetIndex = direction === "up" ? index2 - 1 : index2 + 1;
818
- if (targetIndex < 0 || targetIndex >= items.length) return;
819
- const temp = items[index2];
820
- items[index2] = items[targetIndex];
821
- items[targetIndex] = temp;
822
- if (zone) {
823
- dispatch({
824
- type: "setData",
825
- data: {
826
- ...appState.data,
827
- zones: {
828
- ...appState.data.zones,
829
- [zone]: items
830
- }
831
- }
832
- });
833
- dispatch({
834
- type: "setUi",
835
- ui: {
836
- itemSelector: {
837
- index: targetIndex,
838
- zone
839
- }
840
- }
841
- });
842
- } else {
843
- dispatch({
844
- type: "setData",
845
- data: {
846
- ...appState.data,
847
- content: items
848
- }
849
- });
850
- dispatch({
851
- type: "setUi",
852
- ui: {
853
- itemSelector: {
854
- index: targetIndex
855
- }
856
- }
857
- });
858
- }
859
- }, [selectedItem, getSelectorForId, appState.data, dispatch]);
860
- return /* @__PURE__ */ jsxRuntime.jsx(core.ActionBar, { label, children: /* @__PURE__ */ jsxRuntime.jsxs(core.ActionBar.Group, { children: [
861
- /* @__PURE__ */ jsxRuntime.jsx(core.ActionBar.Action, { onClick: () => handleMove("up"), disabled: !canMoveUp, label: "Yukar\u0131 Ta\u015F\u0131", children: /* @__PURE__ */ jsxRuntime.jsx(ArrowUp, { size: 14 }) }),
862
- /* @__PURE__ */ jsxRuntime.jsx(core.ActionBar.Action, { onClick: () => handleMove("down"), disabled: !canMoveDown, label: "A\u015Fa\u011F\u0131 Ta\u015F\u0131", children: /* @__PURE__ */ jsxRuntime.jsx(ArrowDown, { size: 14 }) }),
863
- /* @__PURE__ */ jsxRuntime.jsx(core.ActionBar.Separator, {}),
864
- children
865
- ] }) });
866
- };
867
- var TecofEditor = ({
868
- pageId,
869
- config: config3,
870
- accessToken,
871
- onSave,
872
- onChange,
873
- overrides,
874
- plugins: extraPlugins,
875
- className
876
- }) => {
877
- const { apiClient, secretKey } = useTecof();
878
- const [initialData, setInitialData] = React__default.useState(null);
879
- const [loading, setLoading] = React__default.useState(true);
880
- const [saving, setSaving] = React__default.useState(false);
881
- const [saveStatus, setSaveStatus] = React__default.useState("idle");
882
- const [searchQuery, setSearchQuery] = React__default.useState("");
883
- const draftDataRef = React__default.useRef(null);
884
- const isEmbedded = typeof window !== "undefined" && window.parent !== window;
885
- React__default.useEffect(() => {
886
- let cancelled = false;
887
- const load = async () => {
888
- setLoading(true);
889
- const res2 = await apiClient.getPage(pageId);
890
- if (cancelled) return;
891
- const data3 = res2.success && res2.data?.draftData ? res2.data.draftData : EMPTY_PAGE;
892
- setInitialData(data3);
893
- draftDataRef.current = data3;
894
- setLoading(false);
895
- };
896
- load();
897
- return () => {
898
- cancelled = true;
899
- };
900
- }, [pageId, apiClient]);
901
- const handleSaveDraft = React__default.useCallback(
902
- async (data3) => {
903
- const currentData = data3 || draftDataRef.current;
904
- if (!currentData) return;
905
- const draftData = currentData;
906
- setSaving(true);
907
- setSaveStatus("idle");
908
- const res2 = await apiClient.savePage(pageId, draftData, void 0, accessToken);
909
- if (res2.success) {
910
- setSaveStatus("success");
911
- setTimeout(() => setSaveStatus("idle"), 3e3);
912
- onSave?.(draftData);
913
- if (isEmbedded) window.parent.postMessage({ type: "puck:saved" }, "*");
914
- } else {
915
- setSaveStatus("error");
916
- if (isEmbedded) window.parent.postMessage({ type: "puck:saveError", message: res2.message }, "*");
917
- }
918
- setSaving(false);
919
- },
920
- [pageId, apiClient, isEmbedded, onSave, accessToken]
921
- );
922
- const handleChange = React__default.useCallback(
923
- (data3) => {
924
- draftDataRef.current = data3;
925
- const draftData = data3;
926
- onChange?.(draftData);
927
- if (isEmbedded) window.parent.postMessage({ type: "puck:changed" }, "*");
928
- },
929
- [onChange, isEmbedded]
930
- );
931
- const handlePuckPublish = React__default.useCallback(
932
- (data3) => {
933
- handleSaveDraft(data3);
934
- },
935
- [handleSaveDraft]
936
- );
937
- React__default.useEffect(() => {
938
- if (!isEmbedded) return;
939
- const onMessage = (e3) => {
940
- switch (e3.data?.type) {
941
- case "puck:save": {
942
- handleSaveDraft();
943
- break;
944
- }
945
- case "puck:undo":
946
- document.dispatchEvent(new KeyboardEvent("keydown", { key: "z", code: "KeyZ", ctrlKey: true, bubbles: true }));
947
- break;
948
- case "puck:redo":
949
- document.dispatchEvent(new KeyboardEvent("keydown", { key: "z", code: "KeyZ", ctrlKey: true, shiftKey: true, bubbles: true }));
950
- break;
951
- case "puck:viewport": {
952
- const frame = document.querySelector('[data-testid="puck-frame"]');
953
- if (frame) {
954
- const w = e3.data.width || "100%";
955
- frame.style.maxWidth = w;
956
- frame.style.margin = w === "100%" ? "0" : "0 auto";
957
- frame.style.transition = "max-width 0.3s ease";
958
- }
959
- break;
960
- }
961
- }
962
- };
963
- window.addEventListener("message", onMessage);
964
- return () => window.removeEventListener("message", onMessage);
965
- }, [isEmbedded, handleSaveDraft]);
966
- React__default.useEffect(() => {
967
- if (!isEmbedded) return;
968
- const handleClick = (e3) => {
969
- const target = e3.target;
970
- const puckComponent = target.closest("[data-puck-component]");
971
- if (puckComponent) {
972
- const componentType = puckComponent.getAttribute("data-puck-component");
973
- const draggableId = puckComponent.closest("[data-rfd-draggable-id]")?.getAttribute("data-rfd-draggable-id");
974
- window.parent.postMessage({
975
- type: "puck:itemSelected",
976
- item: {
977
- type: componentType,
978
- id: draggableId || null
979
- }
980
- }, "*");
981
- }
982
- };
983
- const handleDeselect = (e3) => {
984
- const target = e3.target;
985
- if (!target.closest("[data-puck-component]")) {
986
- window.parent.postMessage({ type: "puck:itemDeselected" }, "*");
987
- }
988
- };
989
- document.addEventListener("click", handleClick, true);
990
- document.addEventListener("click", handleDeselect, false);
991
- return () => {
992
- document.removeEventListener("click", handleClick, true);
993
- document.removeEventListener("click", handleDeselect, false);
994
- };
995
- }, [isEmbedded]);
996
- const searchContextValue = React__default.useMemo(() => ({
997
- searchQuery,
998
- setSearchQuery,
999
- config: config3
1000
- }), [searchQuery, config3]);
1001
- const plugins = React__default.useMemo(() => [
1002
- { ...core.blocksPlugin(), label: "Bloklar" },
1003
- { ...core.outlinePlugin(), label: "Anahat" },
1004
- { ...core.fieldsPlugin({ desktopSideBar: "right" }), label: "Alanlar" },
1005
- ...extraPlugins || []
1006
- ], [extraPlugins]);
1007
- const mergedOverrides = React__default.useMemo(() => {
1008
- return {
1009
- header: () => /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {}),
1010
- drawer: CustomDrawer,
1011
- drawerItem: CustomDrawerItem,
1012
- actionBar: ({ children, label }) => {
1013
- return /* @__PURE__ */ jsxRuntime.jsx(CustomActionBar, { label, children });
1014
- },
1015
- puck: ({ children }) => {
1016
- return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
1017
- /* @__PURE__ */ jsxRuntime.jsx(AutoFieldsOnSelect, {}),
1018
- children
1019
- ] });
1020
- },
1021
- ...overrides || {}
1022
- };
1023
- }, [overrides]);
1024
- if (loading || !initialData) {
1025
- return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `tecof-editor-loading ${className || ""}`.trim(), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tecof-editor-loading-inner", children: [
1026
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tecof-editor-spinner" }),
1027
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "tecof-editor-loading-text", children: "Loading editor..." })
1028
- ] }) });
1029
- }
1030
- return /* @__PURE__ */ jsxRuntime.jsx(DrawerSearchContext.Provider, { value: searchContextValue, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `tecof-editor-wrapper ${className || ""}`.trim(), children: [
1031
- /* @__PURE__ */ jsxRuntime.jsx(
1032
- core.Puck,
1033
- {
1034
- plugins,
1035
- config: config3,
1036
- data: initialData,
1037
- onPublish: handlePuckPublish,
1038
- onChange: handleChange,
1039
- overrides: mergedOverrides,
1040
- metadata: { editMode: true }
1041
- }
1042
- ),
1043
- saving && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tecof-editor-save-indicator", children: saveStatus === "error" ? "Save failed" : "Saving..." })
1044
- ] }) });
1045
- };
1046
-
1047
339
  // src/engine/document.ts
1048
340
  var EMPTY_DOCUMENT = {
1049
341
  root: { props: {} },
@@ -1471,66 +763,406 @@ var Frame = ({ children, title = "Canvas Frame", ...props }) => {
1471
763
  doc.body.removeEventListener("click", handleBodyClick);
1472
764
  };
1473
765
  }
1474
- }, [contentRef]);
1475
- return /* @__PURE__ */ jsxRuntime.jsx(
1476
- "iframe",
766
+ }, [contentRef]);
767
+ return /* @__PURE__ */ jsxRuntime.jsx(
768
+ "iframe",
769
+ {
770
+ title,
771
+ ref: setContentRef,
772
+ style: {
773
+ width: "100%",
774
+ height: "100%",
775
+ border: "none",
776
+ background: "#ffffff",
777
+ ...props.style
778
+ },
779
+ ...props,
780
+ children: mountNode && ReactDOM.createPortal(children, mountNode)
781
+ }
782
+ );
783
+ };
784
+ var Canvas = () => {
785
+ const content = useEditorStore((state3) => state3.document.content);
786
+ const viewport = useEditorStore((state3) => state3.viewport);
787
+ const getWidth2 = () => {
788
+ switch (viewport) {
789
+ case "tablet":
790
+ return "768px";
791
+ case "mobile":
792
+ return "375px";
793
+ case "desktop":
794
+ default:
795
+ return "100%";
796
+ }
797
+ };
798
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tecof-canvas-container", style: {
799
+ flex: 1,
800
+ display: "flex",
801
+ alignItems: "center",
802
+ justifyContent: "center",
803
+ background: "#f4f4f5",
804
+ padding: "24px",
805
+ overflow: "auto",
806
+ height: "100%",
807
+ boxSizing: "border-box"
808
+ }, children: /* @__PURE__ */ jsxRuntime.jsx(
809
+ "div",
810
+ {
811
+ className: "tecof-canvas-viewport-wrapper",
812
+ style: {
813
+ width: getWidth2(),
814
+ height: "100%",
815
+ maxWidth: "100%",
816
+ transition: "width 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
817
+ boxShadow: "0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.05)",
818
+ borderRadius: viewport === "desktop" ? "0" : "12px",
819
+ overflow: "hidden",
820
+ backgroundColor: "#ffffff"
821
+ },
822
+ children: /* @__PURE__ */ jsxRuntime.jsx(Frame, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tecof-canvas-root", style: { minHeight: "100%" }, children: content.map((item2, index2) => /* @__PURE__ */ jsxRuntime.jsx(NodeRenderer, { node: item2, index: index2 }, item2.props.id)) }) })
823
+ }
824
+ ) });
825
+ };
826
+
827
+ // node_modules/lucide-react/dist/esm/shared/src/utils/mergeClasses.js
828
+ var mergeClasses = (...classes) => classes.filter((className, index2, array) => {
829
+ return Boolean(className) && className.trim() !== "" && array.indexOf(className) === index2;
830
+ }).join(" ").trim();
831
+
832
+ // node_modules/lucide-react/dist/esm/shared/src/utils/toKebabCase.js
833
+ var toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
834
+
835
+ // node_modules/lucide-react/dist/esm/shared/src/utils/toCamelCase.js
836
+ var toCamelCase = (string) => string.replace(
837
+ /^([A-Z])|[\s-_]+(\w)/g,
838
+ (match, p1, p2) => p2 ? p2.toUpperCase() : p1.toLowerCase()
839
+ );
840
+
841
+ // node_modules/lucide-react/dist/esm/shared/src/utils/toPascalCase.js
842
+ var toPascalCase = (string) => {
843
+ const camelCase = toCamelCase(string);
844
+ return camelCase.charAt(0).toUpperCase() + camelCase.slice(1);
845
+ };
846
+
847
+ // node_modules/lucide-react/dist/esm/defaultAttributes.js
848
+ var defaultAttributes = {
849
+ xmlns: "http://www.w3.org/2000/svg",
850
+ width: 24,
851
+ height: 24,
852
+ viewBox: "0 0 24 24",
853
+ fill: "none",
854
+ stroke: "currentColor",
855
+ strokeWidth: 2,
856
+ strokeLinecap: "round",
857
+ strokeLinejoin: "round"
858
+ };
859
+
860
+ // node_modules/lucide-react/dist/esm/shared/src/utils/hasA11yProp.js
861
+ var hasA11yProp = (props) => {
862
+ for (const prop in props) {
863
+ if (prop.startsWith("aria-") || prop === "role" || prop === "title") {
864
+ return true;
865
+ }
866
+ }
867
+ return false;
868
+ };
869
+ var LucideContext = React__default.createContext({});
870
+ var useLucideContext = () => React__default.useContext(LucideContext);
871
+
872
+ // node_modules/lucide-react/dist/esm/Icon.js
873
+ var Icon = React__default.forwardRef(
874
+ ({ color, size, strokeWidth, absoluteStrokeWidth, className = "", children, iconNode, ...rest }, ref) => {
875
+ const {
876
+ size: contextSize = 24,
877
+ strokeWidth: contextStrokeWidth = 2,
878
+ absoluteStrokeWidth: contextAbsoluteStrokeWidth = false,
879
+ color: contextColor = "currentColor",
880
+ className: contextClass = ""
881
+ } = useLucideContext() ?? {};
882
+ const calculatedStrokeWidth = absoluteStrokeWidth ?? contextAbsoluteStrokeWidth ? Number(strokeWidth ?? contextStrokeWidth) * 24 / Number(size ?? contextSize) : strokeWidth ?? contextStrokeWidth;
883
+ return React__default.createElement(
884
+ "svg",
885
+ {
886
+ ref,
887
+ ...defaultAttributes,
888
+ width: size ?? contextSize ?? defaultAttributes.width,
889
+ height: size ?? contextSize ?? defaultAttributes.height,
890
+ stroke: color ?? contextColor,
891
+ strokeWidth: calculatedStrokeWidth,
892
+ className: mergeClasses("lucide", contextClass, className),
893
+ ...!children && !hasA11yProp(rest) && { "aria-hidden": "true" },
894
+ ...rest
895
+ },
896
+ [
897
+ ...iconNode.map(([tag, attrs]) => React__default.createElement(tag, attrs)),
898
+ ...Array.isArray(children) ? children : [children]
899
+ ]
900
+ );
901
+ }
902
+ );
903
+
904
+ // node_modules/lucide-react/dist/esm/createLucideIcon.js
905
+ var createLucideIcon = (iconName, iconNode) => {
906
+ const Component2 = React__default.forwardRef(
907
+ ({ className, ...props }, ref) => React__default.createElement(Icon, {
908
+ ref,
909
+ iconNode,
910
+ className: mergeClasses(
911
+ `lucide-${toKebabCase(toPascalCase(iconName))}`,
912
+ `lucide-${iconName}`,
913
+ className
914
+ ),
915
+ ...props
916
+ })
917
+ );
918
+ Component2.displayName = toPascalCase(iconName);
919
+ return Component2;
920
+ };
921
+
922
+ // node_modules/lucide-react/dist/esm/icons/arrow-down.js
923
+ var __iconNode = [
924
+ ["path", { d: "M12 5v14", key: "s699le" }],
925
+ ["path", { d: "m19 12-7 7-7-7", key: "1idqje" }]
926
+ ];
927
+ var ArrowDown = createLucideIcon("arrow-down", __iconNode);
928
+
929
+ // node_modules/lucide-react/dist/esm/icons/arrow-up.js
930
+ var __iconNode2 = [
931
+ ["path", { d: "m5 12 7-7 7 7", key: "hav0vg" }],
932
+ ["path", { d: "M12 19V5", key: "x0mq9r" }]
933
+ ];
934
+ var ArrowUp = createLucideIcon("arrow-up", __iconNode2);
935
+
936
+ // node_modules/lucide-react/dist/esm/icons/check.js
937
+ var __iconNode3 = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
938
+ var Check = createLucideIcon("check", __iconNode3);
939
+
940
+ // node_modules/lucide-react/dist/esm/icons/chevron-down.js
941
+ var __iconNode4 = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
942
+ var ChevronDown = createLucideIcon("chevron-down", __iconNode4);
943
+
944
+ // node_modules/lucide-react/dist/esm/icons/chevron-right.js
945
+ var __iconNode5 = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
946
+ var ChevronRight = createLucideIcon("chevron-right", __iconNode5);
947
+
948
+ // node_modules/lucide-react/dist/esm/icons/chevron-up.js
949
+ var __iconNode6 = [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]];
950
+ var ChevronUp = createLucideIcon("chevron-up", __iconNode6);
951
+
952
+ // node_modules/lucide-react/dist/esm/icons/code.js
953
+ var __iconNode7 = [
954
+ ["path", { d: "m16 18 6-6-6-6", key: "eg8j8" }],
955
+ ["path", { d: "m8 6-6 6 6 6", key: "ppft3o" }]
956
+ ];
957
+ var Code = createLucideIcon("code", __iconNode7);
958
+
959
+ // node_modules/lucide-react/dist/esm/icons/copy.js
960
+ var __iconNode8 = [
961
+ ["rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2", key: "17jyea" }],
962
+ ["path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2", key: "zix9uf" }]
963
+ ];
964
+ var Copy = createLucideIcon("copy", __iconNode8);
965
+
966
+ // node_modules/lucide-react/dist/esm/icons/database.js
967
+ var __iconNode9 = [
968
+ ["ellipse", { cx: "12", cy: "5", rx: "9", ry: "3", key: "msslwz" }],
969
+ ["path", { d: "M3 5V19A9 3 0 0 0 21 19V5", key: "1wlel7" }],
970
+ ["path", { d: "M3 12A9 3 0 0 0 21 12", key: "mv7ke4" }]
971
+ ];
972
+ var Database = createLucideIcon("database", __iconNode9);
973
+
974
+ // node_modules/lucide-react/dist/esm/icons/external-link.js
975
+ var __iconNode10 = [
976
+ ["path", { d: "M15 3h6v6", key: "1q9fwt" }],
977
+ ["path", { d: "M10 14 21 3", key: "gplh6r" }],
978
+ ["path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6", key: "a6xqqp" }]
979
+ ];
980
+ var ExternalLink = createLucideIcon("external-link", __iconNode10);
981
+
982
+ // node_modules/lucide-react/dist/esm/icons/file-text.js
983
+ var __iconNode11 = [
984
+ [
985
+ "path",
986
+ {
987
+ d: "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z",
988
+ key: "1oefj6"
989
+ }
990
+ ],
991
+ ["path", { d: "M14 2v5a1 1 0 0 0 1 1h5", key: "wfsgrz" }],
992
+ ["path", { d: "M10 9H8", key: "b1mrlr" }],
993
+ ["path", { d: "M16 13H8", key: "t4e002" }],
994
+ ["path", { d: "M16 17H8", key: "z1uh3a" }]
995
+ ];
996
+ var FileText = createLucideIcon("file-text", __iconNode11);
997
+
998
+ // node_modules/lucide-react/dist/esm/icons/file.js
999
+ var __iconNode12 = [
1000
+ [
1001
+ "path",
1477
1002
  {
1478
- title,
1479
- ref: setContentRef,
1480
- style: {
1481
- width: "100%",
1482
- height: "100%",
1483
- border: "none",
1484
- background: "#ffffff",
1485
- ...props.style
1486
- },
1487
- ...props,
1488
- children: mountNode && ReactDOM.createPortal(children, mountNode)
1003
+ d: "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z",
1004
+ key: "1oefj6"
1489
1005
  }
1490
- );
1491
- };
1492
- var Canvas = () => {
1493
- const content = useEditorStore((state3) => state3.document.content);
1494
- const viewport = useEditorStore((state3) => state3.viewport);
1495
- const getWidth2 = () => {
1496
- switch (viewport) {
1497
- case "tablet":
1498
- return "768px";
1499
- case "mobile":
1500
- return "375px";
1501
- case "desktop":
1502
- default:
1503
- return "100%";
1006
+ ],
1007
+ ["path", { d: "M14 2v5a1 1 0 0 0 1 1h5", key: "wfsgrz" }]
1008
+ ];
1009
+ var File2 = createLucideIcon("file", __iconNode12);
1010
+
1011
+ // node_modules/lucide-react/dist/esm/icons/folder-open.js
1012
+ var __iconNode13 = [
1013
+ [
1014
+ "path",
1015
+ {
1016
+ d: "m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2",
1017
+ key: "usdka0"
1504
1018
  }
1505
- };
1506
- return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tecof-canvas-container", style: {
1507
- flex: 1,
1508
- display: "flex",
1509
- alignItems: "center",
1510
- justifyContent: "center",
1511
- background: "#f4f4f5",
1512
- padding: "24px",
1513
- overflow: "auto",
1514
- height: "100%",
1515
- boxSizing: "border-box"
1516
- }, children: /* @__PURE__ */ jsxRuntime.jsx(
1517
- "div",
1019
+ ]
1020
+ ];
1021
+ var FolderOpen = createLucideIcon("folder-open", __iconNode13);
1022
+
1023
+ // node_modules/lucide-react/dist/esm/icons/globe.js
1024
+ var __iconNode14 = [
1025
+ ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
1026
+ ["path", { d: "M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20", key: "13o1zl" }],
1027
+ ["path", { d: "M2 12h20", key: "9i4pu4" }]
1028
+ ];
1029
+ var Globe = createLucideIcon("globe", __iconNode14);
1030
+
1031
+ // node_modules/lucide-react/dist/esm/icons/grip-vertical.js
1032
+ var __iconNode15 = [
1033
+ ["circle", { cx: "9", cy: "12", r: "1", key: "1vctgf" }],
1034
+ ["circle", { cx: "9", cy: "5", r: "1", key: "hp0tcf" }],
1035
+ ["circle", { cx: "9", cy: "19", r: "1", key: "fkjjf6" }],
1036
+ ["circle", { cx: "15", cy: "12", r: "1", key: "1tmaij" }],
1037
+ ["circle", { cx: "15", cy: "5", r: "1", key: "19l28e" }],
1038
+ ["circle", { cx: "15", cy: "19", r: "1", key: "f4zoj3" }]
1039
+ ];
1040
+ var GripVertical = createLucideIcon("grip-vertical", __iconNode15);
1041
+
1042
+ // node_modules/lucide-react/dist/esm/icons/image-plus.js
1043
+ var __iconNode16 = [
1044
+ ["path", { d: "M16 5h6", key: "1vod17" }],
1045
+ ["path", { d: "M19 2v6", key: "4bpg5p" }],
1046
+ ["path", { d: "M21 11.5V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7.5", key: "1ue2ih" }],
1047
+ ["path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21", key: "1xmnt7" }],
1048
+ ["circle", { cx: "9", cy: "9", r: "2", key: "af1f0g" }]
1049
+ ];
1050
+ var ImagePlus = createLucideIcon("image-plus", __iconNode16);
1051
+
1052
+ // node_modules/lucide-react/dist/esm/icons/image.js
1053
+ var __iconNode17 = [
1054
+ ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", ry: "2", key: "1m3agn" }],
1055
+ ["circle", { cx: "9", cy: "9", r: "2", key: "af1f0g" }],
1056
+ ["path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21", key: "1xmnt7" }]
1057
+ ];
1058
+ var Image2 = createLucideIcon("image", __iconNode17);
1059
+
1060
+ // node_modules/lucide-react/dist/esm/icons/languages.js
1061
+ var __iconNode18 = [
1062
+ ["path", { d: "m5 8 6 6", key: "1wu5hv" }],
1063
+ ["path", { d: "m4 14 6-6 2-3", key: "1k1g8d" }],
1064
+ ["path", { d: "M2 5h12", key: "or177f" }],
1065
+ ["path", { d: "M7 2h1", key: "1t2jsx" }],
1066
+ ["path", { d: "m22 22-5-10-5 10", key: "don7ne" }],
1067
+ ["path", { d: "M14 18h6", key: "1m8k6r" }]
1068
+ ];
1069
+ var Languages = createLucideIcon("languages", __iconNode18);
1070
+
1071
+ // node_modules/lucide-react/dist/esm/icons/link-2.js
1072
+ var __iconNode19 = [
1073
+ ["path", { d: "M9 17H7A5 5 0 0 1 7 7h2", key: "8i5ue5" }],
1074
+ ["path", { d: "M15 7h2a5 5 0 1 1 0 10h-2", key: "1b9ql8" }],
1075
+ ["line", { x1: "8", x2: "16", y1: "12", y2: "12", key: "1jonct" }]
1076
+ ];
1077
+ var Link2 = createLucideIcon("link-2", __iconNode19);
1078
+
1079
+ // node_modules/lucide-react/dist/esm/icons/link.js
1080
+ var __iconNode20 = [
1081
+ ["path", { d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71", key: "1cjeqo" }],
1082
+ ["path", { d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71", key: "19qd67" }]
1083
+ ];
1084
+ var Link = createLucideIcon("link", __iconNode20);
1085
+
1086
+ // node_modules/lucide-react/dist/esm/icons/loader-circle.js
1087
+ var __iconNode21 = [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]];
1088
+ var LoaderCircle = createLucideIcon("loader-circle", __iconNode21);
1089
+
1090
+ // node_modules/lucide-react/dist/esm/icons/pencil.js
1091
+ var __iconNode22 = [
1092
+ [
1093
+ "path",
1518
1094
  {
1519
- className: "tecof-canvas-viewport-wrapper",
1520
- style: {
1521
- width: getWidth2(),
1522
- height: "100%",
1523
- maxWidth: "100%",
1524
- transition: "width 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
1525
- boxShadow: "0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.05)",
1526
- borderRadius: viewport === "desktop" ? "0" : "12px",
1527
- overflow: "hidden",
1528
- backgroundColor: "#ffffff"
1529
- },
1530
- children: /* @__PURE__ */ jsxRuntime.jsx(Frame, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tecof-canvas-root", style: { minHeight: "100%" }, children: content.map((item2, index2) => /* @__PURE__ */ jsxRuntime.jsx(NodeRenderer, { node: item2, index: index2 }, item2.props.id)) }) })
1095
+ d: "M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z",
1096
+ key: "1a8usu"
1531
1097
  }
1532
- ) });
1533
- };
1098
+ ],
1099
+ ["path", { d: "m15 5 4 4", key: "1mk7zo" }]
1100
+ ];
1101
+ var Pencil = createLucideIcon("pencil", __iconNode22);
1102
+
1103
+ // node_modules/lucide-react/dist/esm/icons/plus.js
1104
+ var __iconNode23 = [
1105
+ ["path", { d: "M5 12h14", key: "1ays0h" }],
1106
+ ["path", { d: "M12 5v14", key: "s699le" }]
1107
+ ];
1108
+ var Plus = createLucideIcon("plus", __iconNode23);
1109
+
1110
+ // node_modules/lucide-react/dist/esm/icons/refresh-ccw.js
1111
+ var __iconNode24 = [
1112
+ ["path", { d: "M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8", key: "14sxne" }],
1113
+ ["path", { d: "M3 3v5h5", key: "1xhq8a" }],
1114
+ ["path", { d: "M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16", key: "1hlbsb" }],
1115
+ ["path", { d: "M16 16h5v5", key: "ccwih5" }]
1116
+ ];
1117
+ var RefreshCcw = createLucideIcon("refresh-ccw", __iconNode24);
1118
+
1119
+ // node_modules/lucide-react/dist/esm/icons/refresh-cw.js
1120
+ var __iconNode25 = [
1121
+ ["path", { d: "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8", key: "v9h5vc" }],
1122
+ ["path", { d: "M21 3v5h-5", key: "1q7to0" }],
1123
+ ["path", { d: "M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16", key: "3uifl3" }],
1124
+ ["path", { d: "M8 16H3v5", key: "1cv678" }]
1125
+ ];
1126
+ var RefreshCw = createLucideIcon("refresh-cw", __iconNode25);
1127
+
1128
+ // node_modules/lucide-react/dist/esm/icons/rotate-ccw.js
1129
+ var __iconNode26 = [
1130
+ ["path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8", key: "1357e3" }],
1131
+ ["path", { d: "M3 3v5h5", key: "1xhq8a" }]
1132
+ ];
1133
+ var RotateCcw = createLucideIcon("rotate-ccw", __iconNode26);
1134
+
1135
+ // node_modules/lucide-react/dist/esm/icons/search.js
1136
+ var __iconNode27 = [
1137
+ ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
1138
+ ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
1139
+ ];
1140
+ var Search = createLucideIcon("search", __iconNode27);
1141
+
1142
+ // node_modules/lucide-react/dist/esm/icons/trash-2.js
1143
+ var __iconNode28 = [
1144
+ ["path", { d: "M10 11v6", key: "nco0om" }],
1145
+ ["path", { d: "M14 11v6", key: "outv1u" }],
1146
+ ["path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6", key: "miytrc" }],
1147
+ ["path", { d: "M3 6h18", key: "d0wm0j" }],
1148
+ ["path", { d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2", key: "e791ji" }]
1149
+ ];
1150
+ var Trash2 = createLucideIcon("trash-2", __iconNode28);
1151
+
1152
+ // node_modules/lucide-react/dist/esm/icons/upload.js
1153
+ var __iconNode29 = [
1154
+ ["path", { d: "M12 3v12", key: "1x0j5s" }],
1155
+ ["path", { d: "m17 8-5-5-5 5", key: "7q97r8" }],
1156
+ ["path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4", key: "ih7n3h" }]
1157
+ ];
1158
+ var Upload = createLucideIcon("upload", __iconNode29);
1159
+
1160
+ // node_modules/lucide-react/dist/esm/icons/x.js
1161
+ var __iconNode30 = [
1162
+ ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
1163
+ ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
1164
+ ];
1165
+ var X = createLucideIcon("x", __iconNode30);
1534
1166
  var useOverlayCoords = (id, iframeEl, containerEl, documentState) => {
1535
1167
  const [coords, setCoords] = React__default.useState(null);
1536
1168
  React__default.useEffect(() => {
@@ -2450,16 +2082,46 @@ var TecofStudio = ({
2450
2082
  }, children: saveStatus === "error" ? "Kaydedilemedi" : "Kaydediliyor..." })
2451
2083
  ] }) });
2452
2084
  };
2085
+
2086
+ // src/components/TecofEditor.tsx
2087
+ var TecofEditor = TecofStudio;
2088
+ var RenderContext = React__default.createContext(null);
2089
+ var ParentNodeContext2 = React__default.createContext(null);
2090
+ var RenderDropZone = ({ zone, className, style }) => {
2091
+ const parentId = React__default.useContext(ParentNodeContext2);
2092
+ const zoneKey = parentId ? `${parentId}:${zone}` : zone;
2093
+ const context = React__default.useContext(RenderContext);
2094
+ if (!context) return null;
2095
+ const items = context.zones[zoneKey] || [];
2096
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className, style, children: items.map((item2, index2) => /* @__PURE__ */ jsxRuntime.jsx(RenderNode, { node: item2, index: index2 }, item2.props.id || index2)) });
2097
+ };
2098
+ var RenderNode = ({ node, index: index2 }) => {
2099
+ const context = React__default.useContext(RenderContext);
2100
+ if (!context) return null;
2101
+ const componentConfig = context.config.components[node.type];
2102
+ if (!componentConfig) return null;
2103
+ const componentProps = {
2104
+ ...node.props,
2105
+ puck: {
2106
+ renderDropZone: RenderDropZone,
2107
+ isEditing: false,
2108
+ metadata: {
2109
+ cmsData: context.cmsData || null,
2110
+ ...componentConfig.metadata || {}
2111
+ }
2112
+ },
2113
+ editMode: false
2114
+ };
2115
+ return /* @__PURE__ */ jsxRuntime.jsx(ParentNodeContext2.Provider, { value: node.props.id || null, children: componentConfig.render(componentProps) });
2116
+ };
2453
2117
  var TecofRender = ({ data: data3, config: config3, className, cmsData }) => {
2454
2118
  if (!data3) return null;
2455
- return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children: /* @__PURE__ */ jsxRuntime.jsx(
2456
- core.Render,
2457
- {
2458
- config: config3,
2459
- data: data3,
2460
- metadata: { cmsData: cmsData || null }
2461
- }
2462
- ) });
2119
+ const contextValue = {
2120
+ zones: data3.zones || {},
2121
+ config: config3,
2122
+ cmsData: cmsData || null
2123
+ };
2124
+ return /* @__PURE__ */ jsxRuntime.jsx(RenderContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className, children: data3.content.map((item2, index2) => /* @__PURE__ */ jsxRuntime.jsx(RenderNode, { node: item2, index: index2 }, item2.props.id || index2)) }) });
2463
2125
  };
2464
2126
  var IMAGE_EXTENSIONS = ["png", "jpg", "jpeg", "webp", "gif", "svg", "avif", "bmp", "tiff", "heic"];
2465
2127
  var VIDEO_EXTENSIONS = ["mp4", "webm", "ogg", "avi", "mov", "quicktime"];