rizzo-css 0.0.16 → 0.0.18

package/scaffold/astro-app/src/components/CodeBlock.astro

@@ -1,393 +0,0 @@
----
-import Copy from './icons/Copy.astro';
-import Check from './icons/Check.astro';
-import Css3 from './icons/devicons/Css3.astro';
-import Html5 from './icons/devicons/Html5.astro';
-import Javascript from './icons/devicons/Javascript.astro';
-import Nodejs from './icons/devicons/Nodejs.astro';
-import AstroIcon from './icons/devicons/Astro.astro';
-import Plaintext from './icons/devicons/Plaintext.astro';
-import Git from './icons/devicons/Git.astro';
-import Bash from './icons/devicons/Bash.astro';
-import Svelte from './icons/devicons/Svelte.astro';
-import React from './icons/devicons/React.astro';
-import Vue from './icons/devicons/Vue.astro';
-
-interface Props {
-  code: string;
-  language?: string;
-  class?: string;
-}
-
-const {
-  code,
-  language = '',
-  class: className = '',
-} = Astro.props;
-
-const languageLabel = language || '';
-const languageLower = language.toLowerCase();
-
-const codeId = `code-${Math.random().toString(36).substr(2, 9)}`;
-const copyButtonId = `copy-btn-${Math.random().toString(36).substr(2, 9)}`;
----
-
-<div class={`code-block ${className}`.trim()}>
-  <div class="code-block__header">
-    {language && (
-      <span class="code-block__language" aria-label={languageLabel}>
-        {languageLower === 'css' && (
-          <>
-            <Css3 width={20} height={20} class="code-block__language-icon" />
-            <span class="code-block__language-text">{languageLabel}</span>
-          </>
-        )}
-        {languageLower === 'html' && (
-          <>
-            <Html5 width={20} height={20} class="code-block__language-icon" />
-            <span class="code-block__language-text">{languageLabel}</span>
-          </>
-        )}
-        {languageLower === 'javascript' && (
-          <>
-            <Javascript width={20} height={20} class="code-block__language-icon" />
-            <span class="code-block__language-text">{languageLabel}</span>
-          </>
-        )}
-        {languageLower === 'nodejs' && (
-          <>
-            <Nodejs width={20} height={20} class="code-block__language-icon" />
-            <span class="code-block__language-text">{languageLabel}</span>
-          </>
-        )}
-        {languageLower === 'astro' && (
-          <>
-            <AstroIcon width={20} height={20} class="code-block__language-icon" />
-            <span class="code-block__language-text">{languageLabel}</span>
-          </>
-        )}
-        {languageLower === 'plaintext' && (
-          <>
-            <Plaintext width={20} height={20} class="code-block__language-icon" />
-            <span class="code-block__language-text">{languageLabel}</span>
-          </>
-        )}
-        {languageLower === 'git' && (
-          <>
-            <Git width={20} height={20} class="code-block__language-icon" />
-            <span class="code-block__language-text">{languageLabel}</span>
-          </>
-        )}
-        {languageLower === 'svelte' && (
-          <>
-            <Svelte width={20} height={20} class="code-block__language-icon" />
-            <span class="code-block__language-text">{languageLabel}</span>
-          </>
-        )}
-        {(languageLower === 'react' || languageLower === 'jsx' || languageLower === 'tsx') && (
-          <>
-            <React width={20} height={20} class="code-block__language-icon" />
-            <span class="code-block__language-text">{languageLabel}</span>
-          </>
-        )}
-        {languageLower === 'vue' && (
-          <>
-            <Vue width={20} height={20} class="code-block__language-icon" />
-            <span class="code-block__language-text">{languageLabel}</span>
-          </>
-        )}
-        {(languageLower === 'bash' || languageLower === 'shell' || languageLower === 'sh') && (
-          <>
-            <Bash width={20} height={20} class="code-block__language-icon" />
-            <span class="code-block__language-text">{languageLabel}</span>
-          </>
-        )}
-        {!['css', 'html', 'javascript', 'nodejs', 'astro', 'plaintext', 'git', 'svelte', 'react', 'jsx', 'tsx', 'vue', 'bash', 'shell', 'sh'].includes(languageLower) && (
-          <span class="code-block__language-text">{language}</span>
-        )}
-        <span class="sr-only">{languageLabel}</span>
-      </span>
-    )}
-    <span class="tooltip-host" data-tooltip="Copy code to clipboard">
-      <button
-        type="button"
-        class="code-block__copy-btn"
-        aria-label="Copy code to clipboard"
-        data-code-id={codeId}
-        id={copyButtonId}
-      >
-        <span class="code-block__copy-icon code-block__copy-icon--copy" aria-hidden="true">
-          <Copy width={20} height={20} />
-        </span>
-        <span class="code-block__copy-icon code-block__copy-icon--check" aria-hidden="true">
-          <Check width={20} height={20} />
-        </span>
-        <span class="sr-only">Copy code</span>
-      </button>
-    </span>
-  </div>
-  <pre><code id={codeId}>{code}</code></pre>
-</div>
-
-<script is:inline>
-  (function initCodeBlockCopy() {
-    const init = () => {
-      const copyButtons = document.querySelectorAll('.code-block__copy-btn');
-      
-      copyButtons.forEach((button) => {
-        if (button.hasAttribute('data-copy-initialized')) return;
-        button.setAttribute('data-copy-initialized', 'true');
-        
-        const codeId = button.getAttribute('data-code-id');
-        if (!codeId) return;
-        
-        const codeElement = document.getElementById(codeId);
-        if (!codeElement) return;
-        
-        const copyIcon = button.querySelector('.code-block__copy-icon--copy');
-        const checkIcon = button.querySelector('.code-block__copy-icon--check');
-        
-        // Remove title elements from SVG icons to prevent tooltip conflicts
-        const copyIconSvg = copyIcon?.querySelector('svg');
-        const checkIconSvg = checkIcon?.querySelector('svg');
-        if (copyIconSvg) {
-          const copyTitle = copyIconSvg.querySelector('title');
-          if (copyTitle) copyTitle.remove();
-        }
-        if (checkIconSvg) {
-          const checkTitle = checkIconSvg.querySelector('title');
-          if (checkTitle) checkTitle.remove();
-        }
-        
-        const copyToClipboard = async () => {
-          const codeText = codeElement.textContent || '';
-          
-          if (!codeText) return;
-          
-          try {
-            await navigator.clipboard.writeText(codeText);
-            
-            // Show success state
-            if (copyIcon) copyIcon.classList.add('code-block__copy-icon--hidden');
-            if (checkIcon) checkIcon.classList.remove('code-block__copy-icon--hidden');
-            button.setAttribute('aria-label', 'Code copied!');
-            const tooltipHost = button.closest('.tooltip-host');
-            if (tooltipHost) tooltipHost.setAttribute('data-tooltip', 'Code copied!');
-            
-            // Reset after 2 seconds
-            setTimeout(() => {
-              if (copyIcon) copyIcon.classList.remove('code-block__copy-icon--hidden');
-              if (checkIcon) checkIcon.classList.add('code-block__copy-icon--hidden');
-              button.setAttribute('aria-label', 'Copy code to clipboard');
-              if (tooltipHost) tooltipHost.setAttribute('data-tooltip', 'Copy code to clipboard');
-            }, 2000);
-          } catch (err) {
-            // Fallback for older browsers
-            const textArea = document.createElement('textarea');
-            textArea.value = codeText;
-            textArea.style.position = 'fixed';
-            textArea.style.left = '-999999px';
-            document.body.appendChild(textArea);
-            textArea.focus();
-            textArea.select();
-            
-            try {
-              document.execCommand('copy');
-              if (copyIcon) copyIcon.classList.add('code-block__copy-icon--hidden');
-              if (checkIcon) checkIcon.classList.remove('code-block__copy-icon--hidden');
-              button.setAttribute('aria-label', 'Code copied!');
-              const tooltipHostFallback = button.closest('.tooltip-host');
-              if (tooltipHostFallback) tooltipHostFallback.setAttribute('data-tooltip', 'Code copied!');
-              
-              setTimeout(() => {
-                if (copyIcon) copyIcon.classList.remove('code-block__copy-icon--hidden');
-                if (checkIcon) checkIcon.classList.add('code-block__copy-icon--hidden');
-                button.setAttribute('aria-label', 'Copy code to clipboard');
-                if (tooltipHostFallback) tooltipHostFallback.setAttribute('data-tooltip', 'Copy code to clipboard');
-              }, 2000);
-            } catch (fallbackErr) {
-              console.error('Failed to copy:', fallbackErr);
-            }
-            
-            document.body.removeChild(textArea);
-          }
-        };
-        
-        button.addEventListener('click', copyToClipboard);
-        
-        // Keyboard support
-        button.addEventListener('keydown', (e) => {
-          if (e && 'key' in e) {
-            const keyEvent = e;
-            if (keyEvent.key === 'Enter' || keyEvent.key === ' ') {
-              keyEvent.preventDefault();
-              copyToClipboard();
-            }
-          }
-        });
-      });
-    };
-    
-    if (document.readyState === 'loading') {
-      document.addEventListener('DOMContentLoaded', init);
-    } else {
-      init();
-    }
-  })();
-</script>
-
-<style>
-  .code-block {
-    position: relative;
-    margin: var(--spacing-4) 0;
-    border-radius: var(--radius-lg);
-    overflow: visible;
-    background-color: var(--background-alt);
-    border: 1px solid var(--border);
-  }
-  
-  .code-block__header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: var(--spacing-2) var(--spacing-3);
-    background-color: var(--background);
-    border-bottom: 1px solid var(--border);
-    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
-    overflow: visible;
-    position: relative;
-    z-index: 1;
-  }
-  
-  .code-block__language {
-    display: flex;
-    align-items: center;
-    gap: var(--spacing-2);
-    font-size: var(--font-size-xs);
-    color: var(--text-dim);
-    text-transform: uppercase;
-    letter-spacing: var(--letter-spacing-wider);
-    font-weight: var(--font-weight-medium);
-  }
-  
-  .code-block__language-icon {
-    display: block;
-    flex-shrink: 0;
-    color: var(--text-dim);
-    width: var(--spacing-5); /* 20px - larger for better visibility */
-    height: var(--spacing-5);
-  }
-  
-  .code-block__language-icon svg {
-    width: 100%;
-    height: 100%;
-  }
-  
-  .code-block__language-text {
-    display: none;
-  }
-  
-  /* Show text next to icon on large screens */
-  @media (width >= 768px) {
-    .code-block__language-text {
-      display: inline;
-    }
-  }
-  
-  .code-block__copy-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: var(--spacing-2);
-    min-width: var(--spacing-8);
-    height: var(--spacing-8);
-    margin-left: auto;
-    background-color: var(--background-alt);
-    border: 1px solid var(--border);
-    border-radius: var(--radius-md);
-    color: var(--text);
-    cursor: pointer;
-    transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base);
-    position: relative;
-  }
-  
-  .code-block__copy-btn:hover {
-    background-color: var(--background);
-    border-color: var(--accent);
-    color: var(--accent);
-  }
-  
-  .code-block__copy-btn:focus-visible {
-    outline: var(--outline-width) solid var(--accent);
-    outline-offset: var(--outline-offset);
-  }
-  
-  .code-block__copy-icon {
-    position: absolute;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: var(--spacing-5); /* 20px - larger for better visibility */
-    height: var(--spacing-5);
-    transition: opacity var(--transition-base), transform var(--transition-base);
-  }
-  
-  .code-block__copy-icon svg {
-    width: 100%;
-    height: 100%;
-  }
-  
-  .code-block__copy-icon--copy {
-    opacity: 1;
-    transform: scale(1);
-  }
-  
-  .code-block__copy-icon--check {
-    opacity: 0;
-    transform: scale(0.8);
-  }
-  
-  .code-block__copy-icon--check:not(.code-block__copy-icon--hidden) {
-    opacity: 1;
-    transform: scale(1);
-  }
-  
-  .code-block__copy-icon--copy.code-block__copy-icon--hidden {
-    opacity: 0;
-    transform: scale(0.8);
-  }
-  
-  .code-block pre {
-    margin: 0;
-    padding: var(--spacing-4);
-    overflow-x: auto;
-    background-color: var(--background-alt);
-    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
-  }
-  
-  .code-block code {
-    font-family: var(--font-family-mono);
-    font-size: var(--font-size-sm);
-    line-height: var(--line-height-relaxed);
-    color: var(--text);
-    white-space: pre;
-    word-wrap: normal;
-  }
-  
-  @media (width <= 640px) {
-    .code-block__header {
-      flex-direction: row; /* Keep horizontal layout on mobile */
-      align-items: center; /* Vertically center all items */
-      gap: var(--spacing-2);
-    }
-    
-    .code-block__language {
-      align-items: center; /* Ensure language icon is vertically centered */
-    }
-    
-    .code-block__copy-btn {
-      margin-left: auto; /* Push copy button to the right */
-      flex-shrink: 0; /* Prevent copy button from shrinking */
-    }
-  }
-</style>

package/scaffold/astro-app/src/components/CopyToClipboard.astro

@@ -1,219 +0,0 @@
----
-import Copy from './icons/Copy.astro';
-import Check from './icons/Check.astro';
-
-interface Props {
-  value: string;
-  label?: string;
-  format?: string;
-  class?: string;
-  id?: string;
-}
-
-const {
-  value,
-  label,
-  format,
-  class: className = '',
-  id,
-} = Astro.props;
-
-const buttonId = id || `copy-btn-${Math.random().toString(36).substr(2, 9)}`;
-const defaultTooltip = label || 'Copy to clipboard';
----
-
-<span class="tooltip-host" data-tooltip={defaultTooltip}>
-  <button
-    type="button"
-    class={`copy-to-clipboard ${className}`.trim()}
-    data-copy-value={value}
-    data-copy-format={format}
-    aria-label={label || `Copy ${value} to clipboard`}
-    id={buttonId}
-  >
-    <span class="copy-to-clipboard__text">{value}</span>
-    <span class="copy-to-clipboard__icon copy-to-clipboard__icon--copy" aria-hidden="true">
-      <Copy width={16} height={16} />
-    </span>
-    <span class="copy-to-clipboard__icon copy-to-clipboard__icon--check" aria-hidden="true">
-      <Check width={16} height={16} />
-    </span>
-    <span class="copy-to-clipboard__feedback" aria-live="polite"></span>
-  </button>
-</span>
-
-<script>
-  (function initCopyToClipboard() {
-    // Wait for DOM to be ready
-    const init = () => {
-      const buttons = document.querySelectorAll('.copy-to-clipboard');
-      
-      buttons.forEach((button) => {
-        // Skip if already initialized
-        if (button.hasAttribute('data-copy-initialized')) return;
-        button.setAttribute('data-copy-initialized', 'true');
-        
-        const tooltipHost = button.closest('.tooltip-host');
-        const defaultTooltip = tooltipHost ? (tooltipHost.getAttribute('data-tooltip') || 'Copy to clipboard') : 'Copy to clipboard';
-        const defaultAriaLabel = button.getAttribute('aria-label') || 'Copy to clipboard';
-        if (tooltipHost) tooltipHost.setAttribute('data-tooltip', defaultTooltip);
-        button.setAttribute('data-copy-aria-label', defaultAriaLabel);
-        if (tooltipHost) tooltipHost.setAttribute('data-copy-default-tooltip', defaultTooltip);
-        
-        const getValue = () => button.getAttribute('data-copy-value') || '';
-        const getFormat = () => button.getAttribute('data-copy-format') || '';
-        const feedback = button.querySelector('.copy-to-clipboard__feedback');
-        const copyIcon = button.querySelector('.copy-to-clipboard__icon--copy');
-        const checkIcon = button.querySelector('.copy-to-clipboard__icon--check');
-        const textSpan = button.querySelector('.copy-to-clipboard__text');
-        
-        // Update text span with current value
-        const updateDisplay = () => {
-          const value = getValue();
-          if (textSpan) {
-            textSpan.textContent = value || '';
-          }
-        };
-        
-        // Initial display update
-        updateDisplay();
-        
-        // Watch for attribute changes (for dynamic updates)
-        const observer = new MutationObserver((mutations) => {
-          let shouldUpdate = false;
-          mutations.forEach((mutation) => {
-            if (mutation.type === 'attributes') {
-              if (mutation.attributeName === 'data-copy-value' || mutation.attributeName === 'data-copy-format') {
-                shouldUpdate = true;
-              }
-            }
-          });
-          if (shouldUpdate) {
-            // Use requestAnimationFrame to ensure DOM is ready
-            requestAnimationFrame(() => {
-              updateDisplay();
-            });
-          }
-        });
-        observer.observe(button, {
-          attributes: true,
-          attributeFilter: ['data-copy-value', 'data-copy-format'],
-          attributeOldValue: false
-        });
-        
-        // Listen for custom value-updated event
-        button.addEventListener('value-updated', (event) => {
-          if (event && event.detail && event.detail.value) {
-            updateDisplay();
-          }
-        });
-        
-        // Fallback: Periodically check for value changes (in case MutationObserver misses something)
-        let lastValue = getValue();
-        const intervalId = setInterval(() => {
-          const currentValue = getValue();
-          if (currentValue !== lastValue) {
-            lastValue = currentValue;
-            updateDisplay();
-          }
-        }, 300);
-        
-        // Store interval ID for potential cleanup (though we don't need to clean it up in this case)
-        button.setAttribute('data-copy-interval-id', intervalId.toString());
-        
-        const copyToClipboard = async () => {
-          // Always read fresh value on click (in case it was updated dynamically)
-          let value = getValue();
-          const format = getFormat();
-          
-          // If value is still empty, try reading from text span as fallback
-          if (!value && textSpan) {
-            value = textSpan.textContent || '';
-          }
-          
-          if (!value) {
-            return;
-          }
-          
-          try {
-            await navigator.clipboard.writeText(value);
-            
-            // Show success state
-            if (copyIcon) copyIcon.classList.add('copy-to-clipboard__icon--hidden');
-            if (checkIcon) checkIcon.classList.remove('copy-to-clipboard__icon--hidden');
-            if (feedback) {
-              feedback.textContent = format ? `Copied ${format}!` : 'Copied!';
-            }
-            const tooltipHost = button.closest('.tooltip-host');
-            if (tooltipHost) tooltipHost.setAttribute('data-tooltip', format ? `Copied ${format}!` : 'Copied!');
-            button.setAttribute('aria-label', format ? `Copied ${format}!` : 'Copied!');
-            
-            // Reset after 2 seconds
-            setTimeout(() => {
-              if (copyIcon) copyIcon.classList.remove('copy-to-clipboard__icon--hidden');
-              if (checkIcon) checkIcon.classList.add('copy-to-clipboard__icon--hidden');
-              if (feedback) {
-                feedback.textContent = '';
-              }
-              if (tooltipHost) tooltipHost.setAttribute('data-tooltip', tooltipHost.getAttribute('data-copy-default-tooltip') || defaultTooltip);
-              button.setAttribute('aria-label', defaultAriaLabel);
-            }, 2000);
-          } catch (err) {
-            // Fallback for older browsers
-            const textArea = document.createElement('textarea');
-            textArea.value = value;
-            textArea.style.position = 'fixed';
-            textArea.style.left = '-999999px';
-            document.body.appendChild(textArea);
-            textArea.focus();
-            textArea.select();
-            
-            try {
-              document.execCommand('copy');
-              if (copyIcon) copyIcon.classList.add('copy-to-clipboard__icon--hidden');
-              if (checkIcon) checkIcon.classList.remove('copy-to-clipboard__icon--hidden');
-              if (feedback) {
-                feedback.textContent = format ? `Copied ${format}!` : 'Copied!';
-              }
-              const tooltipHostFb = button.closest('.tooltip-host');
-              if (tooltipHostFb) tooltipHostFb.setAttribute('data-tooltip', format ? `Copied ${format}!` : 'Copied!');
-              button.setAttribute('aria-label', format ? `Copied ${format}!` : 'Copied!');
-              
-              setTimeout(() => {
-                if (copyIcon) copyIcon.classList.remove('copy-to-clipboard__icon--hidden');
-                if (checkIcon) checkIcon.classList.add('copy-to-clipboard__icon--hidden');
-                if (feedback) {
-                  feedback.textContent = '';
-                }
-                if (tooltipHostFb) tooltipHostFb.setAttribute('data-tooltip', tooltipHostFb.getAttribute('data-copy-default-tooltip') || defaultTooltip);
-                button.setAttribute('aria-label', defaultAriaLabel);
-              }, 2000);
-            } catch (fallbackErr) {
-              if (feedback) {
-                feedback.textContent = 'Failed to copy';
-              }
-            }
-            
-            document.body.removeChild(textArea);
-          }
-        };
-        
-        button.addEventListener('click', copyToClipboard);
-        
-        // Keyboard support
-        button.addEventListener('keydown', (e) => {
-          if (e.key === 'Enter' || e.key === ' ') {
-            e.preventDefault();
-            copyToClipboard();
-          }
-        });
-      });
-    };
-    
-    if (document.readyState === 'loading') {
-      document.addEventListener('DOMContentLoaded', init);
-    } else {
-      init();
-    }
-  })();
-</script>

package/scaffold/astro-app/src/components/Divider.astro

@@ -1,37 +0,0 @@
----
-interface Props {
-  /** Orientation of the divider line */
-  orientation?: 'horizontal' | 'vertical';
-  /** Optional label (e.g. "OR") shown in the middle; only used for horizontal */
-  label?: string;
-  class?: string;
-}
-
-const {
-  orientation = 'horizontal',
-  label,
-  class: className = '',
-} = Astro.props;
-
-const orientationClass = `divider--${orientation}`;
-const hasLabel = Boolean(label && label.trim());
-const labelClass = hasLabel ? 'divider--labeled' : '';
-const classes = `divider ${orientationClass} ${labelClass} ${className}`.trim();
----
-
-<div
-  class={classes}
-  role="separator"
-  aria-orientation={orientation}
-  aria-label={label?.trim() || undefined}
->
-  {hasLabel && orientation === 'horizontal' ? (
-    <>
-      <span class="divider__line" aria-hidden="true" />
-      <span class="divider__label">{label!.trim()}</span>
-      <span class="divider__line" aria-hidden="true" />
-    </>
-  ) : (
-    <span class="divider__line" aria-hidden="true" />
-  )}
-</div>

package/scaffold/astro-app/src/components/DocsSidebar.astro

@@ -1,51 +0,0 @@
----
-import { DOCS_NAV } from '../config/docsNav';
-import type { Framework } from '../config/frameworks';
-
-interface Props {
-  currentPath: string;
-  framework: Framework;
-}
-
-const { currentPath, framework } = Astro.props;
-const pathPrefix = framework.pathPrefix; // /docs or /docs/svelte or /docs/vanilla
-
-function fullHref(link: { href: string; frameworkOnly?: boolean }) {
-  const base = link.frameworkOnly ? pathPrefix : '/docs';
-  return `${base}/${link.href}`;
-}
-
-function isActive(link: { href: string; frameworkOnly?: boolean }): boolean {
-  const path = currentPath.replace(/\/$/, '');
-  const href = fullHref(link);
-  if (path === href) return true;
-  if (path.startsWith(href + '/')) return true;
-  return false;
-}
----
-
-<aside id="docs-sidebar" class="docs-sidebar" aria-label="Documentation navigation">
-  <nav class="docs-sidebar__nav">
-    {DOCS_NAV.map((group) => (
-      <div class="docs-sidebar__group">
-        <h2 class="docs-sidebar__group-label">{group.label}</h2>
-        <ul class="docs-sidebar__list">
-          {group.links.map((link) => {
-            const href = fullHref(link);
-            const active = isActive(link);
-            return (
-              <li class="docs-sidebar__item">
-                <a
-                  href={href}
-                  class={`docs-sidebar__link ${active ? 'docs-sidebar__link--active' : ''}`}
-                >
-                  {link.label}
-                </a>
-              </li>
-            );
-          })}
-        </ul>
-      </div>
-    ))}
-  </nav>
-</aside>