ds-one 0.2.0-alpha.2 → 0.2.5-alpha.1

package/dist/2-core/cycle-v1.d.ts

@@ -1,66 +0,0 @@
-import { LitElement } from "lit";
-import "./ds-button";
-import "./icon-v1";
-export declare class Cycle extends LitElement {
-    static get properties(): {
-        type: {
-            type: StringConstructor;
-        };
-        values: {
-            type: ArrayConstructor;
-        };
-        label: {
-            type: StringConstructor;
-        };
-        currentValue: {
-            type: StringConstructor;
-            state: boolean;
-        };
-        translationsReady: {
-            type: BooleanConstructor;
-            state: boolean;
-        };
-        disabled: {
-            type: BooleanConstructor;
-            state: boolean;
-        };
-        variant: {
-            type: StringConstructor;
-        };
-    };
-    static styles: import("lit").CSSResult;
-    type: string;
-    values: string[];
-    label: string;
-    currentValue: string;
-    translationsReady: boolean;
-    disabled: boolean;
-    variant: string;
-    private boundHandlers;
-    constructor();
-    connectedCallback(): void;
-    initializeValues(): Promise<void>;
-    ensureThemeInitialized(): void;
-    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
-    setupInitialValue(): Promise<void>;
-    handleSettingsChanges(): void;
-    disconnectedCallback(): void;
-    handleButtonClick(e: Event): void;
-    getValueDisplay(value: string): string | any;
-    getColorName(colorVar: string): string;
-    getNotesStyleIcon(style: string): import("lit-html").TemplateResult<1>;
-    getLabel(): string;
-    render(): import("lit-html").TemplateResult<1>;
-    private waitForTranslations;
-    private handleTranslationsLoaded;
-    private handleLanguageChanged;
-    private handleThemeChanged;
-    private handleAccentColorChanged;
-    private handleNoteBehaviorChanged;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        "cycle-v1": Cycle;
-    }
-}
-//# sourceMappingURL=cycle-v1.d.ts.map

package/dist/2-core/cycle-v1.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"cycle-v1.d.ts","sourceRoot":"","sources":["../../DS1/2-core/cycle-v1.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAY5C,OAAO,aAAa,CAAC;AACrB,OAAO,WAAW,CAAC;AAqCnB,qBAAa,KAAM,SAAQ,UAAU;IAEnC,MAAM,KAAK,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;MAUpB;IAED,MAAM,CAAC,MAAM,0BAWX;IAIM,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,MAAM,CAAC;IACrB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAGxB,OAAO,CAAC,aAAa,CAOnB;;IAyBF,iBAAiB;IA6BX,gBAAgB;IAgFtB,sBAAsB;IAatB,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM;IASnE,iBAAiB;IAuDvB,qBAAqB;IAKrB,oBAAoB;IA0BpB,iBAAiB,CAAC,CAAC,EAAE,KAAK;IAuJ1B,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,GAAG;IA+C5C,YAAY,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM;IAyBtC,iBAAiB,CAAC,KAAK,EAAE,MAAM;IAe/B,QAAQ,IAAI,MAAM;IAgElB,MAAM;YAuCQ,mBAAmB;IAwBjC,OAAO,CAAC,wBAAwB;IAYhC,OAAO,CAAC,qBAAqB;IAI7B,OAAO,CAAC,kBAAkB;IAI1B,OAAO,CAAC,wBAAwB;IAIhC,OAAO,CAAC,yBAAyB;CAGlC;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,KAAK,CAAC;KACnB;CACF"}

package/dist/2-core/cycle-v1.js

@@ -1,586 +0,0 @@
-import { LitElement, html, css } from "lit";
-import { translate, currentLanguage, getAvailableLanguagesSync, getLanguageDisplayName, setLanguage, } from "../utils/language";
-import { currentTheme, setTheme } from "../utils/theme";
-import { saveSettings } from "../utils/settings";
-import "./ds-button";
-import "./icon-v1";
-// Accent color utilities
-const saveAccentColor = (color) => {
-    localStorage.setItem("accentColor", color);
-};
-const getAccentColor = () => {
-    return localStorage.getItem("accentColor") || "--blue"; // Default color if none set
-};
-const applyAccentColor = () => {
-    const color = getAccentColor();
-    document.documentElement.style.setProperty("--accent-color", `var(${color})`);
-};
-// Notes style medium utilities
-const saveNotesStyleMedium = (style) => {
-    localStorage.setItem("notesStyleMedium", style);
-};
-const getNotesStyleMedium = () => {
-    return localStorage.getItem("notesStyleMedium") || "note"; // Default to note
-};
-// Note behavior utilities
-const savePageStyle = (style) => {
-    localStorage.setItem("pageStyle", style);
-};
-const getPageStyle = () => {
-    return localStorage.getItem("pageStyle") || "note"; // Default to note
-};
-// App width utilities removed
-// Use a regular class with proper TypeScript type declarations and JSDoc comments
-export class Cycle extends LitElement {
-    // Define reactive properties using Lit's property system
-    static get properties() {
-        return {
-            type: { type: String },
-            values: { type: Array },
-            label: { type: String },
-            currentValue: { type: String, state: true }, // Make this a private state property
-            translationsReady: { type: Boolean, state: true }, // Track if translations are loaded
-            disabled: { type: Boolean, state: true },
-            variant: { type: String },
-        };
-    }
-    constructor() {
-        super();
-        // Initialize properties with default values
-        this.type = "";
-        this.values = [];
-        this.label = "";
-        this.currentValue = "";
-        this.translationsReady = false;
-        this.disabled = false;
-        this.variant = "";
-        // Bind event handlers to this instance for proper cleanup
-        this.boundHandlers = {
-            translationsLoaded: this.handleTranslationsLoaded.bind(this),
-            languageChanged: this.handleLanguageChanged.bind(this),
-            handleLanguageChanged: this.handleLanguageChanged.bind(this),
-            handleThemeChanged: this.handleThemeChanged.bind(this),
-            handleAccentColorChanged: this.handleAccentColorChanged.bind(this),
-            handleNoteBehaviorChanged: this.handleNoteBehaviorChanged.bind(this),
-        };
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        // Add event listeners
-        window.addEventListener("translations-loaded", this.boundHandlers.translationsLoaded);
-        window.addEventListener("language-changed", this.boundHandlers.languageChanged);
-        window.addEventListener("theme-changed", this.boundHandlers.handleThemeChanged);
-        window.addEventListener("accent-color-changed", this.boundHandlers.handleAccentColorChanged);
-        window.addEventListener("page-style-changed", this.boundHandlers.handleNoteBehaviorChanged);
-        // Initialize the component
-        this.initializeValues();
-    }
-    async initializeValues() {
-        if (this.type === "language") {
-            // Dynamically get available languages from translation data
-            const availableLanguages = getAvailableLanguagesSync();
-            this.values = availableLanguages;
-            this.currentValue = currentLanguage.value;
-            // Set label
-            this.label = this.getLabel();
-        }
-        else if (this.type === "theme") {
-            // Set up theme cycling
-            this.values = ["light", "dark"];
-            // Set initial value based on current theme
-            const currentThemeValue = currentTheme.get();
-            this.currentValue = currentThemeValue;
-            // Set label
-            this.label = this.getLabel();
-        }
-        else if (this.type === "accent-color") {
-            // Set up accent color cycling
-            this.values = [
-                "--light-green",
-                "--green",
-                "--light-blue",
-                "--blue",
-                "--pink",
-                "--red",
-                "--orange",
-                "--yellow",
-            ];
-            // Set initial value based on current accent color
-            const currentAccentColor = getAccentColor();
-            this.currentValue = currentAccentColor;
-            // Apply the accent color to ensure it's active
-            applyAccentColor();
-            // Set label
-            this.label = this.getLabel();
-        }
-        else if (this.type === "notes-style-medium") {
-            // Set up notes style medium cycling
-            this.values = ["default", "big", "gallery"];
-            // Set initial value based on current notes style medium
-            const currentNotesStyle = getNotesStyleMedium();
-            this.currentValue = currentNotesStyle;
-            // Check if this should be disabled based on note behavior
-            const currentPageStyle = getPageStyle();
-            this.disabled = currentPageStyle === "note";
-            // Set label
-            this.label = this.getLabel();
-        }
-        else if (this.type === "page-style") {
-            // Set up page style cycling
-            this.values = ["note", "page"];
-            // Set initial value based on current page style
-            const currentPageStyle = getPageStyle();
-            this.currentValue = currentPageStyle;
-            // Set label
-            this.label = this.getLabel();
-        }
-        else if (this.type === "icon-only") {
-            // Set up icon-only cycling (no label)
-            this.values = ["note", "page"];
-            // Set initial value
-            this.currentValue = this.values[0];
-            // No label for icon-only type
-            this.label = "";
-        }
-        // Request update to re-render with new values
-        this.requestUpdate();
-    }
-    ensureThemeInitialized() {
-        // Ensure theme is properly initialized
-        const savedTheme = localStorage.getItem("theme");
-        if (!savedTheme) {
-            const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
-            const defaultTheme = prefersDark ? "dark" : "light";
-            localStorage.setItem("theme", defaultTheme);
-            document.documentElement.classList.add(`${defaultTheme}-theme`);
-        }
-    }
-    attributeChangedCallback(name, oldValue, newValue) {
-        super.attributeChangedCallback(name, oldValue, newValue);
-        if (name === "type" && oldValue !== newValue) {
-            // Type changed, reinitialize values
-            this.initializeValues();
-        }
-    }
-    async setupInitialValue() {
-        if (this.type === "language") {
-            // Get current language
-            const currentLang = currentLanguage.value;
-            this.currentValue = currentLang;
-            // Update label
-            this.label = this.getLabel();
-        }
-        else if (this.type === "theme") {
-            // Get current theme
-            const currentThemeValue = currentTheme.get();
-            this.currentValue = currentThemeValue;
-            // Update label
-            this.label = this.getLabel();
-        }
-        else if (this.type === "accent-color") {
-            // Get current accent color
-            const currentAccentColor = getAccentColor();
-            this.currentValue = currentAccentColor;
-            // Apply the accent color to ensure it's active
-            applyAccentColor();
-            // Update label
-            this.label = this.getLabel();
-        }
-        else if (this.type === "notes-style-medium") {
-            // Get current notes style medium
-            const currentNotesStyle = getNotesStyleMedium();
-            this.currentValue = currentNotesStyle;
-            // Check if this should be disabled based on note behavior
-            const currentPageStyle = getPageStyle();
-            this.disabled = currentPageStyle === "note";
-            // Update label
-            this.label = this.getLabel();
-        }
-        else if (this.type === "page-style") {
-            // Get current page style
-            const currentPageStyle = getPageStyle();
-            this.currentValue = currentPageStyle;
-            // Update label
-            this.label = this.getLabel();
-        }
-        else if (this.type === "icon-only") {
-            // Get current page style for icon-only
-            const currentPageStyle = getPageStyle();
-            this.currentValue = currentPageStyle;
-            // Update label
-            this.label = "";
-        }
-        this.requestUpdate();
-    }
-    handleSettingsChanges() {
-        // Handle any settings changes that might affect this component
-        this.setupInitialValue();
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        // Remove event listeners
-        window.removeEventListener("translations-loaded", this.boundHandlers.translationsLoaded);
-        window.removeEventListener("language-changed", this.boundHandlers.languageChanged);
-        window.removeEventListener("theme-changed", this.boundHandlers.handleThemeChanged);
-        window.removeEventListener("accent-color-changed", this.boundHandlers.handleAccentColorChanged);
-        window.removeEventListener("page-style-changed", this.boundHandlers.handleNoteBehaviorChanged);
-    }
-    handleButtonClick(e) {
-        e.preventDefault();
-        e.stopPropagation();
-        // Don't handle clicks if disabled
-        if (this.disabled) {
-            return;
-        }
-        if (this.type === "language") {
-            // Cycle through available languages
-            const currentIndex = this.values.indexOf(this.currentValue);
-            const nextIndex = (currentIndex + 1) % this.values.length;
-            const newLanguage = this.values[nextIndex];
-            // Update current value
-            this.currentValue = newLanguage;
-            // Set the new language with view transition like Portfolio
-            if (document.startViewTransition) {
-                document.startViewTransition(() => {
-                    setLanguage(newLanguage);
-                });
-            }
-            else {
-                setLanguage(newLanguage);
-            }
-            // Save settings
-            saveSettings({ language: newLanguage });
-            // Dispatch language change event
-            window.dispatchEvent(new CustomEvent("language-changed", {
-                detail: { language: newLanguage },
-            }));
-        }
-        else if (this.type === "theme") {
-            // Cycle through themes
-            const currentIndex = this.values.indexOf(this.currentValue);
-            const nextIndex = (currentIndex + 1) % this.values.length;
-            const newTheme = this.values[nextIndex];
-            // Update current value
-            this.currentValue = newTheme;
-            // Set the new theme using the shared helper
-            setTheme(newTheme);
-            // Save settings
-            saveSettings({ theme: newTheme });
-            // Theme helper already emits the change event, so no manual dispatch here
-        }
-        else if (this.type === "accent-color") {
-            // Cycle through accent colors
-            const currentIndex = this.values.indexOf(this.currentValue);
-            const nextIndex = (currentIndex + 1) % this.values.length;
-            const newColor = this.values[nextIndex];
-            // Update current value
-            this.currentValue = newColor;
-            // Save the new accent color
-            saveAccentColor(newColor);
-            // Apply the new accent color
-            applyAccentColor();
-            // Save settings
-            saveSettings({ accentColor: newColor });
-            // Dispatch accent color change event
-            window.dispatchEvent(new CustomEvent("accent-color-changed", {
-                detail: { color: newColor },
-            }));
-        }
-        else if (this.type === "notes-style-medium") {
-            // Cycle through notes style medium options
-            const currentIndex = this.values.indexOf(this.currentValue);
-            const nextIndex = (currentIndex + 1) % this.values.length;
-            const newStyle = this.values[nextIndex];
-            // Update current value
-            this.currentValue = newStyle;
-            // Save the new notes style medium
-            saveNotesStyleMedium(newStyle);
-            // Save settings
-            saveSettings({ notesStyleMedium: newStyle });
-            // Dispatch notes style medium change event
-            window.dispatchEvent(new CustomEvent("notes-style-medium-changed", {
-                detail: { style: newStyle },
-            }));
-        }
-        else if (this.type === "page-style") {
-            // Cycle through note behavior options
-            const currentIndex = this.values.indexOf(this.currentValue);
-            const nextIndex = (currentIndex + 1) % this.values.length;
-            const newBehavior = this.values[nextIndex];
-            // Update current value
-            this.currentValue = newBehavior;
-            // Save the new note behavior
-            savePageStyle(newBehavior);
-            // Save settings
-            saveSettings({ pageStyle: newBehavior });
-            // Dispatch note behavior change event
-            window.dispatchEvent(new CustomEvent("page-style-changed", {
-                detail: { behavior: newBehavior },
-            }));
-        }
-        else if (this.type === "icon-only") {
-            // Cycle through icon-only options (note/page)
-            const currentIndex = this.values.indexOf(this.currentValue);
-            const nextIndex = (currentIndex + 1) % this.values.length;
-            const newIconOnlyValue = this.values[nextIndex];
-            // Update current value
-            this.currentValue = newIconOnlyValue;
-            // Save the new page style
-            savePageStyle(newIconOnlyValue);
-            // Save settings
-            saveSettings({ pageStyle: newIconOnlyValue });
-            // No label update for icon-only type
-            this.label = "";
-            // Dispatch page style change event
-            window.dispatchEvent(new CustomEvent("page-style-changed", {
-                detail: { behavior: newIconOnlyValue },
-            }));
-        }
-        // Update label
-        this.label = this.getLabel();
-        // Request update to re-render
-        this.requestUpdate();
-    }
-    getValueDisplay(value) {
-        if (this.type === "language") {
-            return getLanguageDisplayName(value, {
-                locale: currentLanguage.value,
-            });
-        }
-        else if (this.type === "theme") {
-            // Try to get translated theme name
-            if (this.translationsReady) {
-                const translatedName = translate(`themes.${value}`);
-                if (translatedName && translatedName !== `themes.${value}`) {
-                    return translatedName;
-                }
-            }
-            // Fall back to the theme value itself
-            return value;
-        }
-        else if (this.type === "accent-color") {
-            // Get color name from CSS variable
-            return this.getColorName(value);
-        }
-        else if (this.type === "notes-style-medium") {
-            // Return SVG icon for notes style medium
-            return this.getNotesStyleIcon(value);
-        }
-        else if (this.type === "page-style") {
-            // Return translated text for note behavior
-            if (this.translationsReady) {
-                const translatedText = translate(value === "note" ? "note" : "page");
-                if (translatedText &&
-                    translatedText !== (value === "note" ? "note" : "page")) {
-                    return translatedText;
-                }
-            }
-            return value;
-        }
-        else if (this.type === "icon-only") {
-            // Return SVG icon for icon-only type (note/page icons)
-            if (value === "note") {
-                return html `<icon-v1 type="note"></icon-v1>`;
-            }
-            else if (value === "page") {
-                return html `<icon-v1 type="page"></icon-v1>`;
-            }
-            return html `<span>${value}</span>`;
-        }
-        return value;
-    }
-    getColorName(colorVar) {
-        // Map CSS variables to language keys
-        const colorMap = {
-            "--red": "red",
-            "--orange": "orange",
-            "--yellow": "yellow",
-            "--light-green": "lightGreen",
-            "--green": "green",
-            "--light-blue": "lightBlue",
-            "--blue": "blue",
-            "--pink": "pink",
-        };
-        const languageKey = colorMap[colorVar];
-        if (languageKey && this.translationsReady) {
-            const translatedName = translate(languageKey);
-            if (translatedName && translatedName !== languageKey) {
-                return translatedName;
-            }
-        }
-        // Fallback to simple name conversion
-        return colorVar.replace("--", "").replace("-", " ");
-    }
-    getNotesStyleIcon(style) {
-        if (style === "page") {
-            return html `<icon-v1 type="page"></icon-v1>`;
-        }
-        else if (style === "note") {
-            return html `<icon-v1 type="note"></icon-v1>`;
-        }
-        else if (style === "default") {
-            return html `<icon-v1 type="default"></icon-v1>`;
-        }
-        else if (style === "big") {
-            return html `<icon-v1 type="big"></icon-v1>`;
-        }
-        else if (style === "gallery") {
-            return html `<icon-v1 type="gallery"></icon-v1>`;
-        }
-        return html `<span>${style}</span>`;
-    }
-    getLabel() {
-        if (this.type === "language") {
-            // Try to get translated label
-            if (this.translationsReady) {
-                const translatedLabel = translate("language");
-                if (translatedLabel && translatedLabel !== "language") {
-                    return translatedLabel;
-                }
-            }
-            // Fall back to English
-            return "Language";
-        }
-        else if (this.type === "theme") {
-            // Try to get translated label
-            if (this.translationsReady) {
-                const translatedLabel = translate("theme");
-                if (translatedLabel && translatedLabel !== "theme") {
-                    return translatedLabel;
-                }
-            }
-            // Fall back to English
-            return "Theme";
-        }
-        else if (this.type === "accent-color") {
-            // Try to get translated label
-            if (this.translationsReady) {
-                const translatedLabel = translate("accentColor");
-                if (translatedLabel && translatedLabel !== "accentColor") {
-                    return translatedLabel;
-                }
-            }
-            // Fall back to English
-            return "Accent Color";
-        }
-        else if (this.type === "notes-style-medium") {
-            // Try to get translated label
-            if (this.translationsReady) {
-                const translatedLabel = translate("notesStyle");
-                if (translatedLabel && translatedLabel !== "notesStyle") {
-                    return translatedLabel;
-                }
-            }
-            // Fall back to English
-            return "Notes Style";
-        }
-        else if (this.type === "page-style") {
-            // Try to get translated label
-            if (this.translationsReady) {
-                const translatedLabel = translate("clickingItem");
-                if (translatedLabel && translatedLabel !== "clickingItem") {
-                    return translatedLabel;
-                }
-            }
-            // Fall back to English
-            return "Clic";
-        }
-        else if (this.type === "icon-only") {
-            // No label for icon-only type
-            return "";
-        }
-        return this.label;
-    }
-    render() {
-        return html `
-      <div class="cycle-container">
-        ${this.type !== "icon-only"
-            ? html `<span class="cycle-label">${this.label}</span>`
-            : ""}
-        <div
-          style="display: flex; align-items: center; ${this.type === "icon-only"
-            ? "justify-content: center;"
-            : ""}"
-        >
-          <ds-button
-            variant=${this.variant ||
-            (this.type === "language" || this.type === "theme"
-                ? "secondary"
-                : "primary")}
-            ?disabled=${this.disabled}
-            @click=${this.handleButtonClick}
-          >
-            ${this.type === "notes-style-medium" || this.type === "icon-only"
-            ? html `<span
-                  style="display: inline-flex; align-items: center; gap: var(--025)"
-                  >${this.getValueDisplay(this.currentValue)}</span
-                >`
-            : html `<span>${this.getValueDisplay(this.currentValue)}</span>`}
-          </ds-button>
-          ${this.type === "accent-color"
-            ? html `
-                <div
-                  class="color-preview"
-                  style="background-color: var(${this.currentValue})"
-                ></div>
-              `
-            : ""}
-        </div>
-      </div>
-    `;
-    }
-    async waitForTranslations() {
-        return new Promise((resolve) => {
-            if (this.translationsReady) {
-                resolve();
-                return;
-            }
-            const handleTranslationsLoaded = () => {
-                this.translationsReady = true;
-                resolve();
-            };
-            window.addEventListener("translations-loaded", handleTranslationsLoaded, {
-                once: true,
-            });
-            // Timeout after 5 seconds
-            setTimeout(() => {
-                this.translationsReady = true;
-                resolve();
-            }, 5000);
-        });
-    }
-    handleTranslationsLoaded() {
-        this.translationsReady = true;
-        // Refresh language values if this is a language cycle
-        if (this.type === "language") {
-            const availableLanguages = getAvailableLanguagesSync();
-            this.values = availableLanguages;
-        }
-        this.setupInitialValue();
-    }
-    handleLanguageChanged() {
-        this.setupInitialValue();
-    }
-    handleThemeChanged() {
-        this.setupInitialValue();
-    }
-    handleAccentColorChanged() {
-        this.setupInitialValue();
-    }
-    handleNoteBehaviorChanged() {
-        this.setupInitialValue();
-    }
-}
-Cycle.styles = css `
-    .cycle-container {
-      display: flex;
-      justify-content: space-between;
-      gap: var(--025);
-      width: 100%;
-    }
-
-    .cycle-label {
-      color: var(--text-color-primary);
-    }
-  `;
-customElements.define("cycle-v1", Cycle);