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

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

@@ -1,129 +0,0 @@
-import { LitElement } from "lit";
-/**
- * A component for displaying article content with image/text toggle
- *
- * @element article-v1
- */
-export declare class Article extends LitElement {
-    static get properties(): {
-        imgLightDesktop: {
-            type: StringConstructor;
-            reflect: boolean;
-            attribute: string;
-        };
-        imgDarkDesktop: {
-            type: StringConstructor;
-            reflect: boolean;
-            attribute: string;
-        };
-        imgLightMobile: {
-            type: StringConstructor;
-            reflect: boolean;
-            attribute: string;
-        };
-        imgDarkMobile: {
-            type: StringConstructor;
-            reflect: boolean;
-            attribute: string;
-        };
-        src: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
-        alt: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
-        imageToggle: {
-            type: BooleanConstructor;
-            reflect: boolean;
-            attribute: string;
-        };
-        imageOnlyWidth: {
-            type: NumberConstructor;
-            reflect: boolean;
-            attribute: string;
-        };
-        priority: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        externalToggle: {
-            type: BooleanConstructor;
-            reflect: boolean;
-            attribute: string;
-        };
-        mobileKey: {
-            type: StringConstructor;
-            reflect: boolean;
-            attribute: string;
-        };
-        desktopKey: {
-            type: StringConstructor;
-            reflect: boolean;
-            attribute: string;
-        };
-        textKey: {
-            type: StringConstructor;
-            reflect: boolean;
-            attribute: string;
-        };
-        defaultValue: {
-            type: StringConstructor;
-            reflect: boolean;
-            attribute: string;
-        };
-        _text: {
-            type: StringConstructor;
-            state: boolean;
-        };
-        _currentImage: {
-            type: StringConstructor;
-            state: boolean;
-        };
-        _imageVisible: {
-            type: BooleanConstructor;
-            state: boolean;
-        };
-        _shouldAnimate: {
-            type: BooleanConstructor;
-            state: boolean;
-        };
-    };
-    imgLightDesktop: string;
-    imgDarkDesktop: string;
-    imgLightMobile: string;
-    imgDarkMobile: string;
-    src: string;
-    alt: string;
-    imageToggle: boolean;
-    imageOnlyWidth: number;
-    priority: boolean;
-    externalToggle: boolean;
-    mobileKey: string;
-    desktopKey: string;
-    textKey: string;
-    defaultValue: string;
-    _text: string;
-    _currentImage: string;
-    _imageVisible: boolean;
-    _shouldAnimate: boolean;
-    private _mql;
-    private boundHandlers;
-    constructor();
-    static styles: import("lit").CSSResult;
-    updated(changed: Map<string, unknown>): void;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    private _loadText;
-    private _resolveImage;
-    private _toggleImage;
-    private _handleImageLoad;
-    render(): import("lit-html").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        "article-v1": Article;
-    }
-}
-//# sourceMappingURL=article-v1.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"article-v1.d.ts","sourceRoot":"","sources":["../../DS1/2-core/article-v1.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C;;;;GAIG;AACH,qBAAa,OAAQ,SAAQ,UAAU;IACrC,MAAM,KAAK,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MA6CpB;IAEO,eAAe,EAAE,MAAM,CAAC;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,cAAc,EAAE,MAAM,CAAC;IACvB,aAAa,EAAE,MAAM,CAAC;IACtB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,WAAW,EAAE,OAAO,CAAC;IACrB,cAAc,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,OAAO,CAAC;IAClB,cAAc,EAAE,OAAO,CAAC;IACxB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,MAAM,CAAC;IACtB,aAAa,EAAE,OAAO,CAAC;IACvB,cAAc,EAAE,OAAO,CAAC;IAEhC,OAAO,CAAC,IAAI,CAAwB;IACpC,OAAO,CAAC,aAAa,CAKnB;;IAiDF,MAAM,CAAC,MAAM,0BAmEX;IAEF,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAkCrC,iBAAiB;IAuDjB,oBAAoB;IA+BpB,OAAO,CAAC,SAAS;IAsCjB,OAAO,CAAC,aAAa;IAwCrB,OAAO,CAAC,YAAY,CAIlB;IAEF,OAAO,CAAC,gBAAgB,CAGtB;IAEF,MAAM;CAmCP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,OAAO,CAAC;KACvB;CACF"}

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

@@ -1,361 +0,0 @@
-import { LitElement, css, html } from "lit";
-import { getText } from "../utils/language";
-import { getViewMode } from "../utils/viewMode";
-/**
- * A component for displaying article content with image/text toggle
- *
- * @element article-v1
- */
-export class Article extends LitElement {
-    static get properties() {
-        return {
-            imgLightDesktop: {
-                type: String,
-                reflect: true,
-                attribute: "img-light-desktop",
-            },
-            imgDarkDesktop: {
-                type: String,
-                reflect: true,
-                attribute: "img-dark-desktop",
-            },
-            imgLightMobile: {
-                type: String,
-                reflect: true,
-                attribute: "img-light-mobile",
-            },
-            imgDarkMobile: {
-                type: String,
-                reflect: true,
-                attribute: "img-dark-mobile",
-            },
-            src: { type: String, reflect: true },
-            alt: { type: String, reflect: true },
-            imageToggle: { type: Boolean, reflect: true, attribute: "image-toggle" },
-            imageOnlyWidth: {
-                type: Number,
-                reflect: true,
-                attribute: "image-only-width",
-            },
-            priority: { type: Boolean, reflect: true },
-            externalToggle: {
-                type: Boolean,
-                reflect: true,
-                attribute: "external-toggle",
-            },
-            mobileKey: { type: String, reflect: true, attribute: "mobile-key" },
-            desktopKey: { type: String, reflect: true, attribute: "desktop-key" },
-            textKey: { type: String, reflect: true, attribute: "text-key" },
-            defaultValue: { type: String, reflect: true, attribute: "default-value" },
-            _text: { type: String, state: true },
-            _currentImage: { type: String, state: true },
-            _imageVisible: { type: Boolean, state: true },
-            _shouldAnimate: { type: Boolean, state: true },
-        };
-    }
-    constructor() {
-        super();
-        this._toggleImage = () => {
-            this._shouldAnimate = true;
-            this._imageVisible = !this._imageVisible;
-            this.requestUpdate();
-        };
-        this._handleImageLoad = (e) => {
-            const img = e.target;
-            img.classList.add("loaded");
-        };
-        this.imgLightDesktop = "";
-        this.imgDarkDesktop = "";
-        this.imgLightMobile = "";
-        this.imgDarkMobile = "";
-        this.src = "";
-        this.alt = "";
-        this.imageToggle = false;
-        this.imageOnlyWidth = 480;
-        this.priority = false;
-        this.externalToggle = false;
-        this.mobileKey = "";
-        this.desktopKey = "";
-        this.textKey = "";
-        this.defaultValue = "";
-        this._text = "";
-        this._currentImage = "";
-        this._imageVisible = true;
-        this._shouldAnimate = false;
-        this._mql = null;
-        this.boundHandlers = {
-            languageChanged: (() => {
-                this._loadText();
-            }),
-            themeChanged: (() => {
-                this._resolveImage();
-            }),
-            viewportChanged: (e) => {
-                this._resolveImage();
-                this._loadText();
-            },
-            viewModeChanged: ((e) => {
-                if (this.imageToggle && this.externalToggle) {
-                    const newMode = e.detail;
-                    const shouldShowImage = newMode === "image";
-                    if (this._imageVisible !== shouldShowImage) {
-                        this._shouldAnimate = true;
-                        this._imageVisible = shouldShowImage;
-                        this.requestUpdate();
-                    }
-                }
-            }),
-        };
-    }
-    updated(changed) {
-        if (changed.has("imageOnlyWidth")) {
-            const opx = Number(this.imageOnlyWidth) || 480;
-            this.style.setProperty("--image-only-width", `${opx}px`);
-        }
-        if (changed.has("imgLightDesktop") ||
-            changed.has("imgDarkDesktop") ||
-            changed.has("imgLightMobile") ||
-            changed.has("imgDarkMobile") ||
-            changed.has("src")) {
-            this._resolveImage();
-        }
-        if (changed.has("textKey") ||
-            changed.has("defaultValue") ||
-            changed.has("mobileKey") ||
-            changed.has("desktopKey")) {
-            this._loadText();
-        }
-        if (changed.has("imageToggle")) {
-            const isExternallyControlled = this.imageToggle && this.externalToggle;
-            if (!isExternallyControlled) {
-                const newImageVisible = !this.imageToggle;
-                if (this._imageVisible !== newImageVisible) {
-                    this._shouldAnimate = true;
-                    this._imageVisible = newImageVisible;
-                }
-            }
-        }
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this._loadText();
-        this._resolveImage();
-        if (this.imageToggle && this.externalToggle) {
-            const currentMode = getViewMode();
-            this._imageVisible = currentMode === "image";
-        }
-        else {
-            this._imageVisible = !this.imageToggle;
-        }
-        this.style.setProperty("--image-only-width", `${this.imageOnlyWidth}px`);
-        try {
-            this._mql = window.matchMedia("(max-width: 720px)");
-            if (this._mql && this.boundHandlers.viewportChanged) {
-                this._mql.addEventListener("change", this.boundHandlers.viewportChanged);
-            }
-        }
-        catch (err) {
-            // no-op
-        }
-        window.addEventListener("language-changed", this.boundHandlers.languageChanged);
-        window.addEventListener("theme-changed", this.boundHandlers.themeChanged);
-        if (this.imageToggle && this.externalToggle) {
-            window.addEventListener("view-mode-changed", this.boundHandlers.viewModeChanged);
-            setTimeout(() => {
-                const currentMode = getViewMode();
-                const shouldShowImage = currentMode === "image";
-                if (this._imageVisible !== shouldShowImage) {
-                    this._shouldAnimate = true;
-                    this._imageVisible = shouldShowImage;
-                    this.requestUpdate();
-                }
-            }, 100);
-        }
-        else if (this.imageToggle) {
-            window.addEventListener("article-toggle", this._toggleImage);
-        }
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        window.removeEventListener("language-changed", this.boundHandlers.languageChanged);
-        window.removeEventListener("theme-changed", this.boundHandlers.themeChanged);
-        window.removeEventListener("article-toggle", this._toggleImage);
-        window.removeEventListener("view-mode-changed", this.boundHandlers.viewModeChanged);
-        if (this._mql && this.boundHandlers.viewportChanged) {
-            try {
-                this._mql.removeEventListener("change", this.boundHandlers.viewportChanged);
-            }
-            catch (err) {
-                // no-op
-            }
-        }
-    }
-    _loadText() {
-        const isMobile = (() => {
-            try {
-                return (window.matchMedia && window.matchMedia("(max-width: 720px)").matches);
-            }
-            catch (err) {
-                return false;
-            }
-        })();
-        const selectedKey = (() => {
-            const mobile = (this.mobileKey || "").trim();
-            const desktop = (this.desktopKey || "").trim();
-            const base = (this.textKey || "").trim();
-            if (mobile || desktop) {
-                return isMobile ? mobile || base : desktop || base;
-            }
-            return base;
-        })();
-        if (!selectedKey) {
-            this._text = this.defaultValue || "";
-            return;
-        }
-        try {
-            const text = getText(selectedKey);
-            this._text = text || this.defaultValue || selectedKey;
-        }
-        catch (error) {
-            console.error(`[article-v1] Error loading text for key "${selectedKey}":`, error);
-            this._text = this.defaultValue || selectedKey;
-        }
-    }
-    _resolveImage() {
-        if (this.src && typeof this.src === "string") {
-            const direct = this.src.startsWith("@") ? this.src.slice(1) : this.src;
-            this._currentImage = direct;
-            return;
-        }
-        const theme = document.documentElement.getAttribute("data-theme") || "light";
-        const isMobile = (() => {
-            try {
-                return (window.matchMedia && window.matchMedia("(max-width: 720px)").matches);
-            }
-            catch (err) {
-                return false;
-            }
-        })();
-        let chosen = "";
-        if (isMobile) {
-            if (theme === "dark") {
-                chosen = this.imgDarkMobile || this.imgLightMobile;
-            }
-            else {
-                chosen = this.imgLightMobile || this.imgDarkMobile;
-            }
-        }
-        else {
-            if (theme === "dark") {
-                chosen = this.imgDarkDesktop || this.imgLightDesktop;
-            }
-            else {
-                chosen = this.imgLightDesktop || this.imgDarkDesktop;
-            }
-        }
-        if (typeof chosen === "string" && chosen.startsWith("@")) {
-            chosen = chosen.slice(1);
-        }
-        this._currentImage = chosen || "";
-    }
-    render() {
-        const showImage = (this.imageToggle ? this._imageVisible : true) && !!this._currentImage;
-        const animationClass = this._shouldAnimate ? "fade-in" : "";
-        if (this._shouldAnimate) {
-            this._shouldAnimate = false;
-        }
-        const buttonText = this._imageVisible
-            ? getText("hideImage")
-            : getText("viewImage");
-        return html `
-      <div class="container">
-        ${this.imageToggle && !this.externalToggle
-            ? html `<button @click="${this._toggleImage}" class="toggle-button">
-              ${buttonText}
-            </button>`
-            : ""}
-        ${showImage
-            ? html `<figure class="media ${animationClass}">
-              <img
-                src="${this._currentImage}"
-                alt="${this.alt || ""}"
-                loading="${this.priority ? "eager" : "lazy"}"
-                fetchpriority="${this.priority ? "high" : "auto"}"
-                decoding="async"
-                @load="${this._handleImageLoad}"
-              />
-            </figure>`
-            : html `<p class="copy ${animationClass}">${this._text}</p>`}
-      </div>
-    `;
-    }
-}
-Article.styles = css `
-    :host {
-      display: block;
-      font-family: var(--typeface);
-      overflow-wrap: break-word;
-      word-wrap: break-word;
-      word-break: break-word;
-      hyphens: auto;
-      color: light-dark(var(--black), var(--white));
-      line-height: calc(20px * var(--scaling-factor));
-      padding: calc(2px * var(--scaling-factor));
-    }
-
-    .container {
-      position: relative;
-      width: min(100%, var(--image-only-width));
-    }
-
-    figure.media,
-    .copy {
-      margin: 0;
-      width: 100%;
-      overflow: hidden;
-      display: block;
-      margin-bottom: calc(8px * var(--scaling-factor));
-    }
-
-    .fade-in {
-      animation: fade-in 0.25s ease;
-    }
-
-    @keyframes fade-in {
-      from {
-        opacity: 0;
-      }
-      to {
-        opacity: 1;
-      }
-    }
-
-    img {
-      display: block;
-      width: 100%;
-      height: auto;
-      opacity: 0;
-      transition: opacity 0.2s ease-in-out;
-    }
-
-    img.loaded {
-      opacity: 1;
-    }
-
-    .toggle-button {
-      background: none;
-      border: none;
-      color: inherit;
-      cursor: pointer;
-      font-family: var(--typeface);
-      font-size: calc(14px * var(--scaling-factor));
-      margin-bottom: calc(8px * var(--scaling-factor));
-      padding: 0;
-      text-decoration: underline;
-    }
-
-    .toggle-button:hover {
-      opacity: 0.7;
-    }
-  `;
-customElements.define("article-v1", Article);

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

@@ -1,47 +0,0 @@
-import { LitElement } from "lit";
-/**
- * A component for displaying project/work attributes (year, category, status)
- *
- * @element attributes-v1
- * @prop {string} year - Year key for translation
- * @prop {string} category - Category key for translation
- * @prop {string} status - Status key for translation
- * @prop {string} type - Type of attributes: "project" or "work"
- */
-export declare class Attributes extends LitElement {
-    static get properties(): {
-        year: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
-        category: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
-        status: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
-        type: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
-    };
-    year: string;
-    category: string;
-    status: string;
-    type: string;
-    private boundHandlers;
-    static styles: import("lit").CSSResult;
-    constructor();
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    _getStatusClass(status: string): string;
-    render(): import("lit-html").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        "attributes-v1": Attributes;
-    }
-}
-//# sourceMappingURL=attributes-v1.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"attributes-v1.d.ts","sourceRoot":"","sources":["../../DS1/2-core/attributes-v1.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C;;;;;;;;GAQG;AACH,qBAAa,UAAW,SAAQ,UAAU;IACxC,MAAM,KAAK,UAAU;;;;;;;;;;;;;;;;;MAOpB;IAEO,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IAErB,OAAO,CAAC,aAAa,CAAqC;IAE1D,MAAM,CAAC,MAAM,0BA2CX;;IAgBF,iBAAiB;IAQjB,oBAAoB;IAQpB,eAAe,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM;IAQvC,MAAM;CAiCP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,UAAU,CAAC;KAC7B;CACF"}

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

@@ -1,128 +0,0 @@
-import { LitElement, html, css } from "lit";
-import { getText } from "../utils/language";
-/**
- * A component for displaying project/work attributes (year, category, status)
- *
- * @element attributes-v1
- * @prop {string} year - Year key for translation
- * @prop {string} category - Category key for translation
- * @prop {string} status - Status key for translation
- * @prop {string} type - Type of attributes: "project" or "work"
- */
-export class Attributes extends LitElement {
-    static get properties() {
-        return {
-            year: { type: String, reflect: true },
-            category: { type: String, reflect: true },
-            status: { type: String, reflect: true },
-            type: { type: String, reflect: true },
-        };
-    }
-    constructor() {
-        super();
-        this.year = "";
-        this.category = "";
-        this.status = "";
-        this.type = "project";
-        this.boundHandlers = {
-            languageChanged: (() => {
-                this.requestUpdate();
-            }),
-        };
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        window.addEventListener("language-changed", this.boundHandlers.languageChanged);
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        window.removeEventListener("language-changed", this.boundHandlers.languageChanged);
-    }
-    _getStatusClass(status) {
-        if (status.includes("Done"))
-            return "done";
-        if (status.includes("Ongoing"))
-            return "ongoing";
-        if (status.includes("Pending"))
-            return "pending";
-        if (status.includes("NotStarted"))
-            return "not-started";
-        return "pending";
-    }
-    render() {
-        return html `
-      ${this.year
-            ? html `
-            <div class="attribute-row">${getText(this.year) || this.year}</div>
-          `
-            : ""}
-      ${this.category
-            ? html `
-            <div class="attribute-row">
-              ${this.type === "work"
-                ? html `<span
-                    class="status-indicator ${this._getStatusClass(this.status)}"
-                  ></span>`
-                : ""}
-              ${getText(this.category) || this.category}
-            </div>
-          `
-            : ""}
-      ${this.status && this.type === "project"
-            ? html `
-            <div class="attribute-row">
-              <span
-                class="status-indicator ${this._getStatusClass(this.status)}"
-              ></span>
-              ${getText(this.status) || this.status}
-            </div>
-          `
-            : ""}
-    `;
-    }
-}
-Attributes.styles = css `
-    :host {
-      display: flex;
-      flex-direction: row;
-      gap: calc(16px * var(--scaling-factor));
-      align-items: flex-start;
-    }
-
-    .attribute-row {
-      display: inline-flex;
-      height: calc(20px * var(--scaling-factor));
-      padding: 0px calc(2px * var(--scaling-factor));
-      align-items: flex-start;
-      gap: calc(5px * var(--scaling-factor));
-      font-family: var(--typeface);
-      font-size: calc(14px * var(--scaling-factor));
-      color: light-dark(var(--slate), var(--slate-dark));
-    }
-
-    .status-indicator {
-      width: calc(8px * var(--scaling-factor));
-      height: calc(8px * var(--scaling-factor));
-      display: inline-block;
-      transition:
-        background 0.2s,
-        border-radius 0.2s;
-    }
-
-    .status-indicator.done {
-      background-color: green;
-    }
-
-    .status-indicator.ongoing {
-      background-color: #30adec;
-    }
-
-    .status-indicator.pending {
-      background-color: #f6c71c;
-    }
-
-    .status-indicator.not-started {
-      background-color: #b1b4b9;
-    }
-  `;
-customElements.define("attributes-v1", Attributes);