@papu1337/builder 0.0.4 → 1.0.1

package/dist/builder/leftbar/leftBar.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { ElementEntry } from '../../service';
+interface LeftBarProps {
+    components: ElementEntry[];
+    addComponent: (component: ElementEntry) => void;
+}
+declare const LeftBar: import("svelte").Component<LeftBarProps, {}, "">;
+type LeftBar = ReturnType<typeof LeftBar>;
+export default LeftBar;

package/dist/builder/leftbar/styles.css

@@ -0,0 +1,152 @@
+aside {
+	width: var(--sidebar-width);
+	flex-shrink: 0;
+	background-color: var(--bg-surface);
+	border-right: 1px solid var(--border);
+	box-sizing: border-box;
+	transition:
+		width var(--transition),
+		padding var(--transition);
+	display: flex;
+	flex-direction: column;
+	height: calc(100dvh - 56px);
+	overflow: hidden;
+}
+
+.sidebar-header {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	padding: 18px 16px 14px;
+	border-bottom: 1px solid var(--border);
+}
+
+.sidebar-header .logo-dot {
+	width: 8px;
+	height: 8px;
+	border-radius: 50%;
+	background: var(--accent);
+	box-shadow: 0 0 8px var(--accent);
+	flex-shrink: 0;
+}
+
+.sidebar-header h2 {
+	font-size: 0.7rem;
+	font-weight: 600;
+	letter-spacing: 0.1em;
+	text-transform: uppercase;
+	color: var(--text-secondary);
+}
+
+.elements-list {
+	padding: 12px 10px;
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	overflow-y: auto;
+	flex: 1;
+}
+
+.element-btn {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	width: 100%;
+	padding: 9px 12px;
+	background: transparent;
+	border: 1px solid transparent;
+	border-radius: var(--radius-md);
+	cursor: pointer;
+	color: var(--text-secondary);
+	font-size: 0.85rem;
+	font-weight: 500;
+	font-family: var(--font);
+	text-align: left;
+	transition:
+		background var(--transition),
+		border-color var(--transition),
+		color var(--transition);
+}
+
+.element-btn:hover {
+	background: var(--accent-subtle);
+	border-color: var(--accent);
+	color: var(--text-primary);
+}
+
+.element-btn:hover .element-add {
+	opacity: 1;
+	color: var(--accent-hover);
+}
+
+.element-icon {
+	font-size: 0.55rem;
+	color: var(--accent);
+	opacity: 0.7;
+	flex-shrink: 0;
+}
+
+.element-name {
+	flex: 1;
+	text-transform: capitalize;
+}
+
+.element-add {
+	font-size: 1rem;
+	font-weight: 300;
+	color: var(--text-muted);
+	opacity: 0;
+	transition: opacity var(--transition);
+}
+
+.element-btn {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	width: 100%;
+	padding: 9px 12px;
+	background: transparent;
+	border: 1px solid transparent;
+	border-radius: var(--radius-md);
+	cursor: pointer;
+	color: var(--text-secondary);
+	font-size: 0.85rem;
+	font-weight: 500;
+	font-family: var(--font);
+	text-align: left;
+	transition:
+		background var(--transition),
+		border-color var(--transition),
+		color var(--transition);
+}
+
+.element-btn:hover {
+	background: var(--accent-subtle);
+	border-color: var(--accent);
+	color: var(--text-primary);
+}
+
+.element-btn:hover .element-add {
+	opacity: 1;
+	color: var(--accent-hover);
+}
+
+.element-icon {
+	font-size: 0.55rem;
+	color: var(--accent);
+	opacity: 0.7;
+	flex-shrink: 0;
+}
+
+.element-name {
+	flex: 1;
+	text-transform: capitalize;
+}
+
+.element-add {
+	font-size: 1rem;
+	font-weight: 300;
+	color: var(--text-muted);
+	opacity: 0;
+	transition: opacity var(--transition);
+}

package/dist/builder/pageMeta.svelte.d.ts

@@ -0,0 +1,13 @@
+export declare const pageMeta: {
+    isActive: boolean;
+    showOnPromotionPages: boolean;
+    seoTitle: string;
+    slug: string;
+    promoTitle: string;
+    promoDescription: string;
+    promoImage: string;
+    promoTitleNoTranslate: boolean;
+    promoDescriptionNoTranslate: boolean;
+};
+export declare function setSlug(raw: string): void;
+export declare function readPromoImage(input: HTMLInputElement): void;

package/dist/builder/pageMeta.svelte.js

@@ -0,0 +1,25 @@
+export const pageMeta = $state({
+    isActive: true,
+    showOnPromotionPages: false,
+    seoTitle: '',
+    slug: '',
+    promoTitle: '',
+    promoDescription: '',
+    promoImage: '',
+    promoTitleNoTranslate: false,
+    promoDescriptionNoTranslate: false
+});
+export function setSlug(raw) {
+    pageMeta.slug = raw.toLowerCase().replace(/[^a-z0-9/-]+/g, '-');
+}
+export function readPromoImage(input) {
+    const file = input.files?.[0];
+    if (!file)
+        return;
+    const reader = new FileReader();
+    reader.onload = () => {
+        if (typeof reader.result === 'string')
+            pageMeta.promoImage = reader.result;
+    };
+    reader.readAsDataURL(file);
+}

package/dist/builder/rightbar/rightBar.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+  import type { ElementEntry } from "../../service";
+  import { settingsMode } from "../../settings";
+  import SettingsRenderer from "../../settings/components/SettingsRenderer.svelte";
+
+  import "./styles.css";
+
+  interface RightBarProps {
+    selectedComponent: ElementEntry | null;
+    GlobalSettings: ElementEntry | null;
+    deleteComponent: (id: string) => void;
+  }
+
+  let { selectedComponent, GlobalSettings, deleteComponent }: RightBarProps =
+    $props();
+  let activeTab = $state<"global" | "component">("component");
+
+  $effect(() => {
+    activeTab = selectedComponent ? "component" : "global";
+  });
+</script>
+
+<aside>
+  <div class="header">
+    <h1>Properties</h1>
+  </div>
+
+  <div class="tabs-wrapper">
+    <div class="tab-bar">
+      <button
+        class="tab-label"
+        class:active={activeTab === "global"}
+        onclick={() => (activeTab = "global")}
+      >
+        Global
+      </button>
+      <button
+        class="tab-label"
+        class:active={activeTab === "component"}
+        onclick={() => (activeTab = "component")}
+      >
+        Component
+      </button>
+      <div class="tab-indicator" class:right={activeTab === "component"}></div>
+    </div>
+
+    {#if settingsMode.device === "mobile"}
+      <div class="mobile-note">
+        Editing <strong>mobile</strong> overrides — empty fields inherit desktop.
+      </div>
+    {/if}
+
+    <div class="tab-panels">
+      {#if activeTab === "global"}
+        <div class="tab-panel" id="panel-global">
+          <div class="panel-inner">
+            {#if GlobalSettings}
+              <SettingsRenderer entries={GlobalSettings.settings.entries} />
+            {/if}
+          </div>
+        </div>
+      {:else}
+        <div class="tab-panel" id="panel-component">
+          <div class="panel-inner">
+            {#if selectedComponent}
+              <p class="component-name">{selectedComponent.name}</p>
+              <SettingsRenderer entries={selectedComponent.settings.entries} />
+            {:else}
+              <div class="empty-state">
+                <div class="empty-icon">&#9632;</div>
+                <p class="empty-msg">
+                  Select an element<br />to edit its settings
+                </p>
+              </div>
+            {/if}
+            {#if selectedComponent}
+              <button
+                onclick={() => deleteComponent(selectedComponent.id)}
+                class="delete-button">Delete</button
+              >
+            {/if}
+          </div>
+        </div>
+      {/if}
+    </div>
+  </div>
+</aside>
+
+<style>
+  .mobile-note {
+    margin: 10px 14px 0;
+    padding: 8px 10px;
+    background: var(--accent-subtle);
+    border: 1px solid var(--accent-glow);
+    border-radius: 8px;
+    font-size: 11px;
+    line-height: 1.4;
+    color: var(--accent);
+  }
+</style>

package/dist/builder/rightbar/rightBar.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { ElementEntry } from "../../service";
+import "./styles.css";
+interface RightBarProps {
+    selectedComponent: ElementEntry | null;
+    GlobalSettings: ElementEntry | null;
+    deleteComponent: (id: string) => void;
+}
+declare const RightBar: import("svelte").Component<RightBarProps, {}, "">;
+type RightBar = ReturnType<typeof RightBar>;
+export default RightBar;

package/dist/builder/rightbar/styles.css

@@ -0,0 +1,167 @@
+aside {
+  width: var(--sidebar-width);
+  flex-shrink: 0;
+  background-color: var(--bg-surface);
+  border-left: 1px solid var(--border);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  height: calc(100dvh - 56px);
+  overflow: hidden;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  padding: 18px 16px 14px;
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+
+.header h1 {
+  font-size: 0.7rem;
+  font-weight: 600;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--text-secondary);
+}
+
+.tabs-wrapper {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow: hidden;
+}
+
+.tab-bar {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  position: relative;
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+
+.tab-label {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 10px 0;
+  font-size: 0.78rem;
+  font-weight: 500;
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: color var(--transition);
+  position: relative;
+  z-index: 1;
+  user-select: none;
+  background: none;
+  border: none;
+  font-family: inherit;
+}
+
+.tab-label.active {
+  color: var(--accent-hover);
+}
+
+.tab-label:hover {
+  color: var(--text-secondary);
+}
+
+.tab-indicator {
+  position: absolute;
+  bottom: -1px;
+  left: 0;
+  width: 50%;
+  height: 2px;
+  background: var(--accent);
+  border-radius: 2px 2px 0 0;
+  transition: transform var(--transition);
+  z-index: 2;
+}
+
+.tab-indicator.right {
+  transform: translateX(100%);
+}
+
+.tab-panels {
+  flex: 1;
+  overflow: hidden;
+}
+
+.tab-panel {
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.panel-inner {
+  padding: 16px;
+}
+
+.setting-row {
+  margin-bottom: 4px;
+}
+
+.component-name {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--accent-hover);
+  text-transform: capitalize;
+  margin-bottom: 14px;
+  padding: 6px 10px;
+  background: var(--accent-subtle);
+  border-radius: var(--radius-sm);
+}
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  padding: 32px 16px;
+}
+
+.empty-icon {
+  font-size: 1.5rem;
+  color: var(--text-muted);
+  opacity: 0.4;
+}
+
+.empty-msg {
+  color: var(--text-muted);
+  font-size: 0.8rem;
+  text-align: center;
+  line-height: 1.6;
+}
+.delete-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  margin-top: 20px;
+  width: 100%;
+  padding: 9px 12px;
+  background: var(--danger-subtle);
+  color: var(--danger);
+  border: 1px solid rgba(240, 68, 68, 0.25);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  font-size: 0.82rem;
+  font-weight: 500;
+  font-family: var(--font);
+  transition:
+    background var(--transition),
+    border-color var(--transition),
+    color var(--transition);
+}
+
+.delete-btn:hover {
+  background: rgba(240, 68, 68, 0.2);
+  border-color: var(--danger);
+  color: var(--danger-hover);
+}
+
+.delete-icon {
+  font-size: 0.7rem;
+}