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

package/DS1/2-core/ds-markdown.ts

@@ -1,252 +0,0 @@
-import { LitElement, html, css } from "lit";
-
-customElements.define(
-  "ds-markdown",
-  class Markdown extends LitElement {
-    static properties = {
-      content: { type: String },
-      title: { type: String },
-      language: { type: String },
-      guideId: { type: String },
-    };
-
-    content = "";
-    title = "";
-    language = "";
-    guideId = "";
-
-    static 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;
-      }
-    `;
-
-    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>
-      `;
-    }
-
-    private renderMarkdown(markdown: string): any {
-      // 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}`;
-    }
-  }
-);
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ds-markdown": any;
-  }
-}
-

package/DS1/2-core/ds-price.ts

@@ -1,108 +0,0 @@
-import { LitElement, html, css } from "lit";
-import { currentLanguage } from "../utils/language";
-import type { LanguageCode } from "../utils/language";
-import { getPriceLabel } from "../utils/pricing";
-
-/**
- * A component for displaying the monthly price label based on language/region
- *
- * @element ds-price
- * @prop {string} country - Preferred country (overrides language mapping)
- * @prop {string} region - Alias for country; if provided, takes precedence over country
- */
-export class Price extends LitElement {
-  static get properties() {
-    return {
-      country: { type: String, reflect: true },
-      region: { type: String, reflect: true },
-      _label: { type: String, state: true },
-      _loading: { type: Boolean, state: true },
-    };
-  }
-
-  declare country: string;
-  declare region: string;
-  declare _label: string;
-  declare _loading: boolean;
-  private boundHandlers: { languageChanged: EventListener };
-
-  constructor() {
-    super();
-    this.country = "";
-    this.region = "";
-    this._label = "";
-    this._loading = true;
-
-    this.boundHandlers = {
-      languageChanged: (() => {
-        this._loadPrice();
-      }) as EventListener,
-    };
-  }
-
-  static styles = css`
-    :host {
-      display: inline;
-    }
-    .loading {
-      opacity: 0.6;
-    }
-  `;
-
-  connectedCallback() {
-    super.connectedCallback();
-    this._loadPrice();
-    window.addEventListener(
-      "language-changed",
-      this.boundHandlers.languageChanged
-    );
-    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(changed: Map<string, unknown>) {
-    super.updated(changed);
-    if (changed.has("country") || changed.has("region")) {
-      this._loadPrice();
-    }
-  }
-
-  private _loadPrice() {
-    this._loading = true;
-    const lang: LanguageCode = currentLanguage.value;
-    const preferredCountry = this.region || this.country;
-    const label = getPriceLabel({ language: lang, country: preferredCountry });
-    this._label = label;
-    this._loading = false;
-    this.requestUpdate();
-  }
-
-  render() {
-    return html`<span class="${this._loading ? "loading" : ""}"
-      >${this._label}</span
-    >`;
-  }
-}
-
-customElements.define("ds-price", Price);
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ds-price": Price;
-  }
-}
-

package/DS1/2-core/ds-squarecircle.ts

@@ -1,155 +0,0 @@
-import { LitElement, css, html } from "lit";
-import { setTheme, currentTheme } from "../utils/theme";
-
-/**
- * A component for theme toggle or project links (square or circle shape)
- *
- * @element ds-squarecircle
- * @prop {string} type - "theme-toggle" or "link"
- * @prop {string} shape - "square" or "circle"
- * @prop {string} href - URL for link type
- * @prop {string} project - Project name for color theming
- * @prop {boolean} loading - Loading state with pulse animation
- */
-export class SquareCircle extends LitElement {
-  static get properties() {
-    return {
-      type: { type: String, reflect: true },
-      shape: { type: String, reflect: true },
-      href: { type: String },
-      project: { type: String, reflect: true },
-      loading: { type: Boolean, reflect: true },
-    };
-  }
-
-  declare type: "theme-toggle" | "link";
-  declare shape: "square" | "circle";
-  declare href: string;
-  declare project: string;
-  declare loading: boolean;
-
-  constructor() {
-    super();
-    this.type = "theme-toggle";
-    this.shape = "circle";
-    this.href = "";
-    this.project = "";
-    this.loading = false;
-  }
-
-  static styles = css`
-    :host {
-      background-color: light-dark(var(--black), var(--white));
-      display: block;
-      width: calc(120px * var(--scaling-factor));
-      height: calc(120px * var(--scaling-factor));
-      cursor: pointer;
-      pointer-events: auto;
-      position: relative;
-      z-index: 1;
-    }
-
-    :host([shape="circle"]) {
-      border-radius: 9999px;
-    }
-
-    :host([shape="circle"]) .wrapper,
-    :host([shape="circle"]) .container {
-      border-radius: 9999px;
-    }
-
-    .wrapper {
-      width: 100%;
-      height: 100%;
-      cursor: pointer;
-      pointer-events: auto;
-    }
-
-    .container {
-      width: 100%;
-      height: 100%;
-      background-color: inherit;
-      cursor: pointer;
-      pointer-events: auto;
-    }
-
-    .container:hover {
-      opacity: 0.8;
-    }
-
-    a {
-      display: block;
-      width: 100%;
-      height: 100%;
-      text-decoration: none;
-      cursor: pointer;
-      pointer-events: auto;
-    }
-
-    :host([loading]) {
-      animation: gentle-pulse 2s ease-in-out infinite;
-    }
-
-    @keyframes gentle-pulse {
-      0% {
-        opacity: 1;
-      }
-      50% {
-        opacity: 0.7;
-      }
-      100% {
-        opacity: 1;
-      }
-    }
-  `;
-
-  private _handleClick(e: Event) {
-    if (this.type === "theme-toggle") {
-      e.preventDefault();
-      const newTheme = currentTheme.get() === "light" ? "dark" : "light";
-      setTheme(newTheme);
-    }
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.addEventListener("click", (e) => {
-      this._handleClick(e);
-    });
-  }
-
-  render() {
-    const content = html`<div
-      class="container"
-      @click="${(e: Event) => {
-        this._handleClick(e);
-      }}"
-    ></div>`;
-
-    if (this.type === "link" && this.href) {
-      return html`
-        <a href="${this.href}" @click="${this._handleClick}">${content}</a>
-      `;
-    }
-
-    return html`
-      <div
-        class="wrapper"
-        @click="${(e: Event) => {
-          this._handleClick(e);
-        }}"
-      >
-        ${content}
-      </div>
-    `;
-  }
-}
-
-customElements.define("ds-squarecircle", SquareCircle);
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ds-squarecircle": SquareCircle;
-  }
-}
-

package/DS1/2-core/ds-title.ts

@@ -1,139 +0,0 @@
-import { LitElement, html, css } from "lit";
-import { getText } from "../utils/language";
-
-/**
- * A component for displaying page titles with localization support
- *
- * @element ds-title
- * @prop {string} key - The translation key to use
- * @prop {string} defaultValue - Default value if translation is not found
- */
-export class Title extends LitElement {
-  private _gridArea = "";
-
-  static get properties() {
-    return {
-      gridarea: { type: String, reflect: true },
-      key: { type: String, reflect: true },
-      defaultValue: { type: String, reflect: true, attribute: "default-value" },
-      _text: { type: String, state: true },
-    };
-  }
-
-  declare key: string;
-  declare defaultValue: string;
-  declare _text: string;
-  private boundHandlers: { languageChanged: EventListener };
-
-  set gridarea(value: string) {
-    const oldValue = this._gridArea;
-    this._gridArea = value;
-    this.style.gridArea = value;
-    this.requestUpdate("gridarea", oldValue);
-  }
-
-  get gridarea(): string {
-    return this._gridArea;
-  }
-
-  static styles = css`
-    :host {
-      display: flex;
-      padding: calc(2px * var(--scaling-factor));
-      align-items: flex-start;
-    }
-
-    h1 {
-      display: block;
-      place-content: center;
-      font-family: var(--typeface);
-      color: light-dark(var(--black), var(--white));
-      font-size: calc(36px * var(--scaling-factor));
-      font-weight: 500;
-      align-items: center;
-      letter-spacing: -0.72px;
-      margin: 0;
-      height: 45px;
-    }
-
-    ::slotted(*) {
-      margin: 0;
-      width: 100%;
-    }
-  `;
-
-  constructor() {
-    super();
-    this.key = "";
-    this.defaultValue = "";
-    this._text = "";
-
-    this.boundHandlers = {
-      languageChanged: (() => {
-        this._loadText();
-      }) as EventListener,
-    };
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-    this._loadText();
-    window.addEventListener(
-      "language-changed",
-      this.boundHandlers.languageChanged
-    );
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    window.removeEventListener(
-      "language-changed",
-      this.boundHandlers.languageChanged
-    );
-  }
-
-  updated(changedProperties: Map<string, unknown>) {
-    if (changedProperties.has("key") || changedProperties.has("defaultValue")) {
-      this._loadText();
-    }
-  }
-
-  _loadText() {
-    if (!this.key) {
-      this._text = this.defaultValue || "";
-      return;
-    }
-
-    try {
-      const text = getText(this.key);
-      this._text = text || this.defaultValue || this.key;
-    } catch (error) {
-      console.error(
-        `[ds-title] Error loading text for key "${this.key}":`,
-        error
-      );
-      this._text = this.defaultValue || this.key;
-    }
-  }
-
-  firstUpdated() {
-    if (this.hasAttribute("gridarea")) {
-      this.style.gridArea = this.getAttribute("gridarea") || "";
-    }
-  }
-
-  render() {
-    const hasKey = this.key && this._text;
-
-    return html` <h1>${hasKey ? this._text : html`<slot></slot>`}</h1> `;
-  }
-}
-
-customElements.define("ds-title", Title);
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ds-title": Title;
-  }
-}
-