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

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

@@ -0,0 +1,129 @@
+import { LitElement } from "lit";
+/**
+ * A component for displaying article content with image/text toggle
+ *
+ * @element ds-article
+ */
+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 {
+        "ds-article": Article;
+    }
+}
+//# sourceMappingURL=ds-article.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-article.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-article.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/ds-article.js

@@ -0,0 +1,361 @@
+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 ds-article
+ */
+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(`[ds-article] 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("ds-article", Article);

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

@@ -0,0 +1,47 @@
+import { LitElement } from "lit";
+/**
+ * A component for displaying project/work attributes (year, category, status)
+ *
+ * @element ds-attributes
+ * @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 {
+        "ds-attributes": Attributes;
+    }
+}
+//# sourceMappingURL=ds-attributes.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-attributes.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-attributes.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/ds-attributes.js

@@ -0,0 +1,128 @@
+import { LitElement, html, css } from "lit";
+import { getText } from "../utils/language";
+/**
+ * A component for displaying project/work attributes (year, category, status)
+ *
+ * @element ds-attributes
+ * @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("ds-attributes", Attributes);