@panphora/bevel 0.1.0

package/examples/components/reference/sources/hyperclay/public-assets/css/hyperclay-app-source.css

@@ -0,0 +1,614 @@
+@import 'tailwindcss';
+
+@plugin '@tailwindcss/forms';
+
+@source "../../server-lib/admin-data.js";
+
+@theme {
+  --color-purp: #df3bfa;
+  --color-gree: #03ff00;
+
+  --breakpoint-bp: 900px;
+}
+
+/*
+  The default border color has changed to `currentcolor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
+  }
+}
+
+@font-face {
+  font-family: 'Berkeley Mono';
+  src: url('https://hyperclay.com/public/fonts/BerkeleyMonoVariable-Regular.woff2') format('woff2');
+  font-weight: 100 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+:root {
+  /* Modal */
+  --hyperclay-modal-font-family: "Berkeley Mono", monospace;
+  --hyperclay-modal-font-size: 18px;
+  --hyperclay-modal-input-font-size: 16px;
+
+  /* Toast */
+  --hyperclay-toast-font-family: "Berkeley Mono", monospace;
+  --hyperclay-toast-font-size: 18px;
+}
+
+html, body {
+  background-color: #0B0C12;
+  --scrollbar-width: 14px;
+}
+
+body {
+  font-size: 19px;
+  font-family: "Berkeley Mono", monospace;
+  font-optical-sizing: auto;
+  font-weight: 100;
+  color: #fff;
+}
+
+[type='text'],
+input:where(:not([type])),
+[type='email'],
+[type='url'],
+[type='password'],
+[type='number'],
+[type='date'],
+[type='datetime-local'],
+[type='month'],
+[type='search'],
+[type='tel'],
+[type='time'],
+[type='week'],
+[multiple],
+textarea,
+select,
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-size: 19px;
+}
+
+[type='text']:focus,
+input:where(:not([type])):focus,
+[type='email']:focus,
+[type='url']:focus,
+[type='password']:focus,
+[type='number']:focus,
+[type='date']:focus,
+[type='datetime-local']:focus,
+[type='month']:focus,
+[type='search']:focus,
+[type='tel']:focus,
+[type='time']:focus,
+[type='week']:focus,
+[multiple]:focus,
+textarea:focus,
+select:focus {
+  outline-offset: 0px;
+  box-shadow: none;
+}
+
+[type="checkbox"] {
+  border: none;
+}
+
+[type="checkbox"]:checked {
+  color: #6A73B6;
+}
+
+[type="checkbox"]:focus {
+  outline: 2px solid #6A73B6;
+  outline-offset: 0px;
+}
+
+[type="checkbox"]:checked:focus {
+  outline-color: #fff;
+}
+
+/*********************************
+ *                               *
+ *             UTILS             *
+ *                               *
+ *********************************/
+
+.animating-ellipsis span {
+  opacity: 0;
+}
+
+.animating-ellipsis span:nth-child(1) {
+  animation: ellipsis-1 3.6s infinite;
+}
+
+.animating-ellipsis span:nth-child(2) {
+  animation: ellipsis-2 3.6s infinite;
+}
+
+.animating-ellipsis span:nth-child(3) {
+  animation: ellipsis-3 3.6s infinite;
+}
+
+@keyframes ellipsis-1 {
+  0%, 19% {
+    opacity: 0;
+  }
+  24%, 78% {
+    opacity: 1;
+  }
+  83%, 100% {
+    opacity: 0;
+  }
+}
+
+@keyframes ellipsis-2 {
+  0%, 33.5% {
+    opacity: 0;
+  }
+  38.5%, 78% {
+    opacity: 1;
+  }
+  83%, 100% {
+    opacity: 0;
+  }
+}
+
+@keyframes ellipsis-3 {
+  0%, 48% {
+    opacity: 0;
+  }
+  53%, 78% {
+    opacity: 1;
+  }
+  83%, 100% {
+    opacity: 0;
+  }
+}
+
+/* dashboard file list */
+
+.dash-grid {
+  display: grid;
+  grid-template-columns: 20px 24px 28px minmax(0, 1fr) 112px 76px 32px;
+  column-gap: 10px;
+  align-items: center;
+}
+
+.trash-grid {
+  display: grid;
+  grid-template-columns: 28px minmax(0, 1fr) 92px 76px 120px;
+  column-gap: 10px;
+  align-items: center;
+}
+
+.dash-row {
+  font-size: 15px;
+}
+
+.dash-meta {
+  font-size: 13px;
+  color: #8A92BB;
+  white-space: nowrap;
+}
+
+.dash-path {
+  font-size: 13px;
+  color: #8A92BB;
+}
+
+.dash-head {
+  font-size: 13px;
+}
+
+.dash-handle {
+  display: grid;
+  grid-template-columns: repeat(2, 4px);
+  gap: 3px;
+  justify-self: center;
+  cursor: grab;
+}
+.dash-handle:active {
+  cursor: grabbing;
+}
+.dash-handle-dot {
+  width: 4px;
+  height: 4px;
+  background: #393f5b;
+  box-shadow: 1px 0 0 0 #111527, 0 1px 0 0 #111527, 1px 1px 0 0 #111527;
+}
+
+/* bulk action bar: keep Delete/Clear at the bar's font size, not the global 21px button size */
+.dash-bar > button {
+  font-size: inherit;
+}
+
+/* row dropdown menus: button items match the row's font size like the <a> items,
+   not the global 21px button size */
+.dash-row [menu] button {
+  font-size: inherit;
+}
+
+@media (max-width: 640px) {
+  .dash-grid {
+    grid-template-columns: 20px 24px 28px minmax(0, 1fr) 32px;
+  }
+  .trash-grid {
+    grid-template-columns: 28px minmax(0, 1fr) 76px 120px;
+  }
+  .dash-grid .dash-meta,
+  .trash-grid .dash-meta {
+    display: none;
+  }
+}
+
+/* selection checkbox: always visible so it stays tappable on touch devices */
+.dash-check {
+  width: 16px;
+  height: 16px;
+  border: 2px solid #4B5192;
+  background: transparent;
+  cursor: pointer;
+  position: relative;
+}
+
+/* expand the touch target to ~44px without growing the 16px visual box */
+.dash-check::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 44px;
+  height: 44px;
+  transform: translate(-50%, -50%);
+}
+
+.dash-check:focus-visible {
+  outline: 2px solid #6A73B6;
+}
+
+.dash-row.selected {
+  background-color: #1A1E38;
+}
+
+.dash-row.selected .dash-check {
+  background: #6A73B6;
+  border-color: #6A73B6;
+  box-shadow: inset 0 0 0 2px #0B0C12;
+}
+
+/* header select-all: same 16px box as row checkboxes; tri-state via aria-checked */
+.dash-check-all[aria-checked="true"] {
+  background: #6A73B6;
+  border-color: #6A73B6;
+  box-shadow: inset 0 0 0 2px #0B0C12;
+}
+
+.dash-check-all[aria-checked="mixed"] {
+  background: #6A73B6;
+  border-color: #6A73B6;
+}
+
+.dash-check-all[aria-checked="mixed"]::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 8px;
+  height: 2px;
+  background: #0B0C12;
+  transform: translate(-50%, -50%);
+}
+
+/* sortable */
+
+/* dragging a selected row drags the whole selection: count badge on the ghost */
+.sortable-drag {
+  position: relative;
+}
+
+.sortable-drag[data-drag-count]:not([data-drag-count="1"])::after {
+  content: attr(data-drag-count) " items";
+  position: absolute;
+  top: 50%;
+  right: 16px;
+  transform: translateY(-50%);
+  padding: 1px 10px 2px;
+  font-size: 13px;
+  color: #fff;
+  background-color: #495197;
+  border: 2px solid #8A92BB;
+}
+
+
+
+/* target being hovered before drop */
+.sortable-hovered {
+  background-color: #232742;
+}
+
+/* original item being dragged, stays in place, not following mouse */
+.sortable-ghost {
+
+}
+
+/* being dragged */
+.sortable-drag {
+  background-color: #171927;
+}
+
+.sortable-drag .border-t-2 {
+  visibility: hidden;
+}
+
+/* breadcrumbs sortable */
+
+.root-folder-icon {
+  stroke: #fff;
+}
+
+.breadcrumbs .sortable-hovered.root-folder {
+  background-color: #fff;
+  border-radius: 3px;
+}
+
+.breadcrumbs .sortable-hovered.root-folder .root-folder-icon {
+  stroke: #0B0C13;
+}
+
+.breadcrumbs .sortable-hovered.folder {
+  background-color: #fff;
+  color: #0B0C13;
+  border-radius: 3px;
+}
+
+/*
+
+  HOME PAGE
+
+*/
+
+@font-face {
+  font-family: 'Fixedsys';
+  src: url('/public/home/fixedsys-webfont.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+.font-fixedsys {
+  font-family: "Fixedsys";
+  font-weight: 400;
+}
+
+@font-face {
+  font-family: 'Berkeley Mono';
+  src: url('/public/home/BerkeleyMonoVariable-Regular.woff2') format('woff2');
+  font-weight: 100 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+html, body {
+  font-family: "Berkeley Mono";
+  font-size: 19px;
+  font-weight: 400;
+  color: #fff;
+  background: #0B0C12;
+}
+
+@media (min-width: 900px) {
+  html, body {
+    font-size: 21px;
+  }
+}
+
+/* tolltop tooltip theming: match body font, brand bg, +1px over the 12px default */
+.tolltop {
+  --tt-bg: #2F3466;
+  --tt-font-size: 13px;
+  font-family: inherit;
+}
+
+/* RAINBOW CANNON */
+
+.rainbow-cannon {
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+}
+
+.rainbow-cannon__toggle {
+  position: relative;
+  right: -14px;
+  top: -39px;
+  width: 200px;
+  cursor: pointer;
+  transform: scale(1.1);
+}
+
+.rainbow-cannon__cannon {
+  width: 500px;
+  transform: scale(1.3);
+}
+
+@media (min-width: 900px) {
+  .rainbow-cannon__toggle {
+    top: -90px;
+    transform: scale(1.05);
+  }
+
+  .rainbow-cannon__cannon {
+    transform: scale(1.1);
+  }
+}
+
+/* ENABLE HYPERCLAY TOGGLE */
+
+.flat-stack-container .flat-stack {
+  width: 100%;
+  max-width: 780px; /* Increased to accommodate wider rectangles */
+  min-width: 340px; /* Increased to accommodate wider rectangles */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  perspective: 1200px;
+  position: relative;
+  height: clamp(270px, 50vh, 420px); /* Slightly increased height to maintain proportions */
+  margin: 0 10px;
+}
+
+.flat-stack-container .rectangle {
+  width: clamp(100px, 15vw, 150px); /* Increased by 20px */
+  height: calc(clamp(100px, 15vw, 150px) * 1.5); /* 2:3 ratio */
+  position: absolute;
+  transform-style: preserve-3d;
+  transform-origin: bottom center;
+}
+
+.flat-stack-container .rectangle img, .flat-stack-container .rectangle svg {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.flat-stack-container #rectA {
+  z-index: 2;
+}
+.flat-stack-container #rectB {
+  z-index: 1;
+}
+.flat-stack-container #rectC {
+  z-index: 0;
+}
+
+@media (max-width: 420px) {
+  .flat-stack-container .flat-stack {
+    margin-left: -10px;
+  }
+}
+
+/* Media queries for better responsiveness */
+@media (max-width: 480px) {
+  .flat-stack-container .flat-stack {
+    height: clamp(200px, 40vh, 300px);
+  }
+  
+  .flat-stack-container .rectangle {
+    width: clamp(100px, 15vw, 150px); /* Increased by 20px */
+    height: calc(clamp(100px, 15vw, 150px) * 1.5);
+  }
+}
+
+/* Mobile-specific adjustments */
+@media (max-width: 480px) {
+  .flat-stack-container .flat-stack {
+    height: clamp(200px, 40vh, 300px);
+  }
+  
+  .flat-stack-container .rectangle {
+    width: clamp(100px, 15vw, 150px);
+    height: calc(clamp(100px, 15vw, 150px) * 1.5);
+  }
+}
+
+.flat-stack-container .slider-container {
+  position: relative;
+  right: 0rem;
+  width: 357px;
+  max-width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: .5rem;
+}
+
+.flat-stack-container .slider-container > svg {
+  width: 100%;
+}
+
+.flat-stack-container #slider-toggle {
+  cursor: pointer;
+}
+
+@media (min-width: 480px) {
+  .flat-stack-container .slider-container {
+    right: -1.5rem;
+  }
+}
+
+/* newsletter */
+
+.subscriber-name {
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 0;
+  width: 0;
+  z-index: -1;
+  overflow: hidden;
+}
+
+[name="contact-me-by-fax-only"] {
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 0;
+  width: 0;
+  z-index: -1;
+}
+
+@media (min-width: 830px) {
+  body {
+    font-size: 21px;
+  }
+
+  [type='text'],
+  input:where(:not([type])),
+  [type='email'],
+  [type='url'],
+  [type='password'],
+  [type='number'],
+  [type='date'],
+  [type='datetime-local'],
+  [type='month'],
+  [type='search'],
+  [type='tel'],
+  [type='time'],
+  [type='week'],
+  [multiple],
+  textarea,
+  select,
+  button,
+  input,
+  optgroup,
+  select {
+    font-size: 21px;
+  }
+}
+
+
+
+
+
+
+
+
+
+
+

package/examples/components/reference/sources/hyperclay/public-assets/js/app.js

@@ -0,0 +1,94 @@
+// ========================================
+// APP INITIALIZATION
+// ========================================
+// Loaded by server-rendered app templates (layout/app.edge)
+// Provides app-specific utilities not in hyperclayjs
+
+import { installDatastarErrors } from './datastarErrors.js';
+import movingBorder from './ui/movingBorder.js';
+import { initDashboard, installDashboardHelpers } from './dashboard.js';
+
+// Make movingBorder available globally before hyperclayjs loads,
+// so onrender="movingBorder(this)" attributes can resolve immediately
+window.movingBorder = movingBorder;
+
+// Before datastar can issue a request, so its refusals can show the server's own message.
+installDatastarErrors();
+
+// Expose dashboard helpers before datastar loads: its init-time data-attr
+// expressions (header select-all) reference dashAllState eagerly, during the
+// await below, before initDashboard() would otherwise run.
+installDashboardHelpers();
+
+// Wait for hyperclayjs to load
+await import('/public/js/vendor/hyperclayjs/hyperclay.js?features=toast-hyperclay,save-system,save-toast,cookie,the-modal,ajax-elements,dialogs,all-js,slugify,dom-helpers,event-attrs,mutation,hyper-morph,file-upload,export-to-window');
+import getCurrentFolderId from './hyperclay/getCurrentFolderId.js';
+import { initAutoLogin } from './hyperclay/autoLogin.js';
+import generateSyncKey from './hyperclay/syncKey.js';
+import changeUsername from './hyperclay/changeUsername.js';
+import { handleShareResponse, revokeShareAccess } from './hyperclay/shareAccess.js';
+import { showCollectionInfo } from './hyperclay/collectionInfo.js';
+import { loadPeopleList, peopleRespond } from './hyperclay/peopleList.js';
+import { pollAddCms } from './hyperclay/pollAddCms.js';
+import { dashboardUpload } from './hyperclay/dashboardUpload.js';
+
+// ========================================
+// Cookie Toast Message Handling
+// ========================================
+const msg = window.cookie.get("msg");
+if (msg) {
+  const msgType = window.cookie.get("msgType");
+  window.toastHyperclay(msg, msgType || "success");
+  window.cookie.remove("msg");
+  window.cookie.remove("msgType");
+}
+
+// ========================================
+// Initialize dashboard helpers (selection, drag-drop, confirm bridge)
+// ========================================
+initDashboard();
+
+// ========================================
+// Extend window.hyperclay with app utilities
+// ========================================
+Object.assign(window.hyperclay, {
+  movingBorder,
+  getCurrentFolderId,
+  initAutoLogin
+});
+
+// ========================================
+// Dashboard utilities (attached to window for onclick handlers)
+// ========================================
+window.generateSyncKey = generateSyncKey;
+window.changeUsername = changeUsername;
+window.handleShareResponse = handleShareResponse;
+window.revokeShareAccess = revokeShareAccess;
+window.showCollectionInfo = showCollectionInfo;
+window.loadPeopleList = loadPeopleList;
+window.peopleRespond = peopleRespond;
+window.pollAddCms = pollAddCms;
+// The dashboard's own upload transport: hyperclayjs posts to a hardcoded /_/upload, which binds
+// a team upload to the actor's personal account.
+window.dashUploadFile = dashboardUpload;
+
+// ========================================
+// Auto-Login on Login Pages (after DOM is ready)
+// ========================================
+// Wait for DOM and config to be available before checking for auto-login
+window.addEventListener('DOMContentLoaded', () => {
+  if (document.getElementById('login-form') && document.getElementById('auto-login-status')) {
+    const autoLoginData = window.autoLoginConfig || {};
+    if (autoLoginData.appUrl) {
+      initAutoLogin(autoLoginData);
+    }
+  }
+});
+
+// ========================================
+// Readiness signal
+// ========================================
+// The hyperclayjs bundle is top-level awaited above, so ask(), consent(), and slugify() do not
+// exist until this point. Anything waiting to drive the page can wait on this attribute instead
+// of guessing from network activity, which never settles on a page holding an SSE stream.
+document.body.setAttribute('data-app-ready', '1');