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

package/dist/2-core/ds-icon.js

@@ -0,0 +1,297 @@
+import { LitElement, html, css } from "lit";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+export class Icon extends LitElement {
+    get type() {
+        return this._type;
+    }
+    set type(val) {
+        const oldVal = this._type;
+        this._type = val;
+        this.requestUpdate("type", oldVal);
+    }
+    constructor() {
+        super();
+        this._type = "";
+        this.size = "1em";
+        this.color = "currentColor";
+        this.background = "transparent";
+        console.log("Icon constructor", this._type);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        console.log("Icon connected", this._type);
+    }
+    renderIcon() {
+        console.log("renderIcon called with type:", this._type);
+        if (!this._type || this._type === "") {
+            console.log("No type specified, rendering default slot");
+            return html `<div class="icon-container"><slot></slot></div>`;
+        }
+        // First, try to render an SVG whose file name matches `type`
+        const svgFromSet = Icon.iconNameToSvgMap[this._type.toLowerCase()];
+        if (svgFromSet) {
+            return html `<div class="icon-container">${unsafeHTML(svgFromSet)}</div>`;
+        }
+        switch (this._type.toLowerCase()) {
+            case "close":
+                console.log("Rendering close icon");
+                return html `
+          <div class="icon-container">
+            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+              <path
+                d="M18.3 5.71a.996.996 0 00-1.41 0L12 10.59 7.11 5.7A.996.996 0 105.7 7.11L10.59 12 5.7 16.89a.996.996 0 101.41 1.41L12 13.41l4.89 4.89a.996.996 0 101.41-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"
+              />
+            </svg>
+          </div>
+        `;
+            case "page":
+                console.log("Rendering page icon");
+                return html `
+          <div class="icon-container">
+            <svg viewBox="0 0 17 17" xmlns="http://www.w3.org/2000/svg">
+              <rect
+                width="16"
+                height="16"
+                transform="translate(0.799988 0.678772)"
+                fill="var(--accent-color)"
+              />
+              <path
+                d="M13.7956 2.38385V14.9737H3.80438V2.38385H13.7956ZM4.7243 14.0538H12.8757V3.30377H4.7243V14.0538ZM8.67841 8.53619V9.45612H5.92938V8.53619H8.67841ZM10.8259 6.60455V7.52448H5.92938V6.60455H10.8259ZM10.8259 4.67194V5.59283H5.92938V4.67194H10.8259Z"
+                fill="#2A2A2A"
+              />
+            </svg>
+          </div>
+        `;
+            case "note":
+                console.log("Rendering note icon");
+                return html `
+          <div class="icon-container">
+            <svg viewBox="0 0 17 17" xmlns="http://www.w3.org/2000/svg">
+              <rect
+                width="16"
+                height="16"
+                transform="translate(0.799988 0.678772)"
+                fill="var(--accent-color, #CCFF4D)"
+              />
+              <path
+                d="M14.7653 3.99225V13.3653H2.83466V3.99225H14.7653ZM3.83466 12.3653H13.7653V4.99225H3.83466V12.3653Z"
+                fill="#2A2A2A"
+              />
+              <path
+                d="M8.8064 7.75881V8.67873H4.51343V7.75881H8.8064ZM10.7527 5.75881V6.67873H4.51343V5.75881H10.7527Z"
+                fill="#2A2A2A"
+              />
+            </svg>
+          </div>
+        `;
+            case "default":
+                console.log("Rendering default icon");
+                return html `
+          <div class="icon-container">
+            <svg
+              width="17"
+              height="16"
+              viewBox="0 0 17 16"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <rect
+                width="16"
+                height="16"
+                transform="translate(0.799988)"
+                fill="var(--accent-color, #CCFF4D)"
+              />
+              <path
+                d="M9.95899 15V6.81H7.05999V5.77H14.093V6.81H11.194V15H9.95899Z"
+                fill="#2A2A2A"
+              />
+              <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M5.89999 0V5.10001H0.799988V0H5.89999Z"
+                fill="#2A2A2A"
+              />
+            </svg>
+          </div>
+        `;
+            case "big":
+                console.log("Rendering big icon");
+                return html `
+          <div class="icon-container">
+            <svg
+              width="17"
+              height="16"
+              viewBox="0 0 17 16"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <g clip-path="url(#clip0_3141_3351)">
+                <rect
+                  width="16"
+                  height="16"
+                  transform="translate(0.799988)"
+                  fill="var(--accent-color, #CCFF4D)"
+                />
+                <path
+                  d="M13.959 12.615V4.425H11.06V3.385H16.802V4.425H15.194V12.615H13.959Z"
+                  fill="#2A2A2A"
+                />
+                <path
+                  fill-rule="evenodd"
+                  clip-rule="evenodd"
+                  d="M9.79999 3.5V12.5H0.799988V3.5H9.79999Z"
+                  fill="#2A2A2A"
+                />
+              </g>
+              <defs>
+                <clipPath id="clip0_3141_3351">
+                  <rect
+                    width="16"
+                    height="16"
+                    fill="white"
+                    transform="translate(0.799988)"
+                  />
+                </clipPath>
+              </defs>
+            </svg>
+          </div>
+        `;
+            case "gallery":
+                console.log("Rendering gallery icon");
+                return html `
+          <div class="icon-container">
+            <svg
+              width="17"
+              height="16"
+              viewBox="0 0 17 16"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <g clip-path="url(#clip0_3144_2504)">
+                <rect
+                  width="16"
+                  height="16"
+                  transform="translate(0.799988)"
+                  fill="var(--accent-color, #CCFF4D)"
+                />
+                <path
+                  fill-rule="evenodd"
+                  clip-rule="evenodd"
+                  d="M0.799988 16V0H16.8L0.799988 16ZM1.50604 0.769531V1.80957H4.40546V10H5.63983V1.80957H8.53925V0.769531H1.50604Z"
+                  fill="#2A2A2A"
+                />
+              </g>
+              <defs>
+                <clipPath id="clip0_3144_2504">
+                  <rect
+                    width="16"
+                    height="16"
+                    fill="white"
+                    transform="translate(0.799988)"
+                  />
+                </clipPath>
+              </defs>
+            </svg>
+          </div>
+        `;
+            case "check":
+                console.log("Rendering check icon");
+                return html `
+          <div class="icon-container">
+            <svg
+              viewBox="0 0 17 17"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <rect
+                width="16"
+                height="16"
+                transform="translate(0.799988 0.678772)"
+                fill="var(--accent-color)"
+              />
+              <path
+                d="M7.48658 11.8747L13.2431 6.12674L12.5361 5.41788L7.48845 10.4734L5.06409 8.04082L4.35706 8.73597L7.48658 11.8747Z"
+                fill="#2A2A2A"
+              />
+            </svg>
+          </div>
+        `;
+            default:
+                console.log(`Unknown icon type: ${this._type}, rendering default slot`);
+                return html `<div class="icon-container"><slot></slot></div>`;
+        }
+    }
+    updated(changedProperties) {
+        console.log("Icon updated", changedProperties);
+        this.style.setProperty("--icon-size", this.size);
+        this.style.setProperty("--icon-color", this.color);
+        this.style.setProperty("--icon-background", this.background);
+    }
+    render() {
+        console.log("Icon render", this._type);
+        return this.renderIcon();
+    }
+}
+Icon.properties = {
+    type: { type: String, reflect: true },
+};
+Icon.styles = css `
+    :host {
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+      width: calc(16px * var(--scaling-factor));
+      height: calc(16px * var(--scaling-factor));
+    }
+
+    svg {
+      width: 100%;
+      height: 100%;
+      fill: var(--icon-color, currentColor);
+    }
+
+    path {
+      fill: var(--icon-color, currentColor);
+    }
+
+    .icon-container {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: calc(16px * var(--scaling-factor));
+      height: calc(16px * var(--scaling-factor));
+    }
+
+    /* Notes style color variable for future implementation */
+    :host {
+      --notes-style-color: #ffb6b9;
+    }
+  `;
+// Load all SVGs from `x Icon/` as raw strings at build time (Vite)
+// The keys will be the file base names (without extension), lowercased.
+Icon.iconNameToSvgMap = (() => {
+    try {
+        // Note: folder name contains a space, keep it exact.
+        const modules = import.meta.glob("../x Icon/*.svg", {
+            as: "raw",
+            eager: true,
+        });
+        const map = {};
+        for (const [path, content] of Object.entries(modules)) {
+            const fileName = path.split("/").pop() ?? "";
+            const baseName = fileName.replace(/\.svg$/i, "").toLowerCase();
+            if (baseName) {
+                map[baseName] = content;
+            }
+        }
+        return map;
+    }
+    catch (err) {
+        // If not running under Vite (or during tests), gracefully degrade.
+        console.warn("Icon: failed to glob SVGs from x Icon/; falling back only to inline switch icons.", err);
+        return {};
+    }
+})();
+customElements.define("ds-icon", Icon);
+// Add this line to help with debugging
+console.log("Icon component registered with custom elements registry");

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

@@ -0,0 +1,35 @@
+import { LitElement } from "lit";
+/**
+ * A component for creating localized links that open in new tabs
+ *
+ * @element ds-link
+ * @prop {string} href - The URL to link to
+ */
+export declare class Link extends LitElement {
+    static get properties(): {
+        href: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        _text: {
+            type: StringConstructor;
+            state: boolean;
+        };
+    };
+    href: string;
+    _text: string;
+    private boundHandlers;
+    constructor();
+    static styles: import("lit").CSSResult;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changedProperties: Map<string, unknown>): void;
+    _loadText(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-link": Link;
+    }
+}
+//# sourceMappingURL=ds-link.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-link.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-link.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C;;;;;GAKG;AACH,qBAAa,IAAK,SAAQ,UAAU;IAClC,MAAM,KAAK,UAAU;;;;;;;;;MAKpB;IAEO,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IAEtB,OAAO,CAAC,aAAa,CAAqC;;IAe1D,MAAM,CAAC,MAAM,0BAeX;IAEF,iBAAiB;IAiBjB,oBAAoB;IAYpB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAQ/C,SAAS;IAWT,MAAM;CAYP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,IAAI,CAAC;KACjB;CACF"}

package/dist/2-core/ds-link.js

@@ -0,0 +1,85 @@
+import { LitElement, html, css } from "lit";
+import { getText } from "../utils/language";
+/**
+ * A component for creating localized links that open in new tabs
+ *
+ * @element ds-link
+ * @prop {string} href - The URL to link to
+ */
+export class Link extends LitElement {
+    static get properties() {
+        return {
+            href: { type: String, reflect: true },
+            _text: { type: String, state: true },
+        };
+    }
+    constructor() {
+        super();
+        this.href = "";
+        this._text = "";
+        // Create bound event handlers for proper cleanup
+        this.boundHandlers = {
+            languageChanged: (() => {
+                this._loadText();
+            }),
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._loadText();
+        // Listen for language changes
+        window.addEventListener("language-changed", this.boundHandlers.languageChanged);
+        // Also listen for translations loaded event
+        window.addEventListener("translations-loaded", this.boundHandlers.languageChanged);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        window.removeEventListener("language-changed", this.boundHandlers.languageChanged);
+        window.removeEventListener("translations-loaded", this.boundHandlers.languageChanged);
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has("href")) {
+            this._loadText();
+        }
+    }
+    _loadText() {
+        try {
+            const text = getText("link");
+            this._text = text || "Link";
+        }
+        catch (error) {
+            console.error("Error loading text for key 'link':", error);
+            this._text = "Link";
+        }
+        this.requestUpdate();
+    }
+    render() {
+        if (!this.href) {
+            return html `<span>${this._text}</span>`;
+        }
+        return html `
+      <a href="${this.href}" target="_blank" rel="noopener noreferrer">
+        ${this._text}
+        <ds-icon type="open"></ds-icon>
+      </a>
+    `;
+    }
+}
+Link.styles = css `
+    :host {
+      display: inline;
+      font-family: var(--typeface);
+    }
+
+    a {
+      color: inherit;
+      text-decoration: none;
+    }
+
+    ds-icon {
+      display: inline-block;
+      vertical-align: middle;
+    }
+  `;
+customElements.define("ds-link", Link);

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

@@ -0,0 +1,7 @@
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-markdown": any;
+    }
+}
+export {};
+//# sourceMappingURL=ds-markdown.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-markdown.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-markdown.ts"],"names":[],"mappings":"AAsPA,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,GAAG,CAAC;KACpB;CACF"}

package/dist/2-core/ds-markdown.js

@@ -0,0 +1,240 @@
+var _a;
+import { LitElement, html, css } from "lit";
+customElements.define("ds-markdown", (_a = class Markdown extends LitElement {
+        constructor() {
+            super(...arguments);
+            this.content = "";
+            this.title = "";
+            this.language = "";
+            this.guideId = "";
+        }
+        render() {
+            if (!this.content) {
+                return html `<div class="markdown-container">
+          <p>No content available</p>
+        </div>`;
+            }
+            return html `
+        <div class="markdown-container">
+          ${this.title
+                ? html `
+                <div class="markdown-header">
+                  <h1 class="markdown-title">${this.title}</h1>
+                  <div class="markdown-meta">
+                    ${this.language
+                    ? html `
+                          <span class="markdown-category"
+                            >${this.language}</span
+                          >
+                        `
+                    : ""}
+                    ${this.guideId
+                    ? html `
+                          <span class="markdown-tag"
+                            >Guide ID: ${this.guideId}</span
+                          >
+                        `
+                    : ""}
+                  </div>
+                </div>
+              `
+                : ""}
+          <div class="markdown-content">
+            ${this.renderMarkdown(this.content)}
+          </div>
+        </div>
+      `;
+        }
+        renderMarkdown(markdown) {
+            // Simple markdown rendering - you might want to use a proper markdown parser
+            let htmlContent = markdown
+                // Headers
+                .replace(/^### (.*$)/gim, "<h3>$1</h3>")
+                .replace(/^## (.*$)/gim, "<h2>$1</h2>")
+                .replace(/^# (.*$)/gim, "<h1>$1</h1>")
+                // Bold
+                .replace(/\*\*(.*?)\*\*/g, "<strong>$1</strong>")
+                // Italic
+                .replace(/\*(.*?)\*/g, "<em>$1</em>")
+                // Code blocks
+                .replace(/```([\s\S]*?)```/g, "<pre><code>$1</code></pre>")
+                // Inline code
+                .replace(/`(.*?)`/g, "<code>$1</code>")
+                // Links
+                .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2">$1</a>')
+                // Line breaks
+                .replace(/\n/g, "<br>");
+            return html `${htmlContent}`;
+        }
+    },
+    _a.properties = {
+        content: { type: String },
+        title: { type: String },
+        language: { type: String },
+        guideId: { type: String },
+    },
+    _a.styles = css `
+      :host {
+        display: block;
+        font-family:
+          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
+          Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+        line-height: 1.6;
+        color: #333;
+      }
+
+      .markdown-container {
+        max-width: 800px;
+        margin: 0 auto;
+      }
+
+      .markdown-header {
+        padding-bottom: 1rem;
+      }
+
+      .markdown-title {
+        font-weight: 700;
+        margin: 0 0 0.5rem 0;
+        color: #2c3e50;
+      }
+
+      .markdown-meta {
+        display: flex;
+        gap: 1rem;
+        font-size: 0.9rem;
+        color: #666;
+        flex-wrap: wrap;
+      }
+
+      .markdown-category {
+        background: #e3f2fd;
+        color: #1976d2;
+        padding: 0.25rem 0.5rem;
+        border-radius: 4px;
+        font-weight: 500;
+      }
+
+      .markdown-tags {
+        display: flex;
+        gap: 0.5rem;
+        flex-wrap: wrap;
+      }
+
+      .markdown-tag {
+        background: #f5f5f5;
+        color: #666;
+        padding: 0.25rem 0.5rem;
+        border-radius: 4px;
+        font-size: 0.8rem;
+      }
+
+      .markdown-content {
+        font-size: 1rem;
+      }
+
+      .markdown-content h1,
+      .markdown-content h2,
+      .markdown-content h3,
+      .markdown-content h4,
+      .markdown-content h5,
+      .markdown-content h6 {
+        margin-bottom: 1rem;
+        font-weight: 600;
+        line-height: 1.3;
+      }
+
+      .markdown-content h1 {
+        font-size: 1.8rem;
+        color: #2c3e50;
+      }
+
+      .markdown-content h2 {
+        font-size: 1.5rem;
+        color: #34495e;
+      }
+
+      .markdown-content h3 {
+        font-size: 1.3rem;
+        color: #2c3e50;
+      }
+
+      .markdown-content h4 {
+        font-size: 1.1rem;
+        color: #34495e;
+      }
+
+      .markdown-content p {
+        margin-bottom: 1rem;
+        line-height: 1.7;
+      }
+
+      .markdown-content ul,
+      .markdown-content ol {
+      }
+
+      .markdown-content li {
+        margin-bottom: 0.5rem;
+      }
+
+      .markdown-content blockquote {
+        border-left: 4px solid #3498db;
+        padding-left: 1rem;
+        margin: 1.5rem 0;
+        font-style: italic;
+        color: #555;
+      }
+
+      .markdown-content code {
+        background: #f8f9fa;
+        padding: 0.2rem 0.4rem;
+        border-radius: 3px;
+        font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
+        font-size: 0.9em;
+      }
+
+      .markdown-content pre {
+        background: #f8f9fa;
+        padding: 1rem;
+        border-radius: 5px;
+        overflow-x: auto;
+        margin: 1.5rem 0;
+      }
+
+      .markdown-content pre code {
+        background: none;
+        padding: 0;
+      }
+
+      .markdown-content table {
+        width: 100%;
+        border-collapse: collapse;
+        margin: 1.5rem 0;
+      }
+
+      .markdown-content th,
+      .markdown-content td {
+        padding: 0.75rem;
+        text-align: left;
+      }
+
+      .markdown-content th {
+        background: #f8f9fa;
+        font-weight: 600;
+      }
+
+      .markdown-content a {
+        color: #3498db;
+        text-decoration: none;
+      }
+
+      .markdown-content a:hover {
+        text-decoration: underline;
+      }
+
+      .markdown-content img {
+        max-width: 100%;
+        height: auto;
+        margin: 1rem 0;
+      }
+    `,
+    _a));