@widgetic/editor 3.11.3 → 4.0.1

package/dist/assets/icons/ic-fixed-position/bottom-left-icon.svg

@@ -0,0 +1,4 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.49487 17L17.4949 7" stroke="#2E2E2E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16.4949 17H7.49487V8" stroke="#2E2E2E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/assets/icons/ic-fixed-position/bottom-right-background-deselected.svg

@@ -0,0 +1,3 @@
+<svg width="73" height="36" viewBox="0 0 73 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.494873 36H64.4949C68.9132 36 72.4949 32.4183 72.4949 28V0H0.494873V36Z" fill="#F3F3F3"/>
+</svg>

package/dist/assets/icons/ic-fixed-position/bottom-right-background-selected.svg

@@ -0,0 +1,3 @@
+<svg width="73" height="36" viewBox="0 0 73 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.494873 36H64.4949C68.9132 36 72.4949 32.4183 72.4949 28V0H0.494873V36Z" fill="#0171EF"/>
+</svg>

package/dist/assets/icons/ic-fixed-position/bottom-right-icon.svg

@@ -0,0 +1,4 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.4949 17L7.49487 7" stroke="#2E2E2E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.49487 17H17.4949V8" stroke="#2E2E2E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/assets/icons/ic-fixed-position/center-bottom-icon.svg

@@ -0,0 +1,5 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.4949 19V5" stroke="#2E2E2E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18.4949 13L12.4949 19" stroke="#2E2E2E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.49487 13L12.4949 19" stroke="#2E2E2E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/assets/icons/ic-fixed-position/center-center-icon.svg

@@ -0,0 +1,3 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.49487 12C5.49487 12.9193 5.67593 13.8295 6.02772 14.6788C6.3795 15.5281 6.89512 16.2997 7.54513 16.9497C8.19514 17.5998 8.96681 18.1154 9.81609 18.4672C10.6654 18.8189 11.5756 19 12.4949 19C13.4141 19 14.3244 18.8189 15.1737 18.4672C16.0229 18.1154 16.7946 17.5998 17.4446 16.9497C18.0946 16.2997 18.6102 15.5281 18.962 14.6788C19.3138 13.8295 19.4949 12.9193 19.4949 12C19.4949 11.0807 19.3138 10.1705 18.962 9.32122C18.6102 8.47194 18.0946 7.70026 17.4446 7.05025C16.7946 6.40024 16.0229 5.88463 15.1737 5.53284C14.3244 5.18106 13.4141 5 12.4949 5C11.5756 5 10.6654 5.18106 9.81609 5.53284C8.96681 5.88463 8.19514 6.40024 7.54513 7.05025C6.89512 7.70026 6.3795 8.47194 6.02772 9.32122C5.67593 10.1705 5.49487 11.0807 5.49487 12Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/assets/icons/ic-fixed-position/center-left-icon.svg

@@ -0,0 +1,5 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.49487 12H19.4949" stroke="#2E2E2E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.4949 18L5.49487 12" stroke="#2E2E2E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.4949 6L5.49487 12" stroke="#2E2E2E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/assets/icons/ic-fixed-position/center-right-icon.svg

@@ -0,0 +1,5 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.4949 12H5.49487" stroke="#2E2E2E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.4949 6L19.4949 12" stroke="#2E2E2E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.4949 18L19.4949 12" stroke="#2E2E2E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/assets/icons/ic-fixed-position/center-top-icon.svg

@@ -0,0 +1,5 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.4949 5V19" stroke="#2E2E2E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18.4949 11L12.4949 5" stroke="#2E2E2E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.49487 11L12.4949 5" stroke="#2E2E2E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/assets/icons/ic-fixed-position/top-left-background-deselected.svg

@@ -0,0 +1,3 @@
+<svg width="73" height="36" viewBox="0 0 73 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M72.4949 0H8.49487C4.07659 0 0.494873 3.58172 0.494873 8V36H72.4949V0Z" fill="#F3F3F3"/>
+</svg>

package/dist/assets/icons/ic-fixed-position/top-left-background-selected.svg

@@ -0,0 +1,3 @@
+<svg width="73" height="36" viewBox="0 0 73 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M72.4949 0H8.49487C4.07659 0 0.494873 3.58172 0.494873 8V36H72.4949V0Z" fill="#0171EF"/>
+</svg>

package/dist/assets/icons/ic-fixed-position/top-left-icon.svg

@@ -0,0 +1,4 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.49487 7L17.4949 17" stroke="#2E2E2E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16.4949 7H7.49487V16" stroke="#2E2E2E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/assets/icons/ic-fixed-position/top-right-background-deselected.svg

@@ -0,0 +1,3 @@
+<svg width="73" height="36" viewBox="0 0 73 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.494873 0H64.4949C68.9132 0 72.4949 3.58172 72.4949 8V36H0.494873V0Z" fill="#F3F3F3"/>
+</svg>

package/dist/assets/icons/ic-fixed-position/top-right-background-selected.svg

@@ -0,0 +1,3 @@
+<svg width="73" height="36" viewBox="0 0 73 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.494873 0H64.4949C68.9132 0 72.4949 3.58172 72.4949 8V36H0.494873V0Z" fill="#0171EF"/>
+</svg>

package/dist/assets/icons/ic-fixed-position/top-right-icon.svg

@@ -0,0 +1,4 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.4949 7L7.49487 17" stroke="#2E2E2E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.49487 7H17.4949V16" stroke="#2E2E2E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/assets/icons/trash.svg

@@ -0,0 +1 @@
+<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-trash"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 7l16 0" /><path d="M10 11l0 6" /><path d="M14 11l0 6" /><path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12" /><path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3" /></svg>

package/dist/components/MockWidget.svelte

@@ -0,0 +1,108 @@
+<script lang="ts">
+    export let width: string = "100%";
+    export let height: string = "100%";
+
+    export let widgetType = "poll";
+    
+    // Playlist data structure
+    const playlistData = {
+        title: "Summer Hits 2024",
+        tracks: [
+            { artist: "The Weeknd", title: "Blinding Lights", duration: "3:20" },
+            { artist: "Dua Lipa", title: "Levitating", duration: "3:23" },
+            { artist: "Harry Styles", title: "As It Was", duration: "2:47" },
+            { artist: "Taylor Swift", title: "Anti-Hero", duration: "3:21" },
+            { artist: "Glass Animals", title: "Heat Waves", duration: "3:59" }
+        ]
+    };
+    
+    // Poll data structure
+    const pollData = {
+        title: "Product Rating",
+        question: "How would you rate this product?",
+        options: [
+            { emoji: "😫", label: "Terrible" },
+            { emoji: "😕", label: "Poor" },
+            { emoji: "😐", label: "Okay" },
+            { emoji: "🙂", label: "Good" },
+            { emoji: "😄", label: "Excellent" }
+        ]
+    };
+
+    function handleVote(index: number) {
+        console.log("Vote cast for:", pollData.options[index].label);
+        // In a real implementation, this would call an API
+    }
+</script>
+
+{#if widgetType === 'poll'}
+    <div 
+        class="mock-widget bg-[#feebb1] rounded-[5px] p-4"
+        style="width: {width}; height: {height}; max-height: {height};"
+        data-widget-type={widgetType}
+    >
+        <!-- Poll Title -->
+        <h2 class="text-lg font-semibold text-center mb-2">
+            {pollData.title}
+        </h2>
+
+        <!-- Poll Question -->
+        <p class="text-center mb-6">
+            {pollData.question}
+        </p>
+
+        <!-- Emoji Options -->
+        <div class="flex justify-center items-center space-x-8">
+            {#each pollData.options as option, i}
+                <button 
+                    class="text-3xl hover:scale-110 transition-transform duration-150"
+                    on:click={() => handleVote(i)}
+                    title={option.label}
+                >
+                    {option.emoji}
+                </button>
+            {/each}
+        </div>
+    </div>
+{:else}
+    <div 
+        class="mock-widget bg-yellow-50 border border-[#555555] shadow-sm"
+        style="width: {width}; height: {height}; max-height: {height};"
+        data-widget-type={widgetType}
+    >
+        <div class="p-4 space-y-4">
+            <!-- Header with play controls -->
+            <div class="flex items-center justify-between border-b border-[#555555] pb-3">
+                <div class="text-lg font-semibold">{playlistData.title}</div>
+                <div class="flex space-x-2">
+                    <div class="w-8 h-8 bg-[#E7E7E7] border border-[#555555] rounded-full"></div>
+                </div>
+            </div>
+
+            <!-- Playlist tracks -->
+            <div class="space-y-3 overflow-auto">
+                {#each playlistData.tracks as track}
+                    <div class="flex items-center justify-between p-2 hover:bg-gray-50 border border-[#555555] rounded">
+                        <div class="flex items-center space-x-3">
+                            <div class="w-10 h-10 bg-[#E7E7E7] border border-[#555555] flex-shrink-0"></div>
+                            <div>
+                                <div class="font-semibold">{track.title}</div>
+                                <div class="text-sm text-[#555555]">{track.artist}</div>
+                            </div>
+                        </div>
+                        <div class="text-sm text-[#555555]">{track.duration}</div>
+                    </div>
+                {/each}
+            </div>
+        </div>
+    </div>
+{/if}
+
+<style>
+    .mock-widget {
+        user-select: none;
+        overflow: auto;
+        flex-shrink: 0;
+        flex-grow: 0;
+    }
+</style> 

package/dist/components/MockWidget.svelte.d.ts

@@ -0,0 +1,22 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const MockWidget: $$__sveltets_2_IsomorphicComponent<{
+    width?: string;
+    height?: string;
+    widgetType?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type MockWidget = InstanceType<typeof MockWidget>;
+export default MockWidget;