codeapp-js 1.0.1 → 1.1.0

package/examples/apps/todo/dist/styles.css

@@ -1,691 +0,0 @@
-/* ============================================
-   BRUTALIST THEME - Power DevBox Notes
-   ============================================ */
-:root {
-  --bg: #f5f0eb;
-  --bg-elev: #fff;
-  --surface: #fff;
-  --text: #111;
-  --muted: #888;
-  --primary: #2962ff;
-  --accent: #4163be;
-  --danger: #ff3d00;
-  --black: #111;
-  --border: 3px solid #111;
-  --border-thin: 2px solid #111;
-  --radius: 0px;
-  --shadow: 4px 4px 0 #111;
-  --shadow-lg: 6px 6px 0 #111;
-}
-
-/* Prevent text overflow and improve mobile experience */
-*, *::before, *::after {
-  box-sizing: border-box;
-  max-width: 100%;
-}
-
-/* Improve word wrapping for long content */
-.preview, .content, .title, .note-item .title {
-  word-wrap: break-word;
-  overflow-wrap: break-word;
-  hyphens: auto;
-}
-
-/* Ensure inputs don't exceed container width */
-input, textarea, select {
-  max-width: 100%;
-  font-size: 16px;
-}
-
-#btn-preview {
-  margin-right: 5px;
-}
-
-/* Specific mobile input fixes */
-@media screen and (max-width: 768px) {
-  input[type="email"], input[type="password"], input[type="text"], textarea {
-    font-size: 16px;
-    -webkit-appearance: none;
-    appearance: none;
-    border-radius: 0;
-  }
-}
-
-/* Prevent code blocks from causing horizontal scroll */
-.preview pre, .preview code {
-  overflow-x: auto;
-  max-width: 100%;
-}
-
-/* Ensure images in preview don't overflow */
-.preview img {
-  max-width: 100%;
-  height: auto;
-}
-
-html { height: 100%; }
-body {
-  margin: 0;
-  font-family: 'Space Grotesk', system-ui, sans-serif;
-  color: var(--text);
-  background: var(--bg);
-  overflow-x: hidden;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-}
-
-/* App bar */
-.app-bar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px 16px;
-  position: sticky;
-  top: 0;
-  background: var(--bg);
-  border-bottom: var(--border);
-  min-width: 0;
-  z-index: 1000;
-}
-.app-bar h1 {
-  margin: 0;
-  font-family: 'Space Mono', monospace;
-  font-size: 16px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 2px;
-  min-width: 0;
-}
-.app-bar .left {
-  display: flex;
-  gap: 12px;
-  align-items: center;
-  min-width: 0;
-  flex: 1;
-}
-.app-bar .right {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  flex-shrink: 0;
-}
-.app-bar-logo {
-  height: 20px;
-}
-#sync-status {
-  font-family: 'Space Mono', monospace;
-  font-size: 11px;
-  color: var(--muted);
-  padding: 4px 10px;
-  background: var(--bg);
-  border: var(--border-thin);
-  white-space: nowrap;
-  text-transform: uppercase;
-  letter-spacing: 1px;
-}
-
-/* Container layout */
-.container {
-  display: grid;
-  grid-template-columns: 300px 1fr;
-  gap: 16px;
-  padding: 16px;
-  max-width: 960px;
-  margin: 0 auto;
-  min-width: 0;
-  width: 100%;
-  flex: 1;
-}
-
-/* Sidebar */
-.sidebar {
-  background: var(--surface);
-  border: var(--border);
-  box-shadow: var(--shadow);
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  min-height: 70vh;
-  min-width: 0;
-}
-.search {
-  padding: 12px;
-  border-bottom: var(--border-thin);
-  display: flex;
-  gap: 8px;
-  align-items: center;
-}
-.search input {
-  flex: 1;
-  padding: 10px 12px;
-  border: var(--border-thin);
-  background: var(--bg);
-  color: var(--text);
-  font-family: 'Space Grotesk', sans-serif;
-  font-size: 14px;
-  min-width: 0;
-}
-.search input:focus {
-  outline: none;
-  background: var(--accent);
-}
-.tags {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  padding: 8px 12px;
-}
-.tag {
-  background: var(--bg);
-  border: var(--border-thin);
-  color: var(--text);
-  padding: 4px 10px;
-  font-size: 11px;
-  font-family: 'Space Mono', monospace;
-  text-transform: uppercase;
-  letter-spacing: 1px;
-  cursor: pointer;
-  white-space: nowrap;
-  transition: background 0.15s;
-}
-.tag:hover {
-  background: var(--accent);
-}
-
-.note-list {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-  flex: 1;
-  overflow-y: auto;
-}
-.note-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 12px 12px;
-  background: var(--surface);
-  border-bottom: var(--border-thin);
-  cursor: grab;
-  min-width: 0;
-  font-weight: 700;
-  transition: background 0.15s;
-}
-.note-item:hover {
-  background: var(--accent);
-}
-.note-item .note-del {
-  margin-left: auto;
-  background: transparent;
-  border: var(--border-thin);
-  color: var(--text);
-  width: 24px;
-  height: 24px;
-  cursor: pointer;
-  font-size: 16px;
-  line-height: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.15s;
-}
-.note-item .note-del:hover {
-  background: var(--danger);
-  color: #fff;
-  border-color: var(--danger);
-}
-.note-item .note-del:active {
-  transform: scale(0.9);
-}
-.note-item.dragging {
-  opacity: 0.6;
-}
-.note-item .title {
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  min-width: 0;
-}
-
-/* Editor */
-.editor {
-  background: var(--surface);
-  border: var(--border);
-  box-shadow: var(--shadow);
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  min-height: 70vh;
-  min-width: 0;
-}
-.toolbar {
-  display: flex;
-  gap: 0;
-  align-items: center;
-  flex-wrap: wrap;
-  border-bottom: var(--border);
-  padding: 0;
-}
-.toolbar button {
-  background: var(--surface);
-  color: var(--text);
-  border: none;
-  border-right: var(--border-thin);
-  padding: 10px 12px;
-  cursor: pointer;
-  white-space: nowrap;
-  font-family: 'Space Mono', monospace;
-  font-size: 13px;
-  font-weight: 700;
-  text-transform: uppercase;
-  transition: background 0.15s;
-}
-.toolbar button:hover {
-  background: var(--accent);
-}
-.toolbar .spacer {
-  flex: 1;
-  min-width: 8px;
-  border: none;
-}
-.title {
-  font-family: 'Space Grotesk', sans-serif;
-  font-size: 20px;
-  font-weight: 700;
-  text-transform: uppercase;
-  padding: 12px 16px;
-  border: none;
-  border-bottom: var(--border);
-  background: var(--surface);
-  color: var(--text);
-  width: 100%;
-  min-width: 0;
-}
-.title:focus {
-  outline: none;
-  background: #fffde7;
-}
-.content {
-  min-height: 280px;
-  resize: vertical;
-  padding: 16px;
-  border: none;
-  background: var(--bg);
-  color: var(--text);
-  line-height: 1.6;
-  width: 100%;
-  min-width: 0;
-  font-family: 'Space Grotesk', sans-serif;
-  font-size: 15px;
-  flex: 1;
-}
-.content:focus {
-  outline: none;
-  background: #fff;
-}
-.preview {
-  min-height: 280px;
-  padding: 16px;
-  border-top: var(--border);
-  background: #fff;
-  width: 100%;
-  overflow-wrap: break-word;
-  word-wrap: break-word;
-  overflow-x: hidden;
-  flex: 1;
-  overflow-y: auto;
-}
-.status-bar {
-  position: sticky;
-  bottom: 0;
-  background: var(--black);
-  border-top: var(--border);
-  padding: 8px 16px;
-  color: #999;
-  font-family: 'Space Mono', monospace;
-  font-size: 12px;
-  text-transform: uppercase;
-  letter-spacing: 2px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  flex-shrink: 0;
-  z-index: 100;
-}
-
-/* Buttons */
-button {
-  font-family: 'Space Grotesk', sans-serif;
-  transition: all 0.15s;
-}
-button:hover {
-  transform: translate(2px, 2px);
-}
-button.primary {
-  background: var(--primary);
-  color: #fff;
-  border: var(--border);
-  box-shadow: var(--shadow);
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 1px;
-  padding: 8px 16px;
-}
-button.primary:hover {
-  box-shadow: 2px 2px 0 var(--black);
-}
-button.tonal {
-  background: var(--bg);
-  border: var(--border);
-  color: var(--text);
-  box-shadow: var(--shadow);
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 1px;
-  padding: 8px 10px 8px 10px;
-}
-button.tonal:hover {
-  background: var(--accent);
-  box-shadow: 2px 2px 0 var(--black);
-}
-button.danger {
-  background: var(--danger);
-  color: #fff;
-  border: var(--border);
-  box-shadow: var(--shadow);
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 1px;
-  padding: 8px 16px;
-}
-button.danger:hover {
-  box-shadow: 2px 2px 0 var(--black);
-}
-
-/* New Note button */
-#btn-new {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 38px;
-  height: 38px;
-  padding: 0;
-  flex-shrink: 0;
-  font-size: 0;
-  background: var(--accent);
-  border: var(--border-thin);
-  color: var(--black);
-  box-shadow: 2px 2px 0 var(--black);
-  cursor: pointer;
-  transition: all 0.15s;
-}
-#btn-new::before {
-  content: '+';
-  font-size: 22px;
-  line-height: 1;
-  font-weight: 700;
-  color: var(--black);
-}
-#btn-new:hover {
-  transform: translate(2px, 2px);
-  box-shadow: 0 0 0 var(--black);
-  background: var(--primary);
-  color: #fff;
-}
-#btn-new:hover::before {
-  color: #fff;
-}
-#btn-new:active {
-  transform: translate(2px, 2px);
-  box-shadow: 0 0 0 var(--black);
-}
-#btn-new:focus-visible {
-  outline: 3px solid var(--primary);
-  outline-offset: 2px;
-}
-
-/* Preview content */
-.preview h1, .preview h2, .preview h3 {
-  margin: 16px 0 8px;
-  font-family: 'Space Grotesk', sans-serif;
-  text-transform: uppercase;
-}
-.preview code {
-  background: var(--bg);
-  padding: 2px 6px;
-  border: var(--border-thin);
-  font-family: 'Space Mono', monospace;
-}
-.preview pre {
-  background: var(--black);
-  color: #e0e0e0;
-  padding: 16px;
-  border: var(--border);
-  overflow: auto;
-}
-.preview a {
-  color: var(--primary);
-  text-decoration: underline;
-  text-underline-offset: 3px;
-}
-
-/* Muted text utility */
-.muted { color: var(--muted); }
-
-/* Form spacer */
-.form-spacer { height: 8px; }
-
-/* Modal */
-.modal[hidden] { display: none; }
-.modal {
-  position: fixed;
-  inset: 0;
-  display: grid;
-  place-items: center;
-  z-index: 1000;
-  padding: 16px;
-}
-.modal__backdrop {
-  position: absolute;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.6);
-}
-.modal__dialog {
-  position: relative;
-  width: min(480px, 92vw);
-  background: var(--surface);
-  border: var(--border);
-  box-shadow: var(--shadow-lg);
-  padding: 24px;
-  max-width: 100%;
-  box-sizing: border-box;
-}
-.modal__dialog h2 {
-  margin: 0 0 8px 0;
-  font-family: 'Space Grotesk', sans-serif;
-  text-transform: uppercase;
-  letter-spacing: 1px;
-}
-.modal__dialog input {
-  width: 100%;
-  padding: 10px 12px;
-  border: var(--border-thin);
-  background: var(--bg);
-  color: var(--text);
-  font-family: 'Space Grotesk', sans-serif;
-  box-sizing: border-box;
-}
-.modal__dialog input:focus {
-  outline: none;
-  background: var(--accent);
-}
-.modal__actions {
-  margin-top: 16px;
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-  flex-wrap: wrap;
-}
-
-/* Responsive: tablet */
-@media (max-width: 900px) {
-  .container {
-    grid-template-columns: 1fr;
-    padding: 12px;
-    gap: 12px;
-  }
-}
-
-/* Responsive: mobile */
-@media (max-width: 600px) {
-  .app-bar {
-    padding: 8px 12px;
-    gap: 8px;
-    z-index: 1000;
-  }
-  .app-bar h1 {
-    font-size: 13px;
-    letter-spacing: 1px;
-  }
-  .app-bar .left {
-    gap: 8px;
-  }
-  .app-bar .right {
-    gap: 6px;
-  }
-  .app-bar .right button {
-    padding: 6px 8px;
-    font-size: 12px;
-  }
-  #sync-status {
-    font-size: 10px;
-    padding: 3px 6px;
-  }
-  .container {
-    padding: 8px;
-    gap: 8px;
-    padding-bottom: 40px;
-  }
-  .sidebar {
-    padding: 0;
-    max-height: 35vh !important;
-  }
-  .editor {
-    padding: 0;
-    overflow-x: hidden;
-  }
-  .toolbar {
-    gap: 0;
-    flex-wrap: wrap;
-  }
-  .toolbar button {
-    padding: 6px 8px;
-    font-size: 11px;
-  }
-  .toolbar .spacer {
-    display: none;
-  }
-  .title {
-    font-size: 16px;
-    padding: 8px 12px;
-  }
-  .content {
-    padding: 10px;
-    font-size: 14px;
-  }
-  .preview {
-    padding: 10px;
-    font-size: 14px;
-    overflow-x: hidden;
-        
-  }
-  .modal__dialog {
-    width: min(360px, 95vw);
-    padding: 16px;
-  }
-  .sidebar { min-height: auto; }
-  .note-list { max-height: 50vh; overflow-y: auto; }
-}
-
-/* Responsive: small mobile */
-@media (max-width: 400px) {
-  .sidebar {
-    max-height: 35vh !important;
-  }
-  .app-bar {
-    flex-wrap: wrap;
-    gap: 6px;
-    z-index: 1000;
-  }
-  .app-bar .left, .app-bar .right {
-    gap: 4px;
-  }
-  .toolbar button {
-    padding: 4px 6px;
-    font-size: 10px;
-  }
-  .modal__dialog {
-    width: min(320px, 98vw);
-    padding: 12px;
-  }
-  .preview {
-   overflow-y: auto;
-  }
-}
-
-/* --- Task list checkbox custom style --- */
-.preview .task-item input.task-box {
-  position: absolute;
-  opacity: 0;
-  inset: 0;
-  width: 16px;
-  height: 16px;
-  margin: 0;
-  pointer-events: none;
-}
-.preview .task-item label {
-  position: relative;
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  cursor: pointer;
-}
-.preview .task-item .checkbox-ui {
-  position: relative;
-  width: 16px;
-  height: 16px;
-  flex-shrink: 0;
-  border: 2px solid var(--black);
-  background: #fff;
-  transition: border-color 0.15s, background 0.15s;
-  display: inline-block;
-}
-.preview .task-item .checkbox-ui:hover {
-  background: var(--accent);
-}
-.preview .task-item input.task-box:focus + .checkbox-ui {
-  outline: 3px solid var(--primary);
-  outline-offset: 2px;
-}
-.preview .task-item input.task-box:checked + .checkbox-ui::after {
-  content: '\2713';
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 14px;
-  font-weight: 700;
-  color: var(--black);
-  line-height: 1;
-  background: none;
-}
-.preview .task-item .task-text {
-  line-height: 1.4;
-}
-/* --- End task list checkbox custom style --- */

package/examples/apps/todo/power.config.json

@@ -1,35 +0,0 @@
-{
-  "appDisplayName": "Todo",
-  "description": "A task management app backed by the Dataverse task table.",
-  "environmentId": "<ENVIRONMENT_ID>",
-  "buildPath": "./dist",
-  "buildEntryPoint": "index.html",
-  "logoPath": "icon192.png",
-  "localAppUrl": "http://localhost:3000",
-  "region": "prod",
-  "connectionReferences": {
-    "dataverse": {
-      "id": "/providers/Microsoft.PowerApps/apis/shared_commondataserviceforapps",
-      "displayName": "Microsoft Dataverse",
-      "dataSources": [
-        "commondataserviceforapps"
-      ],
-      "authenticationType": null,
-      "sharedConnectionId": null,
-      "dataSets": {}
-    }
-  },
-  "databaseReferences": {
-    "default.cds": {
-      "databaseDetails": null,
-      "dataSources": {
-        "tasks": {
-          "entitySetName": "tasks",
-          "logicalName": "task",
-          "isHidden": false
-        }
-      },
-      "actions": null
-    }
-  }
-}