feat(components): add large set of new UI components and demos, reorganize groups, and bump a few dependencies

ts_web/elements/00group-media/dees-tile-pdf/styles.ts

@@ -0,0 +1,61 @@
+import { css, cssManager } from '@design.estate/dees-element';
+
+export const tilePdfStyles = css`
+  .preview-stack {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    overflow: hidden;
+  }
+
+  .preview-stack.non-a4 {
+    padding: 12px;
+  }
+
+  .preview-canvas {
+    position: relative;
+    background: white;
+    display: block;
+    max-width: 100%;
+    max-height: 100%;
+    width: auto;
+    height: auto;
+    object-fit: contain;
+    image-rendering: auto;
+    -webkit-font-smoothing: antialiased;
+    box-shadow: 0 1px 3px ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(0, 0, 0, 0.3)')};
+  }
+
+  .non-a4 .preview-canvas {
+    border: 1px solid ${cssManager.bdTheme('hsl(214 31% 92%)', 'hsl(217 25% 24%)')};
+    border-radius: 4px;
+  }
+
+  .preview-page-indicator {
+    position: absolute;
+    top: 8px;
+    left: 8px;
+    right: 8px;
+    padding: 5px 8px;
+    background: ${cssManager.bdTheme('hsl(0 0% 0% / 0.7)', 'hsl(0 0% 100% / 0.9)')};
+    color: ${cssManager.bdTheme('white', 'hsl(215 20% 12%)')};
+    border-radius: 4px;
+    font-size: 11px;
+    font-weight: 600;
+    text-align: center;
+    backdrop-filter: blur(12px);
+    z-index: 15;
+    pointer-events: none;
+    animation: fadeIn 0.2s ease;
+  }
+
+  /* Grid optimizations */
+  :host([grid-mode]) .preview-canvas {
+    image-rendering: -webkit-optimize-contrast;
+    image-rendering: crisp-edges;
+  }
+`;