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

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

@@ -1,297 +0,0 @@
-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("icon-v1", Icon);
-// Add this line to help with debugging
-console.log("Icon component registered with custom elements registry");

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

@@ -1,35 +0,0 @@
-import { LitElement } from "lit";
-/**
- * A component for creating localized links that open in new tabs
- *
- * @element link-v1
- * @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 {
-        "link-v1": Link;
-    }
-}
-//# sourceMappingURL=link-v1.d.ts.map

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

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

@@ -1,85 +0,0 @@
-import { LitElement, html, css } from "lit";
-import { getText } from "../utils/language";
-/**
- * A component for creating localized links that open in new tabs
- *
- * @element link-v1
- * @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}
-        <icon-v1 type="open"></icon-v1>
-      </a>
-    `;
-    }
-}
-Link.styles = css `
-    :host {
-      display: inline;
-      font-family: var(--typeface);
-    }
-
-    a {
-      color: inherit;
-      text-decoration: none;
-    }
-
-    icon-v1 {
-      display: inline-block;
-      vertical-align: middle;
-    }
-  `;
-customElements.define("link-v1", Link);

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

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

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

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

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

@@ -1,240 +0,0 @@
-var _a;
-import { LitElement, html, css } from "lit";
-customElements.define("markdown-v1", (_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));